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

我建议，不要根据条件添加/删除元素，而应使用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 2

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

Answer 3

<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

的文档

Answer 4

您可以通过在选择需要选项时为表单添加额外的隐藏字段来添加额外参数，否则将其删除：

 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 5

我认为在这种情况下最好的方法是将事件处理程序附加到表单的 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>

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

5 个答案: