javascript - 使用 onclick 将变量传递给表单

Question

我是 javascript 的新手，正在尝试从简单的开始。是否可以创建一个包含可由 onclick 事件填充的表单对象的函数？

现在我有一个包含 7 个按钮的页面，每个按钮都是一个单独表单的提交，它们都链接到我网站背面的同一个 php 文件，在那里它们被处理。我想以某种方式创建一个单一的表单，可能在一个 javascript 函数中，它会在单击时接受来自按钮的变量，然后将表单提交给我的 php 脚本。从技术上讲，它的功能与现在相同，有 7 种不同的形式，每个按钮一个，但有望减少代码量。

这个例子只是我从逻辑上认为它可能会在几周内在互联网上搜索并从各处收集信息后工作的方式，但实际上它远不能发挥作用。

例子:

<script type="text/javascript">

function form_variables(opt1,opt2,opt3){

   <form name='mySelectionForm' action='form.php?action=form_action' method='post' enctype='multipart/form-data'>
    <input type='hidden' name='number' value='" + opt1 + "' />
    <input type='hidden' name='id' value='" + opt2 + "' />
    <input type='hidden' name='option' value='" + opt3 + "' id='options' />

    </form>;

  formObject.submit();
}

然后这将由这样的 onclick 事件填充。

<a href="javascript: void(0);" onclick="form_variables('9','1','6');" title="submit_button1" value="Button 1" class="cssButton">My Selection</a>

Answer 1

您的方向是正确的。您的 JavaScript 可以填充隐藏输入的值并更改表单的操作，而不是每次都动态生成表单。所以在你的 HTML 中给出这个:

<form name="mySelectionForm" id="mySelectionForm" action="form.php?action=form_action" method="post" enctype="multipart/form-data">
  <input type="hidden" name="number" value="" id="number" />
  <input type="hidden" name="id" value="" id="id" />
  <input type="hidden" name="option" value="" id="options" />
</form>

您的 JavaScript 可能如下所示:

function postForm(number, id, option, action) {
    var form = document.getElementById('mySelectionForm');
    form.setAttribute('action', 'form.php?action=' + action);
    document.getElementById('number').value = number;
    document.getElementById('id').value = id;
    document.getElementById('option').value = option;
    form.submit();
}