Reset form fields except one using javascript

Question

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>

"i was thinking about maybe copying the date value into another variable..." perhaps you could give it a shot and post your attempt here if you run into issues. — chazsolo
– chazsolo, Commented Nov 10, 2016 at 21:29
Can you try and minimize your example to just what is needed to to demonstrate the problem? In other words, a minimal reproducible example? You can use the Stack Snippets feature (icon with <> in a page) to create a runnable snippet, which would also help. — Heretic Monkey
– Heretic Monkey, Commented Nov 10, 2016 at 22:22

Shafiqul Islam · Accepted Answer · 2016-11-10 22:20:11Z

0

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>

answered Nov 10, 2016 at 22:20

Shafiqul Islam

5,6852 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bob don Over a year ago

this works. what is the difference between using .value and using .setAttribute? i am trying to see how/why that makes a difference.

bob don Over a year ago

i just made one subtle change to your code to make it to work the way that i intended the code to work. i removed your reset line and added confirm("are you sure"). this gives me the confirmation pop up dialog box that i was looking for.

Shafiqul Islam Over a year ago

you can need to know between value and setAttribute then just google it. this is simple link which help you to understand some thing . stackoverflow.com/questions/3953028/…

Collectives™ on Stack Overflow

Reset form fields except one using javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related