Могу ли я добавить параметр в форму через Javascript?

Question

У меня есть HTML-форма, которая добавляет параметры в URL-адрес. Я хочу, чтобы добавленный дополнительный параметр был добавлен, если определенная опция выбрана в той же форме. Итак, допустим, я хочу добавить параметр «addedParameter = 1» в URL-адрес, если выбран «Коммерческий», иначе я не хочу, чтобы параметр отображался вообще (иначе я не получаю никаких результатов для «House» и «Land ") Пожалуйста, дайте мне знать, что я могу сделать.

<select id="pt" value="pt" name="pt" onChange="addParameter()"> 
<option value="" name="">Select</option> 
<option value="1" name="1">House</option> 
<option value="2" name="2">Commercial</option> 
<option value="3" name="3">Land</option> 
</select> 

<input type="hidden" id="add" name="" value="1"> 

function addParameter(){ 
if(pt.selectedIndex == 1) 
document.getElementById("add").name = "addedParameter"; 
} 

Answer 1

<input type="hidden" id="add" name="addedParameter" value="1"> 

function addParameter(){ 
if(pt.selectedIndex != 1) 
    input = document.getElementById("add") 
    parent = input.parentNode 
    parent.removeChild(input) 
} 

Это удалит вход, когда additionalParameter не установлен, в противном случае он не будет изменен.

Edit: альтернативное решение:

function addParameter(){ 
    if(pt.selectedIndex == 1) { 
     document.getElementById("add").name = "addedParameter"; 
    } else { 
     document.getElementById("add").name = ""; 
    } 
} 

Смотрите также документацию для removeChild

Answer 2

Вы можете добавить дополнительный параметр путем добавления дополнительного fidden поля Ф.О. форме, когда выбран нужен вариант, и удалить в противном случае:

function addParameter(){ 
    var addedParameterField = document.getElementById("addedParameter"); 
    if (pt.selectedIndex != 1) { 
    if (addedParameterField) { 
     addedParameterField.parentNode.removeChild(addedParameterField); 
    } 
    } else { 
    if (!addedParameterField) { 
     var addedParameterField = document.createElement("input"); 
     addedParameterField.type = "hidden"; 
     addedParameterField.name = "addedParameter"; 
     addedParameterField.value = "1"; 
     container = document.getElementById('myform'); 
     container.appendChild(addedParameterField); 
    } 
    } 
} 

Answer 3

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

<script> 
    window.onload = function() { 

     var form = document.getElementById("theform"), 
      select = document.getElementById("pt"); 

     form.addEventListener("submit", function(event) { 
      event.preventDefault(); 
      if(select.value == 2) { 
       var element = document.createElement("INPUT"); 
       element.setAttribute("type", "hidden"); 
       element.setAttribute("name", "addedParameter"); 
       element.setAttribute("value", "1"); 
       form.appendChild(element); 
      } 
      form.submit(); 
     }); 

    } 
</script> 
<form method="get" id="theform"> 
    <select id="pt" value="pt" name="pt" onChange="addParameter()"> 
     <option value="" name="">Select</option> 
     <option value="1" name="1">House</option> 
     <option value="2" name="2">Commercial</option> 
     <option value="3" name="3">Land</option> 
    </select> 
    <input type="submit" /> 
</form> 

Answer 4

Я хотел бы предложить, что, вместо добавления/удаления элемента на основе условия следует, вместо этого, чтобы воспользоваться атрибутом disabled (только не- disabled элементы считаются «успешным» и, следовательно, только не- disabled элементы будут иметь свои имена/значения, представленные):

function addParameter() { 
    var sel = document.getElementById('pt'), 
     input = document.getElementById('add'); 
    input.disabled = sel.selectedIndex != 2; 
} 

document.getElementById('pt').onchange = addParameter; 

JS Fiddle demo.

Обратите внимание, что в демонстрации я удалил значение атрибута type="hidden", чтобы визуально продемонстрировать эффект, но это не требуется для того, чтобы этот подход работал. Кроме того, условный input имеет атрибут disabled="disabled" по умолчанию (поэтому, если форма отправлена ​​до этого select, на нее воздействует пользователь, она будет еще не будет случайно отправлена).

Answer 5

Вы можете сделать это более ясным, используя jQuery. Когда html-определений недостаточно, я предпочитаю создавать и удалять (входные) узлы динамическим javascript. Два способа обсуждения (изменение по событию выбора или добавление обработчика событий отправки) также работают с этим:

function addParameter() { 
    if ($('#pt').val() == "2") $('<input/>', { id: 'id_optionalParam', name: 'optionalParam', value: '1234', type: 'hidden' }).appendTo('#TheForm'); 
    else      $('#id_optionalParam').remove(); 
}