Problems with ajax form

JavaScript
1

Hello, I have this script:


<?php

$url = $_POST['url'];
$time = $_POST['time'];
$agg = $_POST['type'];
$count = $_POST['counter'];



?>
<script language="JavaScript">
var resObjekt;
if(navigator.appName.search("Microsoft") > -1){
  resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
}
else {
  resObjekt = new XMLHttpRequest();
}

function handleResponse(){
  if(resObjekt.readyState == 4) {
    document.getElementById("hs").innerHTML = resObjekt.responseText;
	
  }
  
}


function popup() {
		var str = 'url=' + document.p.url.value + '&ptime=' + document.p.ptime.value + '&ptype=' + document.p.ptype.value + '&counter=' + document.p.counter.value;
	   resObjekt.open('POST', 'test.php'  ,true);
	   resObjekt.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
       resObjekt.onreadystatechange = handleResponse;
       resObjekt.send(str);
	   
	   
}



</script>


<form name="p">
<input onclick="javascript:addField('parent');" value="+" type="button">
<div id="parent">
  
<div id="4">URL: <input name="url[]" value="test" type="text"> Time<select name="ptime[]"> <option value="1">Morning</option><option value="2">Midday</option><option value="3">Evening</option><option value="4" selected="selected">Night</option></select> Agression: <select name="ptype[]"><option value="0">Silent</option><option value="1" selected="selected">Loud</option></select> <input value="-" onclick="removeElement(4);" type="button"> <input name="counter[]" value="4" type="hidden"></div><div id="8">URL: <input name="url[]" value="fdhfdhj" type="text"> Time<select name="ptime[]"> <option value="1" selected="selected">Morning</option><option value="2">Midday</option><option value="3">Evening</option><option value="4">Night</option></select> Agression: <select name="ptype[]"><option value="0" selected="selected">Silent</option><option value="1">Loud</option></select> <input value="-" onclick="removeElement(8);" type="button"> <input name="counter[]" value="8" type="hidden"></div><script>var counter = 9;</script>

<div id="9">URL: <input name="url[]" type="text"> Time<select name="ptime[]"> <option value="1">Morning</option><option value="2">Midday</option><option value="3">Evening</option><option value="4">Night</option></select> Agression: <select name="ptype[]"><option value="0">Silent</option><option value="1">Loud</option></select> <input value="-" onclick="removeElement(9);" type="button"> <input name="counter[]" value="9" type="hidden"><br></div><div id="10">URL: <input name="url[]" type="text"> Time<select name="ptime[]"> <option value="1">Morning</option><option value="2">Midday</option><option value="3">Evening</option><option value="4">Night</option></select> Agression: <select name="ptype[]"><option value="0">Silent</option><option value="1">Loud</option></select> <input value="-" onclick="removeElement(10);" type="button"> <input name="counter[]" value="10" type="hidden"><br></div><div id="11">URL: <input name="url[]" type="text"> Time<select name="ptime[]"> <option value="1">Morning</option><option value="2">Midday</option><option value="3">Evening</option><option value="4">Night</option></select> Agression: <select name="ptype[]"><option value="0">Silent</option><option value="1">Loud</option></select> <input value="-" onclick="removeElement(11);" type="button"> <input name="counter[]" value="11" type="hidden"><br></div></div>

<input onclick="javascript:popup();" type="button">

<div id="hs">

</div>

<div style="visibility: hidden;" id="loader">
load
</div>
</form>

Now I want ajax to submit the form values to the php script (function popup).
But when I click on the button nothing happens.
Where is the mistake? Any solutions?
Thanks for your response.

2

I would recommend you to go or jQuery AJAX by using which you don’t have to get annoyed for such things. It is really easy to use.
http://api.jquery.com/jQuery.post/
See some examples out there.