我可以通过Javascript向表单添加参数吗？

我有一个向URL添加参数的HTML表单。我只希望在同一表单中选择某个选项时添加额外的参数。如果选择了“商业”，那么假设我想将参数“addedParameter=1”添加到URL，否则我根本不希望参数出现（否则，我对“房屋”和“土地”没有结果），请告诉我我可以做什么

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

挑选
房子
商业的
土地
函数addParameter（）{
如果（pt.selectedIndex==1）
document.getElementById（“add”）.name=“addedParameter”；
}

---

另请参见文档中的

您可以通过在选中所需选项时为表单添加额外的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);
     }
   }
 }

---

我认为在这种情况下，最好的方法是将事件处理程序附加到表单的提交事件。做你需要的，然后提交表格。在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>

window.onload=函数（）{
var form=document.getElementById（“theform”），
select=document.getElementById（“pt”）；
表单。addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
如果（select.value==2）{
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“隐藏”）；
setAttribute（“名称”、“添加参数”）；
元素。setAttribute（“值”、“1”）；
形式.appendChild（元素）；
}
表单提交（）；
});
}
挑选
房子
商业的
土地

我建议，与其根据条件添加/删除元素，不如使用

disabled

属性（只有非

disabled

元素被视为“成功”，因此只有非

disabled

元素才会提交其名称/值）：

---

注意，在演示中，我删除了

type=“hidden”

属性值，以便直观地演示效果，但这种方法不需要这样做。另外，默认情况下，有条件的

输入设置了
disabled=“disabled”
属性（因此，如果表单在此
之前提交，选择受用户影响的
，它仍然不会被意外提交）。
使用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();
}

函数addParameter（）{
如果（$（'#pt'）.val（）==“2”）$（''，{id:'id\u optionalParam'，name:'optionalParam'，value:'1234'，键入：'hidden'}）；
else$（'#id_optionalParam'）。remove（）；
}
若用户还有一个使用ajax的提交处理程序呢？如果表单将被提交多次，那么无论选择了什么选项，添加的元素将永远保留在表单上。如果是这样，我建议使用jQuery，因为在那里可以添加任意数量的处理程序。我不知道真正的用例是什么，但是无论选择什么选项，表单都应该提交。这就是我在我的例子中所做的。这取决于当前的环境。但是，在形式内部传递某个元素的事件不是一个好主意。您可以删除该元素或添加另一个select。那么逻辑就复杂多了。谢谢。即使我没有尝试过你的方法，也要感谢下面的人：）所以当选择更改时，你必须将其添加回@迈克，我建议你试试大卫的建议，比公认的答案更好，但还是不必要
<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>

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

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

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