How do I clear a form and reset a drop down menu to the first option?

Question

I have a form that has text fields, a drop down menu, radio buttons, and check boxes. I was able to clear all of the input entered by a user but now I need to modify the form so that when the user clicks "Clear Entries" all of the above fields will be cleared and the drop down menu will return to the default state of "PA".

function doClear()
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";

document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;

document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return; 
}

This is what the html form looks like:

 <form>
  <font size="3">State:</font>
  <select name="State">
    <option selected>PA</option>
    <option value="NJ">NJ</option>
    <option value="NY">NY</option>
    <option value="DE">DE</option>
  </select>
</form>

I have PA selected as a suggestion from someone however, it does not select PA when the clear entries button is clicked.

have you looked into [form reset method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) or [form reset button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) ie:`` — Patrick Evans, Jun 01 '15 at 03:08
Subject may not seem like it, but there's a duplicate here: [*How to reset a form using jQuery with .reset() method*](http://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method/16453390#16453390). All that is required is a reset button, no script needed at all. — RobG, Jun 01 '15 at 03:15
To select PA in dropdown you can do yourElement.selectedIndex = "0"; — Arghya C, Jun 01 '15 at 03:18

Seth McClaine · Accepted Answer · 2015-06-01T13:18:41.563

Update your HTML so the PA option has a value

<option selected value="PA">PA</option>

Add the following JS:

var elements = document.getElementsByTagName('select');
elements[0].value = 'PA';

A better way to get the select would be to set an ID on it

HTML

 <select name="State" id="mySelect">

JS

document.getElementByID('mySelect');
element.value = 'PA';

This would prevent any issues you would have if you added another select, (unless you added another select with the same ID which would be invalid HTML anyways)

JSFiddle Demo

http://jsfiddle.net/8q6m2aa6/

How do I clear a form and reset a drop down menu to the first option?

1 Answers1