Question

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 + "\nDate: " + date + "\nTime: " + sTime + "-" + eTime + "\n Location: " + location + "\n Notes: " + notes + "\n CalID = " + calID);
}

Answer 1

Well, your calID is always the same (is it supposed to be?). You are sending an ajax request with the same parameters in the URL and most likely the second time around you are getting a cached response, so the second ajax request is never run through the server. I would suggest to avoid caching by using a random, or changing variable. For instance:

var d = new Date();
var n = d.getTime();
xmlhttp.open("POST","cal/draw/drawNewEvent.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("calID="+calID+"&random="+n);

Now your ajax request is seen by the browser as a different request and is not being returned from cache. Let’s debug from here. How is your script behaving now?