Ajax with PHP and HTML - php

Question

<input type="button" value="addkid " onClick="show()" />
<div>
<div id="myTableData" style="display:none; width:800px; height:500px; background-color:yellow; margin:0 auto;">
<form action="javascript:insert()" method="get">
<table>
<tr>
<td width="175">NAME</td>
<td width="245"> Gender</td>
<td width="245">Date of Birth</td>
</tr>
<tr>
<td width="175">
<input type="text" name="kid_name" id="kid_name" />
</td>
<td width="245">FEMALE
<input type="radio" name="gender" value="female" id="gender" />MALE
<input type="radio" name="gender" id="gender" value="male" />
</td>
<td width="245">
<?php for ( $i=1; $i<13; $i++ ) { $month=d ate( 'm', mktime(0,0,0,$i,2,2000)); $sel=( $i==d ate( 'n') ? ' selected="selected"' : ''); $options1[]="<option value=\" {$month}\ " {$sel}>{$month}</option>"; } $options_list1=j oin( "", $options1); echo "<select name=\"month\ " id='month' >{$options_list1}</select>"; for ( $j=1; $j<32; $j++ ) { $theday=d ate( 'd', mktime(0,0,0,0,$j,2000)); $sel=( $j==d ate( 'd') ? ' selected="selected"' : ''); $options2[]="<option value=\" {$theday}\ " {$sel}>{$theday}</option>"; } $options_list2=j oin( "\r\n", $options2); echo "<select name=\"day\ " id='day' >{$options_list2}</select>"; for ( $k=1960; $k<2016; $k++ ) { $theyear=d ate( 'Y', mktime(0,0,0,1,1,$k)); $sel1=( $k==d ate( "Y") ? ' selected="selected"' : ''); $options3[]="<option value=\" {$theyear}\ " {$sel1}>{$theyear}</option>"; } $options_list3=j oin( "\r\n", $options3); echo "<select name=\"year\ " id='year' >{$options_list3}</select>"; ?>
</td>
</tr>
</table>
<input type="submit" name="sub" value="add" />
</form>
</div>
</div>
<script>
function show() {
document.getElementById("myTableData").style.display = "block";
}
function createObject() {
var request_type;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
//value solve an Internet Explorer cache issue
var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('content02').innerHTML = "Just a second..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var kid_name = encodeURI(document.getElementById('kid_name').value);
var gender = encodeURI(document.getElementById('gender').value);
var month = encodeURI(document.getElementById('month').value);
var day = encodeURI(document.getElementById('day').value);
var year = encodeURI(document.getElementById('year').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', '4.php?kid_name=' + kid_name + '&gender=' + gender + '&month=' + month + '& day=' + day + '&year=' + year + '&nocache = ' + nocache);
http.onreadystatechange = insertReply;
http.send(null);
}
function insertReply() {
if (http.readyState == 4) {
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
document.getElementById('content02').innerHTML = 'Your contact was successfully added!' + response;
}
}
</script>
4.php
<?php
if(isset($_GET['kid_name']) && isset($_GET['gender']) && isset($_GET['year']) && isset($_GET['day']) && isset($_GET['month']) )
{
echo $newFname = $_GET["kid_name"] ;
echo $newLname = $_GET["gender"] ;
echo $newPhone = $_GET["year"] ;
echo $newEmail = $_GET["day"] ;
echo $newAddress = $_GET["month"] ;
//$insertContact_sql = "INSERT INTO `test`.`contacts` (`newFname`, `newLname`, `newPhone`, `newEmail`, `newAddress`, `group`) VALUES ('{$newFname}' , '{$newLname}' , '{$newPhone}' , '{$newEmail}' , '{$newAddress}' , '{$group}')";
//$insertContact= mysql_query($insertContact_sql) or die(mysql_error());
} else
{
echo 'Error! Please fill all fileds!';
}
?>
I am working with php language. There is a addkid button, which, when the user clicks on the button a pop type window shows the form which has NAME , GENDER AND DOB. In the form action javascript:insert(). I am using ajax for the 1st time so I am not able to understand why it's not working. I guess it should redirect me to 4.php and in 4.php it will echo the values?

Answer 1

I have tested your code and seems it works, I just added a div to show the results there...
You can try to add this div you are not already added it...
<div id="content02">
</div>
Here you write the response, like "Your contact was successfully added"....