Link to home
Start Free TrialLog in
Avatar of brendanlefavre
brendanlefavreFlag for United States of America

asked on

reset form - jQuery

I am trying to use the jQuery form plugin to reset a form after it's finished being used. I have all of the correct references in place, but after clicking the buttion, no action is taking.

Cheers,
Brendan

jQuery Form Plug-in
<script type="text/javascript">
     $(document).ready( function() {       
      $('#btnClear').click( function () { 
      $('#form1').resetForm();  
     
      });
     
     });
    </script>

<button type="button" style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" id="btnClear">
		Clear ID</button>

Open in new window

Avatar of Sudaraka Wijesinghe
Sudaraka Wijesinghe
Flag of Sri Lanka image

Have you initialized the form using .ajaxForm()?
It would help to see the complete code or url to diagnose the problem.
as per the form plugin definition it should reset after submission.

resetForm
Boolean flag indicating whether the form should be reset if the submit is successful
Default value: null

at here
http://jquery.malsup.com/form/#options-object

for normal reset you can simply use input reset tag.
Avatar of brendanlefavre

ASKER

I'm trying to reset the form after the attached function is complete. Also I need a button to reset the form back to it's beginning state.
<form id="form1"method="post" action="">

<table style="width: 100%">
	<tr>
		<td style="width: 162px; font-size:32px; width:250px;">
		<select id="ComboBox" name="D1">
										<option value="Command Post">Command 
										Post</option>
										<option value="North">North</option>
										<option value="South">South</option>
								 </select></td>
		<td style="width: 247px;">
		&nbsp;</td>
		<td style="width: 127px">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 162px; font-size:32px; width:250px;"><label id="lblPersonnelID">
		Personnel ID:</label></td>
		<td style="width: 247px;">
		<input style="height:50px; width:300px; font-size:32px; vertical-align:middle;"id="txtPersonnelID" name="Personnel ID" type="text"  /></td>
		<td style="width: 127px"><button type="button" style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" id="btnQuery" onclick="javascript:EmployeeQuery();">
		Query ID</button></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 162px">&nbsp;</td>
		<td style="width: 247px">&nbsp;</td>
		<td style="width: 127px">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 162px">
		<input id="startshift" type="button"  style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" name="StartShift" value="Start Shift" /></td>
		<td style="width: 247px">
		<input id="endshift" type="button"  style="vertical-align:middle;font-size:32px;font-family:verdana width: 240px; height: 90px;" name="EndShift" value="End Shift" /></td>
		<td style="width: 150px"><button type="button" style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" id="btnClear">
		Clear ID</button></td>
		<td style="width: 150px" >&nbsp;</td>
		<td><button type="button" style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" id="btnReset" onclick="resetForm('form');">
		Reset</button></td>
	</tr>
	<div class="ms-hidden">
		<tr><td><input id="txtFullName" name="txtFullName" type="text" class="ms-hidden"></td></tr>
		<tr><td><input id="txtLastName" name="txtLastName" type="text" class="ms-hidden" ></td></tr>
		<tr><td><input id="txtFirstName" name="txtFirstName" type="text" class="ms-hidden"></td></tr>
		<tr><td><input id="txtAgency" name="txtAgency" type="text" class="ms-hidden"></td></tr>
	</div>
	
	</table>


</form>

Open in new window

<script type=text/javascript>         
         function CreateNewItem(personnelID, location, status) { 
          $().SPServices({
         
           operation: "UpdateListItems",
           async: false,
           batchCmd: "New",
           //webURL: "/express/JWResourceTracker";
           listName: "Personnel Status",
           valuepairs: [["PersonnelID", personnelID], ["Location", location], ["Status", status]],
           completefunc: function(xData, Status) {
             alert(xData.responseText);
             alert(xData.responseXML.xml);
             //alert("completed");
           }
          }) 
         ;}
 
          $(document).ready(function() {
          $("#startshift").click(function() {
            
           //var subject = $("#feedback-subject-input input").val();
           //var message = $("#message").val();
           var location = $("#ComboBox").val();
           var status = "Out";
           var personnelID = $("#txtPersonnelID").val();
           //var subject = "subject";
			alert("Your Shift has Started"); 
           CreateNewItem(personnelID, location, status);  
          $('#txtPersonnelID').val('');
          $("#txtPersonnelID").focus(); 
          });
          
           $("#endshift").click(function() {
            
           //var subject = $("#feedback-subject-input input").val();
           //var message = $("#message").val();
           var location = $("#ComboBox").val();
           var personnelID = $("#txtPersonnelID").val();
           //var subject = "subject";
           var status = "In";
           CreateNewItem(personnelID, location, status);  
             alert("Your Shift has Ended"); 
          $('#txtPersonnelID').val('');
          $("#txtPersonnelID").focus();
          });
				 
         });
        </script>

Open in new window

to reset use input tag with type reset

<button type="button" style="vertical-align:middle;font-size:32px;font-family:verdana; width: 240px; height: 90px;" id="btnReset" onclick="resetForm('form');">
            Reset</button>

use this instead of above

<INPUT TYPE="reset" VALUE="Reset">
Avatar of Michel Plungjan
Nah, that is too simple. We have jQuery so we should use it no? ;)
ASKER CERTIFIED SOLUTION
Avatar of brendanlefavre
brendanlefavre
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
the above solution works for my situation