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

Can I add a parameter to a form through Javascript?

本文关键字：添加 参数 表单 可以通过 Javascript      更新时间：2023-09-26

我有一个向URL添加参数的HTML表单。我只想在以相同的形式选择某个选项时添加额外的参数。所以，假设我想在选择"Commercial"的情况下将参数"addedParameter=1"添加到URL中，否则我根本不希望参数出现（换句话说，我没有得到"House"answers"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";
}

我建议，与其根据条件添加/删除元素，不如使用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演示。

注意，在演示中，我删除了type="hidden"属性值，以便直观地演示效果，但这不是这种方法所必需的。此外，条件input具有默认设置的disabled="disabled"属性（因此，如果在select受到用户影响之前提交表单，则不会意外提交）。

使用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();
}

<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 的文档

我认为在这种情况下，最好的方法是在表单的submit事件上附加一个事件处理程序。根据需要执行操作，然后提交表单。在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>

当选择所需选项时，您可以通过为表单添加额外的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);
     }
   }
 }
相关文章：