我可以通過Javascript向表單添加參數嗎？

我有一個將參數添加到URL的HTML表單。我只想要添加額外的參數，如果在同一個表單中選擇了某個選項。所以我們假設如果選擇「Commercial」，我想在URL中添加參數「addedParameter = 1」，否則我不想讓參數出現（其他方面我沒有得到「House」和「Land」的結果「）請讓我知道我能做些什麼。我可以通過Javascript向表單添加參數嗎？

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

來源

2013-08-23 Mike

<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，否則它不會改變。

編輯：替代解決方案：

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

還請參閱文檔爲removeChild

來源

2013-08-23 07:21:41 tobspr

感謝你。感謝下面的人，即使我沒有嘗試你的方法:) – Mike

所以你將不得不重新添加它，當選擇被改變？ @Mike，我建議你試試David的建議 – mplungjan

我已經更新了答案，現在不適合你嗎？ :) – tobspr

可以通過添加額外的fidden字段FO時所需選項被選中的形式添加額外的參數，和除去否則：

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

來源

2013-08-23 07:30:21 ataman

比接受的答案更好，但仍然是不必要的dom操作 – mplungjan

我認爲在這種情況下最好的方法是附加一個事件處理程序向提交事件的表單。做你需要的，然後提交表格。在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>

來源

2013-08-23 07:33:16 Krasimir

如果用戶有一個更多的提交處理程序，使用ajax？如果表單不止一次提交，無論選擇什麼選項，添加的元素都會永久保留。 – ataman

如果是這種情況，那麼我會建議使用jQuery，因爲在那裏你可以添加儘可能多的處理程序。我不知道真正的用例究竟是什麼，但無論選擇什麼選項，都應該提交表單。這是我在我的例子中所做的。這取決於當前的情況。但是在表單中的某個元素事件上傳遞並不是一個好主意。您可以刪除該元素或添加另一個選擇。那麼邏輯將非常複雜。 – Krasimir

我建議，而不是因此只能加入/基於一個條件，你應該，而是利用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受到用戶影響之前提交，它將會仍然不會被意外提交）。

來源

2013-08-23 07:51:56

您可以通過使用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(); 
}

來源

2015-03-24 11:24:34

我可以通過Javascript向表單添加參數嗎？

回答

相關問題