I am confused as to why this code does not clear a form on success. I am using the form in a data-role="collapsible" and it should work. Can someone tell me if I need to add anything else to enable开发者_StackOverflow this to reset after success call. Thanks
$(function() {
$("#BRV_brtrv").submit(function() {
var send = $(this).serialize();
$.ajax({
type: "POST",
url: "boxrtrvajax.php",
cache: false,
data: send,
success: function (data) {
if (data == 'No data'){
$('#brtv-result').addClass("result_msg").html('Please fill in all fields');
}
else
{
$('#brtv-result').addClass("result_msg").html("You have successfully retrieved: "+data);
$("#BRV_brtrv").get(0).reset(); <-- this is the problem area -->
}
},
error:function (xhr, ajaxOptions, thrownError){
jAlert('There was an exception thrown somewhere');
alert(xhr.status);
alert(thrownError);
}
});
return false;
});
});
Full form and js here: http://jsfiddle.net/Pg4SV/
+++EDIT+++
Options tried
$(':input','#BRV_brtrv')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
$("input[type=range]").val(5).slider("refresh");
$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
$("input[type='radio']").attr("checked",false).checkboxradio("refresh");
$('#BRV-brtrv-department').selectmenu('refresh');
$(':input,:select', '#BRV_brtrv').removeAttr('checked').removeAttr('selected');
document.getElementById('BRV_brtrv').reset();
$('#BRV_brtrv').get(0).reset();
Form
<form method="post" id="BRV_brtrv" action="">
<div data-role="fieldcontain">
<label for="BRV_brtrvrb">Requested By *</label>
<input type="text" name="BRV_brtrvrb" id="BRV_brtrvrb" value="<?php echo $_SESSION['name']; ?>" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Service Type *</legend>
<input type="radio" name="BRV-id-service-type" id="BRV-brtrv-standard-service" value="standard" />
<label for="BRV-brtrv-standard-service">Standard</label>
<input type="radio" name="BRV-id-service-type" id="BRV-brtrv-rapid-service" value="rapid" />
<label for="BRV-brtrv-rapid-service">Rapid</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="BRV-brtrv-department">Department *</label>
<select name="BRV-brtrv-department" id="BRV-brtrv-department" class="select" data-inline="true" data-native-menu="false">
<option>Choose Department</option>
<?php
while($row = mysql_fetch_array( $BRVdept_result ))
{
$value=$row['name'];
$caption=$row['name'];
echo "<option value=\"", $value, "\">", $caption, "</option>";
}
?>
</select>
</div>
<div data-role="fieldcontain">
<label for="BRV-brtrv-address">Address *</label>
<select name="BRV-brtrv-address" id="BRV-brtrv-address" class="select" data-inline="true" data-native-menu="false">
<option>Choose Address</option>
<?php
while($row = mysql_fetch_array( $BRVaddr_result ))
{
$value=$row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
$caption=$row['address1_com']. " ". $row['address2_com']. " ". $row['address3_com']. " ". $row['town_com']. " ". $row['postcode_com'];
echo "<option value=\"", $value, "\">", $caption, "</option>";
}
?>
</select>
</div>
<div data-role="fieldcontain">
<label for="BRV-brtrv-slider">No of Boxes *</label>
<input type="range" name="BRV-brtrv-slider" id="BRV-brtrv-slider" data-track-theme="a" value="0" min="0" max="10" />
</div>
<div id="BRVbrtrv_boxnumber" data-theme="b"></div>
<div id="brtv-result"></div>
<div id="BRV-brtrv-submitDiv" data-role="fieldcontain">
<input name="BRV-brtrv-submit" id="BRV-brtrv-submit" type="submit" value="Retrieve Box" data-inline="true" />
</div>
</form>
You might have an element in the form with id or name being reset
. You will need to rename the element's id or name to something else.
精彩评论