[jQuery] jquery forms with ajax responses
I've been looking at this for a while and can't get this to work.
What I want to do is submit a form, but have the page not redirect to
the form page, but rather to refresh a div in the current page. This
should be simple, but everything I do ends up taking me to the
submitted form response page.
Here's the code for my form and the jquery
[code]
$("#addShiftForm").submit(function() {
var startHrSelected = $("select[name='startHour']
option[@selected]")
var startMinSelected = $("select[name='startMin']
option[@selected]")
var startHrSelected = $("select[name='endHour'] option[@selected]")
var startMinSelected = $("select[name='endMin'] option[@selected]")
var startDateForm = $("input[name='date']")
var uidForm = $("input[name='uid']")
var sidForm = $("input[name='sid']")
$.ajax({
type: "GET",
url: "addShift.php",
data: "startHour="+startHrSelected.val(),
data: "startMin="+startMinSelected.val(),
data: "endHour="+endHrSelected.val(),
data: "endMin="+endMinSelected.val(),
data: "startDate="+startDateForm.val(),
data: "uid="+uidForm.val(),
data: "sid="+sidForm.val(),
success: function(response){
$("#temp").html(response);
}
});
[/code]
and the from code
[code]
<form action=\"addShift.php\" method=\"get\" id=\"addShiftForm\" >
<fieldset>
<legend>Add Shift to $uid, on $date</legend>
Start Time: <select name=\"startHour\">
<option value=\"1\">1am</option>
<option value=\"2\">2am</option>
<option value=\"3\">3am</option>
<option value=\"4\">4am</option>
<option value=\"5\">5am</option>
<option value=\"6\">6am</option>
<option value=\"7\">7am</option>
<option value=\"8\">8am</option>
<option value=\"9\">9am</option>
<option value=\"10\">10am</option>
<option value=\"11\">11am</option>
<option value=\"12\">Noon</option>
<option value=\"13\">1pm</option>
<option value=\"14\">2pm</option>
<option value=\"15\">3pm</option>
<option value=\"16\">4pm</option>
<option value=\"17\">5pm</option>
<option value=\"18\">6pm</option>
<option value=\"19\">7pm</option>
<option value=\"20\">8pm</option>
<option value=\"21\">9pm</option>
<option value=\"22\">10pm</option>
<option value=\"23\">11pm</option>
<option value=\"24\">Midnight</option>
</select> <select name=\"startMin\">
<option value=\"00\">00</option>
<option value=\"15\">15</option>
<option value=\"30\">30</option>
<option value=\"45\">45</option>
</select>
<br />
End Time: <select name=\"endHour\">
<option value=\"1\">1am</option>
<option value=\"2\">2am</option>
<option value=\"3\">3am</option>
<option value=\"4\">4am</option>
<option value=\"5\">5am</option>
<option value=\"6\">6am</option>
<option value=\"7\">7am</option>
<option value=\"8\">8am</option>
<option value=\"9\">9am</option>
<option value=\"10\">10am</option>
<option value=\"11\">11am</option>
<option value=\"12\">Noon</option>
<option value=\"13\">1pm</option>
<option value=\"14\">2pm</option>
<option value=\"15\">3pm</option>
<option value=\"16\">4pm</option>
<option value=\"17\">5pm</option>
<option value=\"18\">6pm</option>
<option value=\"19\">7pm</option>
<option value=\"20\">8pm</option>
<option value=\"21\">9pm</option>
<option value=\"22\">10pm</option>
<option value=\"23\">11pm</option>
<option value=\"24\">Midnight</option>
</select> <select name=\"endMin\">
<option value=\"00\">00</option>
<option value=\"15\">15</option>
<option value=\"30\">30</option>
<option value=\"45\">45</option>
</select>
<input type=\"hidden\" name=\"sid\" value=\"$sid\"></input>
<input type=\"hidden\" name=\"uid\" value=\"$uid\"></input>
<input type=\"hidden\" name=\"date\" value=\"$date\"></input>
<input type=\"submit\" id=\"submitForm\" value=\"submit\"></input>
</fieldset>
</form>
[/code]