使用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();
}

Answer 2

只需将每个链接设为：

<a href="form.php?action=forum_action&id={ID}" class="cssButton">My Selection</a>

用数字替换{ID}。

然后在PHP文件中，使用：

<?php
switch($_GET['id']) {
    case 1:
        $var['number'] = 9;
        $var['id'] = 1;
        $var['option'] = 6;
        break;
    ...
}
?>

对于每个案例都是如此。 这是一个更好的系统，因为它可以保持HTML整洁并消除对JavaScript的需求。

Answer 3

不确定我是否完全明白你想要做什么。 我认为，不是每次点击其中一个按钮而制作表单并提交它，您只需使用：

<script type="text/javascript">
    function form_variables(opt1,opt2,opt3){
        window.location('form.php?action=form_action&number='+opt1+'&id='+opt2+'&option='+opt3);
    }
</script>

Answer 4

如果我理解正确，你有7个表单，有7个按钮，并且想要使用脚本，这样当提交其中一个表单时，你会将值复制到另一个表单然后提交。 我不明白这将如何“减少代码”。

在我看来，它增加了代码量 - 表单根本不需要任何脚本。 您可以使用一个带有7个提交按钮的表单，然后根据单击的按钮对服务器进行排序。

编辑

如果您使用具有多个提交按钮的单个表单，例如：

<form action="form.php?action=form_action">
  <input name="foo" value="bar">
  <input type="submit" value="Submit 1" name="Submit 1">
  <input type="submit" value="Submit 2" name="Submit 2">
</form>

然后当点击第一个提交时，服务器将获得：

...?foo=bar&Submit+1=Submit+1

当点击第二个按钮时，它将获得：

...?foo=bar&Submit+2=Submit+2

所以：一个表单，多个提交按钮，没有脚本，服务器知道哪一个被点击。

当然，您可能希望使用脚本来增强UI，但底层功能不需要它。