I know that there are more practical ways of going about what I'm trying to accomplish here, but I need to stick to this model if it's possible.
I'm trying to send values from multiple HTML text input fields to a Javascript function. It works as expected on the first submission. Each time after when Ajax reloads the form into the container div, it sends the values of the original submission, not the updated values. How would I fix this?
This is where the call is made: (Resulting output from drawNewEvent.php displays within the Div tags)
<? $cal = $_POST['cal']; ?>
<button type="button" onClick="newEvent(<? echo $cal['KEY']; ?>)">Add Event</button>
<div id="container">
<!--Form goes here-->
</div>
This is the Ajax function I'm using:
function newEvent(calID){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("container").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","cal/draw/drawNewEvent.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("calID="+calID);
}
drawNewEvent.php:
<? $calID = $_POST['calID']; ?>
<h1> Add Event to <? echo $calID;?></h1>
<table border="1"><tr><td>
<br>
<table>
<tr>
<td>Event name:</td><td><input name="name" type="text" id="aname" size="32" maxlength="40" /></td>
</tr><tr>
<td>Date:</td><td><input name="date" type="text" id="date" maxlength="10" value="<?php echo date('Y-m-d'); ?>"/> (YYYY-MM-DD)</td>
</tr><tr>
<?php $hour = date('H'); $hour -= 4;?>
<td>Starting Time:</td><td><input name="sTime" type="text" id="sTime" maxlength="8" value="<?php echo $hour.date(':i'); ?>"/> (HH:MM)</td>
</tr><tr>
<td>Ending Time:</td><td><input name="eTime" type="text" id="eTime" maxlength="8" value="<?php echo ($hour+1).date(':i'); ?>"/> (HH:MM)</td>
</tr>
<tr>
<td>Location:</td><td><input name="location" type="text" id="alocation" size="32" /></td>
</tr>
<tr>
<td>Notes:</td><td><textarea name="notes" id="notes" rows="10" cols="30"/></textarea></td>
</tr>
</table>
<button type="button" name="add"
onClick="addEvent(aname.value, date.value, sTime.value, eTime.value, alocation.value, notes.value, <?php echo $calID ?>)">Add Event </button>
</td></tr></table>
The function called just displays the given input:
function addEvent(name, date, sTime, eTime, location, notes, calID){
alert("name: "+name + "
Date: " + date + "
Time: " + sTime + "-" + eTime + "
Location: " + location + "
Notes: " + notes + "
CalID = " + calID);
}