使用 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>

解决方法

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

HTML

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

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

尝试以下操作：

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() 对其进行清理。

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

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