1

我有一个向 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";
}
4

5 回答 5

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 小提琴演示。

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

于 2013-08-23T07:51:56.030 回答
1

你可以通过使用 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-24T11:24:34.267 回答
0

您可以在选择需要选项时通过在表单中​​添加额外的 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);
     }
   }
 }
于 2013-08-23T07:30:21.590 回答
0 
<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)
}

这将在附加参数未设置时删除输入，否则不会更改。

编辑：替代解决方案：

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

另请参阅removeChild的文档

于 2013-08-23T07:21:41.037 回答
0

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