2015-06-01 3 views
1

У меня есть форма с текстовыми полями, выпадающим меню, переключателями и флажками. Я смог очистить весь ввод, введенный пользователем, но теперь мне нужно изменить форму, чтобы при щелчке пользователем «Очистить записи» все указанные выше поля будут очищены, а выпадающее меню вернется в состояние по умолчанию «ПА».Как очистить форму и сбросить выпадающее меню до первого варианта?

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; 
} 

Это то, что форма HTML выглядит следующим образом:

<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> 

меня PA выбран в качестве предложения от кого-то, однако, он не выбирает PA, когда кнопка четкие записи нажата.

+1

Вы изучили [метод сброса формы] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset) или [кнопка сброса формы] (https: // разработчик. mozilla.org/en-US/docs/Web/HTML/Element/input), то есть: '' –

+0

Тема может показаться не такой, но здесь есть дубликат: [* Как сбросить форму с использованием jQuery с методом .reset() *] (http://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method/16453390#16453390). Все, что требуется, это кнопка сброса, никакой скрипт вообще не нужен. – RobG

+0

Чтобы выбрать PA в выпадающем меню, вы можете сделать свой Element.selectedIndex = "0"; –

ответ

0

Обновить ваш HTML поэтому параметр PA имеет значение

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

Добавьте следующий JS:

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

Лучший способ получить выбор будет установить идентификатор по нему

HTML

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

JS

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

Это позволит предотвратить любые проблемы, вы бы, если вы добавили еще один выбор, (если вы не добавили еще выбрать с таким же идентификатором, который был бы недействительным HTML любом случае)

JSFiddle Demo

http://jsfiddle.net/8q6m2aa6/

+0

Это сработало, чтобы сбросить его на PA. Спасибо! –

Смежные вопросы