JQuery: form cleaning inputs

Question

I tried different ways to clear the form:

<form action="service.php" id="addRunner" name="addRunner" method="post"> First Name: <input type="text" name="txtFirstName" id="txtFirstName" /><br /> Last Name: <input type="text" name="txtLastName" id="txtLastName" /><br /> Gender: <select id="ddlGender" name="ddlGender"><option value="">--Please Select--</option> <option value="f">Female</option> <option value="m">Male</option> </select><br /> Finish Time: <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2">(Minutes) <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2">(Seconds) <br /> <button type="submit" name="btnSave" id="btnSave">Add Runner</button> <input type="hidden" name="action" value="addRunner" id="action"> </form> 

jQuery # 1:

 function clearInputs(){ $("#txtFirstName").val(''); $("#txtLastName").val(''); $("#ddlGender").val(''); $("#txtMinutes").val(''); $("#txtSeconds").val(''); } 

This works great.

jQuery # 2:

 function clearInputs(data){ $("#addRunner :input").each(function(){ $(this).val(''); }); 

This clears the form, but does not allow me to send it any information. I try to press a button again and does nothing.

Here's the button handler:

 $("#btnSave").click(function(){ var data = $("#addRunner :input").serializeArray(); $.post($("#addRunner").attr('action'), data, function(json){ if (json.status == "fail"){ alert(json.message); } if (json.status == "success"){ alert(json.message); clearInputs(); } }, "json"); }); 

PHP Postcode:

 <?php if($_POST){ if ($_POST['action'] == 'addRunner') { $fname = htmlspecialchars($_POST['txtFirstName']); $lname = htmlspecialchars($_POST['txtLastName']); $gender = htmlspecialchars($_POST['ddlGender']); $minutes = htmlspecialchars($_POST['txtMinutes']); $seconds = htmlspecialchars($_POST['txtSeconds']); if(preg_match('/[^\w\s]/i', $fname) || preg_match('/[^\w\s]/i', $lname)) { fail('Invalid name provided.'); } if( empty($fname) || empty($lname) ) { fail('Please enter a first and last name.'); } if( empty($gender) ) { fail('Please select a gender.'); } if( empty($minutes) || empty($seconds) ) { fail('Please enter minutes and seconds.'); } $time = $minutes.":".$seconds; $query = "INSERT INTO runners SET first_name='$fname', last_name='$lname', gender='$gender', finish_time='$time'"; $result = db_connection($query); if ($result) { $msg = "Runner: ".$fname." ".$lname." added successfully" ; success($msg); } else { fail('Insert failed.'); } exit; } 

}

If I use jQuery # 2 method, I get this error in the console:

 Uncaught TypeError: Cannot read property 'status' of null 

Why is this happening?

I forgot to include this key information:

 function fail ($message){ die(json_encode(array('status'=>'fail', 'message'=>$message))); } function success ($message){ die(json_encode(array('status'=>'success', 'message'=>$message))); 

Sends a message back to the AJAX function in jQuery. It seems that after I submit the form once using method # 2, the success / failure messages complete.

Answer 1

Demo: http://jsfiddle.net/xavi3r/D3prt/

 $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); 

Original answer: Resetting a multi-stage form using jQuery

---

Mike's suggestion (from the comments) to keep the checkbox selected and choose intact!

Warning: If you create elements (therefore they are not in dom), replace :hidden with [type=hidden] or all fields will be ignored!

 $(':input','#myform') .removeAttr('checked') .removeAttr('selected') .not(':button, :submit, :reset, :hidden, :radio, :checkbox') .val(''); 

Answer 2

I would recomment using the good old javascript:

 document.getElementById("addRunner").reset(); 

Answer 3

I took some search and reading to find a method that corresponded to my situation, in the form of submit, run ajax on a remote php script, with successful / unsuccessful informing the user, with a complete cleaning of the form.

I had some default values, all other methods related to .val ('') did not reset, but cleared the form.

I got this working by adding a button with the identifier myform reset form:

 $("#myform > input[type=reset]").trigger('click'); 

It was the correct result for me to reset the form, oh and do not forget

 event.preventDefault(); 

to stop submitting the form in the browser, as I did :).

Hello

Jaco

Answer 4

You can try

 $("#addRunner input").each(function(){ ... }); 

Inputs are not selectors, so you do not need : Did not check it with your code. Just guess!

Answer 5

I realized what it was! When I cleared the fields using each () method, it also cleared the hidden field that php needs to run:

 if ($_POST['action'] == 'addRunner') 

I used: not () to select so that it does not clear the hidden field.