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

Can I add a parameter to a form through Javascript?

提问by Mike

I have an HTML form that adds parameters to an URL. I only want the extra parameter added if a certain option is selected in the same form. So let's say I want to add the parameter "addedParameter=1" to the URL if "Commercial" is selected, otherwise I don't want the parameter to appear at all (other wise I get no results for "House" and "Land") Please let me know what I can do.

我有一个向 URL 添加参数的 HTML 表单。如果在同一表单中选择了某个选项，我只希望添加额外的参数。因此，假设我想在选择“Commercial”的情况下将参数“ 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";
}

采纳答案by tobspr

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

This will remove the input when the additionalParameter is not set, otherwise it won't get changed.

这将在未设置 additionalParameter 时删除输入，否则不会更改。

Edit:alternative solution:

编辑：替代解决方案：

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

Also see the docs for removeChild

另请参阅removeChild的文档

回答by David says reinstate Monica

I'd suggest that, rather than adding/removing the element based on a condition you should, instead, make use of the disabledattribute (only non-disabledelements are considered 'successful' and, therefore only non-disabledelements will have their names/values submitted):

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

JS小提琴演示。

Note, in the demo I've removed the type="hidden"attribute-value, in order to visibly demonstrate the effect, but that's not required for this approach to work. Also, the conditional inputhas the disabled="disabled"attribute set by default (so if the form is submitted prior to this selectbeing affected by the user it'll stillnot be accidentally submitted).

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

回答by Joel Barba

You could do it clearer by using jQuery. When html definitions are not enough, I prefer to create and delete the (input) nodes all by dynamic javascript. The two ways you are discussing (changing by select event or by adding a submit event handler) also works with that :

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

回答by ataman

You can add extra parameter by adding an extra fidden field fo the form when needed option is selected, and remove it otherwise:

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

回答by Krasimir

I think that the best approach in this situation is to attach an event handler to the submitevent of the form. Do what you need and then submit the form. Adding the input in the html and removing it after that is not so flexible.

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