使用 JavaScript 设置表单操作

Question

我有一个基本表格。我在表单之外隐藏了输入。我想使用 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>

Answer 1

一个更简单的解决方案可能是将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)
       }
   });
}); 

Answer 2

尝试以下方法：

document.querySelector('form').setAttribute('action', url);

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;
  }
  document.querySelector('form').setAttribute('action', url);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://example.com" method="GET">
  <input type="text" />
  <button type="button" onclick="setFormAction()">Test</button>
</form>

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

在用户输入的情况下使用encodeURIComponent()对其进行清理。

Answer 3

如果您实际上不是在一般意义上提交表单，我认为您应该避免使用表单提交，而是使用带有事件的简单按钮到函数。然后，您可以声明对提交执行不同操作的状态，例如：

<button id="submit-button">Submit</button>

let state = 'default'

function onFormSubmit()
{
   if (state == 'default') doDefaultThings()
   else doLessDefaultThings()
}

async function doDefaultThings()
{
   //collect necessary data
   let url = "https://example.com" //append here

   let res = await fetch(url)
   //do other things or redirect
}

document.getElementById('submit-button'
   .addEventListener('click', onFormSubmit)