[jQuery] iterate through form elements, wait for post to finish and continue
I have the following inputs
<input type="text" id="start_date" value="2009-01-01" /><br/>
<input type="text" name="a" id="a" value="3 days" class="interval"
rel="a_preview"/><span id="a_preview"></span><br />
<input type="text" name="b" id="b" value="3 days" class="interval"
rel="b_preview"/><span id="b_preview"></span><br />
<input type="text" name="c" id="c" value="3 days" class="interval"
rel="c_preview"/><span id="c_preview"></span><br />
<input type="button" id="assign" name="assign" />
The idea is that I have a php script that calculates the date by
building upon the values that are passed into it.
So in the (a|b|c)_preview span the expected values would be something
like:
2009-01-04
2009-01-05
2009-01-06
I then tried to do something like the following:
$(document).ready(function(){
$("#assign").click(function() {
$(".interval").each( function() {
// save current
var previewId = $(this).attr("rel");
//alert( previewId );
if( $("#" + $("#previousStartDate").val()).val() !
= '' && $("#" + $("#previousStartDate").val()).val() != null) {
var startDate = $("#" + $
("#previousStartDate").val() ).html();
}
else {
var startDate = $("#start_date").val();
}
alert( '0-'+previewId);
$.post("/scripts/admin.course.php?
action=calculateDate", {startDate: startDate, nextDate: $(this).val
()},function(data){
$("#" + previewId).html(data);
alert( 'i-'+previewId );
// save what the previous start date field
id is
$("#previousStartDate").val($(this).attr
("rel") );
});
});
})
})
What happens (which from what I read is expected) is that I get all of
the "O-" alerts and then I get all of the "I-" alerts. So the dates
aren't built upon each other.
What would be a good way to re-do this function so that it waits for
the previous value before continuing on.