时间戳

首页 > 解决方案 > 使用 JavaScript 设置表单操作

javascript - 使用 JavaScript 设置表单操作

问题描述

我有一个基本形式。我在表单之外隐藏了输入。我想使用 JavaScript 设置表单操作，以在用户按下输入/提交按钮时将隐藏参数中的值作为变量包含在表单的 GET 中。

表单的当前操作是"https://example.com"。我想使用 JavaScript 从隐藏的输入中获取值并将它们连接到表单的操作，以便存储在表单之外的信息与表单一起提交。

例如，表单操作的所需输出将是"https://example.com?firstParameter=parameter&secondParameter=secondParameter".

这是我到目前为止所拥有的。

<form action="https://example.com" method="GET">

    <input type="text"></input>
    <button type="submit"></button>

</form>

<input type="hidden" id="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" value="anotherParameter">

<script>
function setFormAction() {
    var firstParameter= $("#firstParameter").val();
    var secondParameter= $("#secondParameter").val();
    var url = "https://example.com?";
    if(firstParameter!== ""){
        url = url + "&firstParameter=" + firstParameter; 
    }
    if(secondParameter!== ""){
        url = url + "&secondParameter=" + secondParameter; 
    }
    // form action = url; (Need help here)
}

</script>

标签： javascripthtmljqueryformsget

解决方案

一个更简单的解决方案可能是将names 添加到隐藏的输入中，然后将它们附加到表单中，以便它们通过默认流程提交。

HTML

<input type="hidden" id="firstParameter" name="firstParameter" value="parameter">
<input type="hidden" id="secondParameter" name="secondParameter" value="anotherParameter">

JS

$('form').submit(function(){
   const $form = $(this);
   $('#firstParameter, #secondParameter').each(function(){
       if(this.value){
          $form.append(this)
       }
   });
});

推荐阅读