 Welcome back to the channel. In today's video I'm going to show you how we connect our HTML form so that when we click this button we are going to get the information that is submitted here, use Ajax and JavaScript to be able to query our API in PHP and then put the two together so that at the end of the day we should be able to have information displayed here that this domain is actually available and we have a button that says you can register this. So if this is something you're interested in then let's jump into the code. So the first thing that I'm going to do is comment out checking the API because we don't want to keep querying and running out our credits or available units available per hour depending on how your API reacts but also we don't need it at this point until we get to the part where we need to check the API. The next step is I'm going to use WPNQ scripts and this is a function from WordPress that allows us to add JavaScript inside our own code and this is the right way to do it in WordPress. So the first thing I need to do is actually pass an ID and the ID that I'm going to have here is take a press XML form, check that will be the ID for our JavaScript. The next thing we need to do is actually pass in the JavaScript file that we are going to use. So API XML search dot JavaScript but this particular file is going to be relative to our folder here called assets slash JS and inside here we're going to create a new file API dash XML search dot JS and then when we come back here we should be able to use something like plugins directory URL which is a WordPress function and in here we shall pass in file to say it is relative to this particular file that we are using here then we can connect here and say let's append slash assets and then we're going to say slash JS and then slash the name of the file so after doing that we need to add the dependencies and in here I'm going to use jQuery because jQuery makes it really easy for us to do Ajax searching for the DOM and manipulating it really easy so the next thing we need to do is add a version and say this is version 1.0.0 and then the other thing I'll say let this be true let it load in the footer but I need to make one correction here this should be wp and q script we are loading only one script not using the hook so once we have this I'm going to go back to our browser I'll open up my inspector tool check the console.log and in the code here in our XML search I'm going to just say console.log semicolon and say this is loading so I'll save this come back to our browser hit a hard reload and you'll see that we have an error it's saying domain, assets is misspelled so I'm going to come back here and then just check this this should be assets this is assets save this come back to our browser reload and this is loading so this is perfect this is what we want we're going to write some JavaScript from this point on forward first and foremost when we click on this button right here I'm going to just add an ID so that we can be able to quickly reference this I'll also do the same thing here and say let's give this an ID similar to the class name so that we can quickly reference it so when we click on this submit button we should be able to get the value that is coming or that is input in this particular box so I'll remove our console.log let's first have some jQuery in here and when we have jQuery loaded we're going to check for the document and we're going to say when the document is ready that is the DOM we need to then have a function that's going to run and this function will have the dollar sign passed to it as an argument will add a semicolon and basically saying whenever we have this reference of the dollar sign we want to reference jQuery in that case so instead of writing jQuery every other time in here we can just say write the dollar sign check for example and say let's look for the ID of domain such as submit and we're going to say every time this is actually clicked we're going to add the method of click or the function of click we should then run this function and this is an anonymous function and let's have the event being passed in here so I'll just denote it with the letter E and say first things first let's stop everything that would be by default that is a function inside of JavaScript so essentially what this is doing I'm going to first comment it out so that you can see what happens if we don't have that line of code I'll reload this when I click this button and you'll see right here that we have a new URL with an expectation of text in here so I'll say let's just say text click search you'll see that it passes this to the URL as a parameter but when I come in here and say let's prevent this as a default reload this every time we click the search box nothing actually happens let me remove this hit enter every time we click this search button you'll see that nothing actually happens because we've prevented the default behavior of this button so what we want to do here at this point is let's say let's console.log and what we want to log is the value that we get from this input field so I'm going to copy this ID here and say let's now get dollar sign let's get the value of this and we want to get the value of this let's say let's search underscore text equal to what we get here so once I get that value we should be able to console.log it right here so I'll go back to my browser I'll give this a hard reload I'll type take a press dot juji whenever I click search you'll see that we actually get this console.log right here we can now move to the next step because we're getting everything working perfectly once that button is clicked we've gotten the value that we need we now need to use our Ajax so I'm going to say dollar sign dot Ajax which is a function in jQuery we now want to do some stuff in here inside our Ajax function it allows us to pass a URL we can also pass data which is a data object we also have the type of Ajax query that we are making which can be a post and this is a string it can be a post it can be a get method so we have post in this particular case because I'm going to send back information I'm going to send this search text back to the Ajax query so that we can get feedback now the next thing we do have is we do have a success and once we have success we can actually pass a function and we can also have an error at this point so I need to add a comma here so that my editor stops shouting at me now in here when we have a success we can have a result you can call it anything that you want to but I'm going to call it result and the same thing here inside our error now in both cases you can console log the result and I'll copy this and pass it here as well in our data here we want to be able to pass an action and this action is going to be a function inside our PHP the function that we'll be able to trap our data that we're sending as a post and then run it through PHP and then use it to query our API so in this particular case I'm going to call this query XML API that will be the name of our action and then I can pass some other things to it for example I want to pass the search underscore text and this is going to come from here so we pass this value as well and then we need to define what our URL is going to be in here we need to pass the URL which is going to basically be HTTPS slash slash domain dot local slash WP admin slash Ajax dot PHP every time we change this plugin and put it on another site they'll have to define their particular URL like this this is not a nice way to do it so what I'm going to do is I'm going to save this and I'm going to come back to our PHP here and I'm going to pass some values to this particular JavaScript file and the way we do this is by using WP localize script which is a function inside WordPress that's why you see the WP before it and I'm going to say let's localize this particular file with this ID we want to pass an object and we're going to say this is Ajax values and I'll just pass this with an underscore we say those are the Ajax values we want to pass and finally we want to pass an array of data and in this array we want to pass the URL which would be the Ajax URL and of course this is going to be a string and we need to map our URL there and we can say let's use the admin underscore URL which is the WordPress way of getting this administrative URL and that is the first part of the string and inside this function we're going to pass one parameter which is admin-ajax.php so I'm going to change this into a comma not a semicolon and what we'll do is I'm going to get Ajax value and Ajax URL I'll come back in here and say every time jQuery is loaded let's console log we want to get the Ajax underscore values and we want to get the Ajax underscore URL from that so let me save this but we haven't defined the URL variable here so we'll be getting errors in our browser console so it's best that we define it right here I'll say const URL is going to equal to that this is the URL let's console log the URL so that this does also not error out when it runs this so I'll just cross check because we have an issue here we fixed that our editor is not shouting let's go back to our browser let's reload this page and you'll see that now we're console logging the correct URL here when I click on this you'll see that it actually opens up the Ajax URL and it shows zero we're just not doing anything but something is happening so if we go back to our editor now we have the URL working correctly I'll remove this comment I'll remove this console log we have our search text working properly I'll copy the name of our action and then go back to the PHP file and the first thing that I will do is function with this name I just want us to error log so I'm going to error log I want to get all the values that are passed to the post now in order to use this action here I need to use the wordpress actions which is add action and in this action I'm going to use the WP Ajax and when we write underscore we can pass in the action now this action should be the action of this please be careful and just pass in that right there so after doing that we can now add a callback function which we've basically named this here so I'm just going to prefix it with take a press so that you can see a difference so the function we actually want to run at that action is this particular callback using this on the front end and sometimes some people would not be logged in we need to come back to our code and say we need to run this same action but we need to add a no preve for no privileges so someone is not logged in but they can still run this particular action right here so I'm going to save this I'll come back to our browser here and I'm going to type take a press dot ug when I click search here you'll see it's telling us that xml api is not defined and that is an error in my code because in the javascript I use this as a variable yet it should be a string so I'll click save here again come back to the browser give this a hard reload when I type take a press dot ug click search you'll see that we console log this zero on line 25 we're hitting our ajax something is happening when I come back to our editor and then scroll down all the way you'll see that we have this action being passed in the post here and we are also getting the search text also showing up in our post so I can come back here and say I'll press the values that we got back here and reuse them let's add some conditions to make our function run well we'll say if and what I'm going to do is just comment this out so that we stop having errors shouting here let's carry on by saying if empty and this is our post object if this is empty the global is empty we should just echo and we'll say this should be json encode and say add post items missing that would be the first thing that we'll do we'll duplicate this and we'll use this function of wp die to stop ajax from running over and over again I'm going to do the same thing here and say if empty and basically what we are looking for here is the search text we should have the same message passed for both conditions so what I'm going to do is just join up these two and say let's add an o symbol here those particular things are missing and I'll duplicate all that is above and say let's get the reverse of this and say if it's not empty at the post and not empty in the search text then what we need to do is actually run our query that we had here so we're going to check for the XML data and bring this here and say let's query this and what we want to pass in here is this particular search text so let's pass back this search text from the post object into our function and we'll pass the function as a variable of results and then we shall get these results and then pass it through into our json encode and this is the data that we'll send back to our javascript this means every time we call this action we're going to check our API for the data, we'll pass this text and we're going to get back the results from here so let's go back and try that I'm going to save this come back to our browser I'm going to hard reload this I'm going to pass in techiepress.ug click search you'll see that we get back techiepress we get back this information back in a neat json with ura availability zero meaning the second app techiepress.ug is available and that is because in our PHP we still have this being checked and we have this being checked what I can do to just only check for this piece that has been passed here is say this function actually expects a domain or it can be anything it can be domain, underscore value, whatever you want to call it and I'm going to copy this domain value and I'm going to pass it in this section so we'll pass some strings here add some concatenation periods and then I'll remove this extra item from here so we know that we're only going to check for only one domain so let me go back I'm going to change this to techiepress.io.ug click search the right domain is passed back but in the results we have the name and the availability all coming back as now so this is an anomaly that we need to check let me error log this and we want to see the body response because we've made modifications to our code this is bound to happen whenever I change code so it's good for you to write what are called unit tests and that is something that I want to explore on this channel we want to see how we write tests and other things inside WordPress please let me know in the comments and then I'll consider adding that as part of this particular series or in another series so let's test this by clicking this and let's go back to our editor we get our post data we also get a proper response from the API so that means there is a problem with our function that actually returns the means so we need to check this at this point because the way the data comes back from here is not the same way it comes back when it's only one item so what I'm going to do is make a modification to this function so I'm going to error log our PHP here I'm going to save this let's come back to our browser I'll hit search again let's go back to our code debug.log at this point we only have objects so we have domains as an object we have domain as another object and then we have attribute as an object and then we have the name and the availability however this is different from what we have here we have a difference in the data type we have arrays when we have so many domains being returned and yet we have only objects when we have one domain coming in so this is going to call for us to add a conditional so that we can get only a single domain being checked for or multiple I'll add an if statement here and we're going to use the PHP function which is is underscore array that helps us to check whether we're working with an array or something else and when I pass is array then we should be able to get this information right here I'll duplicate the if statement if it is not an array then we shouldn't use it for each loop but rather treat it differently so I'm going to come back in here I'll get our PHP domains object and then try to map onto it the domain object that follows the kind of data type that we initially had when we error logged our data I will error log what we have here as the data and this is all to make sure that we have the right data that we expect coming in to our function so I'll add this right here I'll save this I'll click search go back to the editor and I'll go into that debug log and you're going to see that we actually get back the attributes object and it has the correct information at this point so I'm just so I'm going to get what we have here and then chain on the objects attribute remember we need to pass this as a string and that's the way that PHP will understand that we want to get this same object hit serve reload the browser click search and you see that we have an empty array however if we go back to our editor and we go to the debug.log we are getting back the object that we want with the name and the availability so we should be able to get this and then use it in our editor to basically map and say this is the data we'll be looking for one individual domain and we want to push that data back as a JSON response let's copy this array push that we had previously paste it here I'll copy this domain log variable paste it here and say that it's equal to what we have here as the object I'll clean this out then we can use this domain log inside our array push that we are making down here so our editor is screaming at us and telling us these are not defined so all I need to do is say let's get the domain log paste it here and then we shall use our single arrow and say the domain log we are looking for the name I'll do the same for the availability here so I'm going to save this and with this modification we are now catering for both the single and the multiple domains being returned if you want to see how I function please look in the previous video and you'll see how we came about with all of this so I'm going to go back to our editor here I'll hit search and you'll see right here that now we actually get back a nice response from our API and for our particular domain so I'm going to come back here in our JavaScript I'm going to say the result is good now we need to just say let domain response and now we are describing a new domain response and we're going to say let's json.pass the information that's coming back and basically this is the result we want to json pass so let's see what we get back as the domain response after passing it I'll come back to the browser I'll type in take your browser click search and you'll see that we get back and this is an object that we can actually go to and pick the name and availability we shall come back to our code and then we shall use the jQuery each function to basically go over each item inside the object in this each function we need to now pass an anonymous function that we are going to loop over from each individual object so we shall pass our variable of domain response here and we shall be able to loop over that in the function and that means we can get an index and a value so what I'm going to do here is console log the index the other thing that I'm going to console log is the value so I'll hit save here, come back in our browser, hard reload do take a press dot tuji click search you'll see that we get back our index of zero and then we have our object which has our name and availability this other array it's coming from this other console log so don't get confused by that tool so we have the index, we have the value now what we need to do is just get the value dot name and then we can also get value dot availability you can pause the video and see what you'll get back as a result at this particular point but what I'm going to do is now to the front end and I'm going to use some if conditioners to allow me to be able to display the data when we have an availability of one which means that we are able to register this domain under zero which is for that domain that is not available if it is equal to one we should console log the name and take the value name and I'm going to chain on some strings here and say is available for purchase that's what we want to do at that point and I will duplicate this so that you can see the difference and say if it is zero let's add not I'll comment out the console log and make sure that the way spelt availability is the same way as I did inside our PHP so I'll copy this come back to our javascript and make sure that is the same all through I'll comment out the console logs above as well and then we'll go back to our browser after hard reload I'll put this click search and you'll see it says this is not available because that's taken up and when I say take a press click search you'll see this is available for purchase so I'm going to just basically move this into our DOM I'm going to go back to our html and I'm going to add a new div with an ID of registration and a class of registration so that we can be able to style it and this is basically emet helping me throughout of this I'll come back to our javascript here so using jQuery we are going to look for the ID of registration and we are going to append which is a method in jQuery as well to do we are going to append what we have here so I'll paste this in here and say instead of console log I'm actually going to just add some tags and say this is a paragraph same thing here I'm going to add a paragraph comma p and I just need to chain this up together because it's one thing and add a plus symbol here to write our javascript I'll remove that extra semicolon that is giving us errors I'll copy this and I'll pass this here and I'll just use our not available here remove this console log I'll add a button here that says register and then close it off as well so this is what's going to happen so when someone comes back to the front end reload this click ura.go.uji click search you get this without any problem if I change this to take a press which should be available I'm going to click search you'll get this back you have a button that you can click register and that will allow you to do some other PHP queries and so on so that you can be able to register this domain inside our API as you can see we are getting closer to our final product so in the next video I should be able to style this up and we should be able to make this into something that we can hook into wukamas allow us to make a product with our customization and then go and check out to pay and then after payment we should be able to get that order stored in and have the domain if not we should be able to have this as a standalone program and that's what we're going to do in the incoming videos if you enjoyed this please give it a thumbs up don't forget to share and subscribe if you're new to this channel and if you have any comments or questions that you want to share with me please leave them below the video and then I'll be able to get back to you as soon as I can enjoy whatever you're developing