-1

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

3 回答 3

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)
       }
   });
});
于 2021-05-04T21:57:14.330 回答
0

尝试以下操作：

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

于 2021-05-04T21:09:58.903 回答
0

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

<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)
于 2021-05-04T21:26:00.533 回答