Php, Ajax,Jquery,Javascript,Html and Css all these languages are very much related. You need to know all these (or atleast the the basics of all these languages to build a website or web application. Many of you might know these stuffs, but atleast some of you might be confused about the clubbing of all these techniques. This tutorial will help you to understand the basics all these languages and the relation between them in a minimum amount of code.
Step1 : Understanding the html part
Above code shows a simple HTML form which contains two divisions in it.
- div with id = names
Every element got a tag name, attribute and value, consider the a tag Here the tag is “a” and the attribute is href and attribute value is ‘#’.
- div with id= other details
Lets have a close look about whats there inside these divisions.
div names In this div there are two input text boxes into which we can input values. You can check the type attribute for the input boxes has been given as “text”, which makes them text input boxes. In line no 17(in the second div), the input type is “submit”, which means its supposed to be a submit button (This submit button helps us to submit the form) .You might also have checked the “a” tag in line number 3,
Capitalize Javascript
“a” tag generates a hyperlink, this specific “a” tag is very much related to javascript so I will explain this in that section.
div otherdetails
In the second div, there are two select boxes, one text input box and a submit button.The first select box allows us to select an interest, vehicles or fruits
The second select box is part of our ajax , so I will explain it later , in the ajax section
Step2 :Understanding CSS -Style Sheets
Anything given in the style tags refers makes up the styles for the html, the purpose of using css is to style what we build using html. For instance, adding a color to paragraph.
This style sheet brings up the entire style for the html shown above. Style sheets are very simple to understand, there are selectors and properties in stylesheets. We select a particular element from the html and applies the css properties into it, for instance
#names input {
border: 2px solid grey;
margin-left: 24px;
margin-top: 12px;
}“#” (hash) are for selecting id and “.” (dot) are for selecting a class
css selector
Here we are selecting the element with id “names”. If we give a close look to the html code, we can see that it is selecting the first division with id “names”. #names input, means that we are selecting all the “input” html elements inside the names division.
We can select html elements using the attributes given also.
#otherdetails input[type=submit]
Selects the input elements from the div otherdetails which has attribute type=submit. So, for sure, its selecting the submit button.
Css Properties
Now we are applying the properties to the selected html elements , going above.
The style gives a 2 px grey border to the input boxes and a left margin and right top margin to each and every input elements in the division names.
For the submit button, background-color: #E3E138; property gives the color to the submit button.
Generalizing, Css selectors and properties should have a general format
selector{
property name: property value;
}
Have a look at the different types of css properties
Step 3: Understanding the Php Side
Coming to the php side
First Name : Last Name : Message : Second Interest :
At once we submit the form using the submit button, the form gets submitted or request goes to the server page along with the values we entered inside the input elements . From the code, its clear that the php is printing the values we entered inside the input fields
Step 4: Understanding the Javascript :
Javascripts are very much useful in client side interactions, if we need to do something with php, as it being the server side, request needs to be send to the server where in turn javascript being a client side or browser side language, no request needs to be send to the server or the page doesnt gets reloaded , You saved some of your internet bandwidth right? 🙂
Here is where javascripts can do magic. Imagine that you are building a calculator to sum two values, if you are using php you need to pass both values to server and should get the response from the server (calculated sum ). While in case of javascript, as the sum function is as simple as adding both two values passed, we just need to pass the values to the function to display the result without browser reload or delay.
Here the javascript we are using is two display the value entered in the first name input field to uppercase.
Capitalize Javascript
This “a” tag got an onclick attribute which has a values upper(), which means that it calls the javascript function named upper
Javascripts should be written inside
tags and here in the upper function which we have written,
var firstname=document.getElementById("fname").value;Here “document” represents the whole page, getElementById as it means,it gets an element with respect to its id. So as we said about the css selectors, it select the element with id=”fname” which is clearly the first name input field. value is a javascript property which gets the value inserted in that field.
function upper () {
var firstname=document.getElementById("fname").value;
var capitalname= firstname.toUpperCase();
alert(capitalname);
}
So in short variable firstname in the javascript should hold the firstname value which we have entered .
In the second line, we are converting the firstname value to uppercase, using the js function toUpperCase() . After that we are passing that final upper case translated values to the alert function, which displays the transformed name as a popup.
Step 5: Understanding the Jquery Part
Now lets have a close look at how jquery is implemented in this code.
$(document).ready(function(){
$('#dummymessage').click(function(){
$('#otherdetails input[name=message]').val('Hi , How are you?');
});
$("#interest").change(function(){
var datapassed={};
datapassed['interest']=$('#interest').val();
$.post('ajax.php', datapassed,function(response) {
$('#bestinterest').html(response);
});
});
});
This much part deals with the jquery in the entire code.
This can splitted into two sections
1. To port the dummy Message
Use of document.ready
$(document). ready is general for all jqueries, its not necessary if our jquery selectors( same
as css selectors) is selecting an element after its loaded .
Her we are selecting an id equal to “dummymessage” , that is its selecting the a tag next to the
message field,
So with out using the document.ready, we should write the jquery code below that “a”
tag, or else the jquery wont work. Here comes the use of document.ready, this makes sure that,
the jquery functions will be called after loading all the document elements.
Coming back to the jquery, click is a jquery function very much similar to javascript onclick. What happens is that when we click on the “a” tag with the id dummy message, this jquery code gets
executed.
$('#dummymessage').click(function(){
$('#otherdetails input[name=message]').val('Hi , How are you?');
});
Thats what happens inside the function. The above given jquery code is very much similar to the
css generalized syntax except the dollar sign and all.
Generalizing, what we have done above is
$(selector).property(value);
We are selecting the otherdetails div, and the text input field for message in that div.
val() is a jquery propery which deals about the value attribute of an element.
So whats happening in short is, when we click the ‘a tag’, the value, “Hi, How are you “, is inserted
into the message text box.
Step 6: Understanding the Ajax part
2. Ajax request for the dependent drop down
$("#interest").change(function(){
var datapassed={};
datapassed['interest']=$('#interest').val();
$.post('ajax.php', datapassed,function(response) {
$('#bestinterest').html(response);
});
});
You may have seen the dependent drop down in many website to display the state name at once we
select the country name, same is what implemented here.
$("#interest").changeChange is another jquery function which triggers the change of an element. So this jquery function.
gets called once we change the interest dropdown .
datapassed[‘interest’] is a javascript array, into which we ports the value from the interst dropdown.
Lets assume that “vehicles” is the value passed to the array,
Whats written next is the $.post,
this sends a request to the file ajax.php, passes the datapassed array which we made.
Now in ajax.php
";
}
else {
?>
The html data is passed as the response back to the file (ajax.php) from were we requested. Here another drop down with id specificinterest will be generated depending on the data passed (fruits or vehicles), and is passed back as response. Ideally response given in both if and else are same, first one echoes the html, while the second case (else condition) displays the plain html as response . (You cannot display html inside php tags, thats why I have closed the tags and reponed the php tags ).
How can we check request and response ?
For this we can use the developer tools for chrome, or firebug extension for mozilla firefox. I’ll explain how this is done in chrome, check the images given below.
Before sending the request (that is changing the dropdown , ) right click and select the Inspect element option (in chrome) .
Take the Network tab and then change the Interest dropdown, you can see the request sent to ajax.php
shows up in the network tab,
This got 4 sub tabs
1. Headers
2. Preview
3. Response
4. Cookies
5. Timing
If you take the headers,you can see the request url, to where which the request is sent – ajax.php here
If you scroll down, you can see the form data passed to the url , interest:fruit here, this means that this gets into the condition satisfying fruits and sends the specific interest drop down as the response . Check the images
Coming back to the code, what we get as the response is inside the variable response.
$('#bestinterest').html(response);
Means that, the response (that is the specific interest drop down) will be placed into the html of element with id “bestinterest” , which updates the second interest dropdown dependant to the parent dropdown selected. If you check, you will find that the page is not reloaded, which means that the complete operation was done through ajax.
So that makes the ajax part also complete, hope you understood this tutorial
