Используйте javascript для установки значения тега ввода

Question

Я пытаюсь запустить скрипт внутри формы, которая вычисляет скидку в зависимости от количества, которое выбирает пользователь. Форма представляется платежный шлюз, и должен включать этот тег:

<input type="hidden" name="discount" value="0.00"/> 

Если изменения скидка значение в зависимости от выбора пользователя.

Так выглядит моя форма, но тег не отправляется должным образом. Я не знаю, что я делаю неправильно.

<select name="quantity"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
</select> 
<input type="hidden" name="amount" value="10.00"/> 

<script type="text/javascript"> 
<input type="hidden" name="discount" 
if (quantity==3) 
    { 
    value="5.00"; 
    } 
else if (quantity==2) 
    { 
    value="2.00"; 
    } 
else 
    { 
    value="0.00"; 
    } 
/> 
</script> 

Я так ничего, но я старался изо всех сил! Пожалуйста, помогите ...

Answer 1

Вы, кажется, есть две основные проблемы:

1. Вы объединить HTML и JavaScript в единый блок
2. Вы не в состоянии гарантировать, что Ваш JavaScript выполняется, когда пользователь изменяет количество

Ваш первый шаг должен состоять в том, чтобы отделить <input type="hidden" name="discount" /> от блока JavaScript. Это HTML, а не JavaScript, поэтому движок JavaScript не знает, что с ним делать.

<input type="hidden" name="discount" /> 
<script type="text/javascript"> 
if (quantity==3) 
{ 
    value="5.00"; 
} 
else if (quantity==2) 
{ 
    value="2.00"; 
} 
else 
{ 
    value="0.00"; 
} 
</script> 

Далее необходимо убедиться, что JavaScript выполняется, когда пользователь меняет количество. Чтобы сделать это, поместите свой код в имени функции и провода, что до onchange случае, если quantity элемент:

<script type="text/javascript"> 
function updateDiscount() 
{ 
    var select = document.getElementById("quantity"); 
    var quantity = select.options[select.selectedIndex].value; 
    if (quantity==3) 
    { 
     value="5.00"; 
    } 
    else if (quantity==2) 
    { 
     value="2.00"; 
    } 
    else 
    { 
     value="0.00"; 
    } 
} 
document.getElementById("quantity").onchange = updateDiscount; 
</script> 

Заметим, что мы теперь искать значение количества в JavaScript. Это опять же потому, что вы не можете просто смешать JavaScript и HTML так, как вы это делали. Для поиска работы вам нужно будет добавить атрибуты id к вашим элементам с тем же значением, что и текущие атрибуты name (которые необходимы при отправке формы).

С этими изменениями вы почти находитесь. Теперь вы устанавливаете скидку на переменную value, в то время как вы хотите, чтобы она зашла в поле формы discount. Чтобы получить это, вам нужно будет искать этот элемент и установить его значение, например:

document.getElementById("discount").value = value; 

Полный HTML

<select name="quantity" id="quantity"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
</select> 

<input type="hidden" name="amount" value="10.00"/> 
<input type="hidden" name="discount" id="discount" /> 

Полный JavaScript

function updateDiscount() 
{ 
    var select = document.getElementById("quantity"); 
    var quantity = select.options[select.selectedIndex].value; 
    if (quantity==3) 
    { 
     value="5.00"; 
    } 
    else if (quantity==2) 
    { 
     value="2.00"; 
    } 
    else 
    { 
     value="0.00"; 
    } 
    document.getElementById("discount").value = value; 
} 
document.getElementById("quantity").onchange = updateDiscount;