bob don bob don - 28 days ago 10
Javascript Question

Reset form fields except one using javascript

I have a form in which i am trying to incorporate a reset button. I have a readonly text field where i am pulling in the current day. My goal is to incorporate the reset to clear all of the fields, but leaving the date field as is. I cannot seem to figure out how to really do so. the function that i currently have will clear everything.

This is the function that i have.:

function confirm_ShortageReset()
{

var datesValue = document.getElementById('dates').value;
alert(datesValue);
//return confirm("Are you sure?");
document.getElementById('shortage').reset();
document.getElementById('dates').value = datesValue;
}


i was thinking about maybe copying the date value into another variable, and once the clear took affect, to have the date re-entered in by calling the variable that is holding the date. is this possible to do?

this is also the form that i have.

<form action = "drivers.php" target = "drivers.php" method = "post" name = "shortage" id = "shortage" onsubmit = "return validateShortage()">
<table id = "main">
<tr>
<td><table id = "shortages">
<h1> Shortages </h1>
<thead>
<tr>
<th> Date </th>
<th> Driver </th>
<th> Customer# </th>
<th> Invoice# </th>
<th> Product Description </th>
<th> Size </th>
<th> Cases </th>
<th> Bottles </th>
<th> On Truck </th>
<th> CHK Itls </th>
<th> Notes </th>
</tr>
</thead>

<tr>
<td> <input type = "text" id = "dates" size = "6" name = "dates" readonly = readonly onblur = "checkDate()" > </input></td>
<td>
<select id = "drivers" name = 'drivers' >
<option value = ""> </option>
<option value = "driver1"> driver 1 </option>
</select></td>

<td> <input type = "number" min = "1" max = "99999999" id = "customernum" name = "customernum" > </input> </td>
<td> <input type = "number" min = "1" max = "99999999" id = "invoicenum" name = "invoicenum" > </input> </td>
<td> <input type = "text" id = "proddes" name = "proddes" > </input> </td>
<td> <input type = "text" id = "size" name = "size" > </input> </td>
<td> <input type = "number" min = "0" max = "999999" id = "cs" name = "cs" > </input> </td>
<td> <input type = "number" min = "0" max = "999999" id = "btls" name = "btls" > </input> </td>
<td> <select id="ontruck" name = "ontruck">
<option value = " "> </option>
<option value = "Y"> Y </option>
<option value = "N"> N </option>
</select> </td>
<td> <select id = "chkitls" name = "chkitls" >
<option value = " "> </option>
<option value = "check1"> check1 </option>

</select> </td>
<td> <input type = "text" Id = "notes" name = "notes"> </input> </td>


</tr>


</table>

<tr>
<td><input type = "submit" value = "Submit" name = "mydrivers" > </td>
<td><input type = "reset" value = "Clear All" onclick = "return confirm_ShortageReset();"> </input></td>

</tr>

<tr ><td></td><tr /><tr ><td></td><tr /><tr ><td></td><tr />
<td> <hr /> </td>
</table>
</form>

Answer

please check this code

<script type="text/javascript">
 function confirm_ShortageReset(){
 var datesValue = document.getElementById('dates').value;
  document.getElementById('shortage').reset();
 document.getElementById("dates").setAttribute('value',datesValue);
  }
</script>