如何重用 ajax 表单加载函数打开多个选项卡，每个选项卡具有不同的参数

How to reuse an ajax form-loading function to open up several tabs with different parameters each?

本文关键字：选项 参数 何重用 函数 加载 ajax 表单      更新时间：2023-09-26

我在不同的网页上有3个表单，每个表单都有一个提交按钮。 单击单个页面上的"提交"，将打开对未知来源process_form函数（请参阅下面的函数）的 AJAX 调用，该函数将为您加载表单。 本质上，单击"提交"后，该函数将表单值组合到请求中，并通过 AJAX 请求加载子页面。

3 的每种形式在其核心上都是相同的，但略有变化和选择。

我想做的是将 3 个表单合并为一个表单，然后让我单击"提交"打开 3 个新的浏览器选项卡，每个特定表单选项一个。

所以我正在寻找一种方法来重用这个process_form函数（可取的），打开窗口，或者修改它（不希望它被许多其他文件使用）来实现我的目标。

请参阅下面的片段，了解它如何在我这边工作。 我正在寻找的答案是使用一个表单来打开 3 个原始表单，但每个表单都在一个新的选项卡窗口中。

 
//abridged version of the library function I use for AJAX
function process_form(form, url, redir, response, method, delay) {
  var formObj = document.getElementById(form);
  var post_str = "";
  if (method == "POST") {
    for (var i = 0; i < formObj.length; i++) {
      if (formObj.elements[i].tagName == "INPUT") {
        if (formObj.elements[i].type == "text") {
          post_str += escape(formObj.elements[i].name) + "=" + encodeURIComponent(formObj.elements[i].value) + "&";
        }
      }
    }
  }
  //here this will be a load_page() call
  //but replaced here with alert to show functionality
  alert("Load Form with [" + post_str + "]");
}
<form id="a">
  <input name="opt_a" type="text" value='4' />
  <input type="button" onclick="process_form('a', '', '', '', 'POST', '')" value="SelectA" id="selButton" name="selButton" />
</form>
<form id="b">
  <input name="opt_b" type="text" value='5' />
  <input type="button" onclick="process_form('b', '', '', '', 'POST', '')" value="SelectB" id="selButton" name="selButton" />
</form>
<form id="c">
  <input name="opt_c" type="text" value='6' />
  <input type="button" onclick="process_form('c', '', '', '', 'POST', '')" value="SelectC" id="selButton" name="selButton" />
</form>

合并的表单将如下所示（未完成） 

<form id="a_b_c">
  <input name="opt_a" type="text" value='4' />
  <input name="opt_b" type="text" value='5' />
  <input name="opt_c" type="text" value='6' />
  <!-- submit functionality opening up separate tabs is what I seek -->
  
</form>

您的<form>标签没有属性，因此，如果您的实际代码执行相同的操作，它将通过 GET 发送表单值。

使用

JavaScript，您可以获取表单元素的值，使用URL中包含的表单中的值构建适当的URL（例如。 mypage.php?input1=value1&input2=value2 ），然后使用window.open()打开三个新选项卡，每个选项卡中都有相应的 URL。

例：

function process_form() {
  var value1 = document.getElementById('value1').value;
  var value2 = document.getElementById('value2').value;
  var value3 = document.getElementById('value3').value;
  
  window.open('mypage.php?value1=' + value1);
  window.open('mypage.php?value2=' + value2);
  window.open('mypage.php?value3=' + value3);
}
<form>
<input type="text" name="value1" id="value1" />
<input type="button" onclick="process_form()" value="SelectA" id="selButton" name="selButton" />  
</form>
<form>
<input type="text" name="value2" id="value2" />
<input type="button" onclick="process_form()" value="SelectB" id="selButton" name="selButton" />  
</form>
<form>
<input type="text" name="value3" id="value3" />
<input type="button" onclick="process_form()" value="SelectC" id="selButton" name="selButton" />  
</form>

相关文章：