HTML form values won't reset to default once page is refreshed

Question

They may seem like a dumb question, but I am stumped. I With an html form, you input data and submit the data. Once submitted, my data goes to a database. That's fine, but when I go to use the form again, the same information I filled in the previous form, is in the input and select fields. I hate this because of convenience. I've figured out a way to reset "input" values when the page is refreshed with......

JAVASCRIPT

script>$(document).ready(function() {
    document.getElementById('firstn').value= "";
    document.getElementById('middlein').value= "";
    document.getElementById('lastn').value= "";
    document.getElementById('suffix').value= "";
    document.getElementById("gradelevel").value = "";
});
</script>

but "gradelevel" the "select/option" above will not refresh like "firstn", "middlein" and so forth.

Here is the HTML

<input name="firstname" type="text" required="required" id="firstn" placeholder="First Name"/>
            <input name="middleinitial" type="text" id="middlein" placeholder="M.I." onkeyup="moveCursor(this,'lastn')" size="2" maxlength="1"/>
            <input name="lastname" type="text" id="lastn" placeholder="Last Name" />
            <input name="suffix" type="text" id="suffix" placeholder="Suffix" size="4"/>
<select id="gradelevel" name="gradelevel">
      <option value=""></option>
      <option value="Freshman">College Freshman</option>
      <option value="Sophomore">College Sophomore</option>
      <option value="Junior">College Junior</option>
      <option value="Senior">College Senior</option>
</select>

I've tried practically everything and I've even looked around on her for solutions but none solved my problem. Ideally, I want the form value to default to "" upon refreshing the page. If this is a "session" issue then I'm swinging far out of my league. JSFiddle

You can set value on a `select` like that. You have to set the option to `selected`, or set [defaultSelected](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement). — ray hatfield, Aug 09 '15 at 18:58
Take a look at: http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery — Taher Rahgooy, Aug 09 '15 at 18:59

score 0 · Answer 1 · answered Aug 09 '15 at 19:02

0

here you are , why you not use Jquery abilities

$(document).ready(function() {
    $('#firstn').val('');
    $('#middlein').val('');
    $('#lastn').val('');
    $('#suffix').val('');
    $("#gradelevel option:selected").removeAttr("selected");
});

answered Aug 09 '15 at 19:02

CyC0der

478
1
3
21

score 0 · Answer 2 · answered Aug 09 '15 at 19:03

function reset() {
  document.querySelector('input').value= "";
  document.getElementById("nograde").selected = "selected";
}

<input name="firstname" type="text" required="required" id="firstn" placeholder="First Name"/>
<input name="middleinitial" type="text" id="middlein" placeholder="M.I." onkeyup="moveCursor(this,'lastn')" size="2" maxlength="1"/>
<input name="lastname" type="text" id="lastn" placeholder="Last Name" />
<input name="suffix" type="text" id="suffix" placeholder="Suffix" size="4"/>
<select id="gradelevel" name="gradelevel">
      <option id="nograde" value=""></option>
      <option value="Freshman">College Freshman</option>
      <option value="Sophomore">College Sophomore</option>
      <option value="Junior">College Junior</option>
      <option value="Senior">College Senior</option>
</select>

<div><button onClick="reset()">Reset</button></div>

HTML form values won't reset to default once page is refreshed

2 Answers2