仅在选中复选框时提交多个表单答案

【问题标题】：Submit multiple forms only if checkbox is checked仅在选中复选框时提交多个表单
【发布时间】：2013-01-05 15:12:19
【问题描述】：

我尝试根据复选框的状态将多个表单提交到不同的位置。 javascript 应该检查复选框并提交表单，但我无法让它工作。

    <script type="text/javascript" charset="utf-8">
        function checkSubmit() {
            var frm1 = document.getElementById("optin1");
            var frm2 = document.getElementById("optin2");
            var frm3 = document.getElementById("optin3");
            var chkbox1 = document.getElementById("c1");
            var chkbox2 = document.getElementById("c2");
            var chkbox3 = document.getElementById("c3");
                if (chkbox1.checked === true) {
                    frm1.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox2.checked === true) {
                    frm2.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox3.checked === true) {
                    frm3.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
setTimeout(function() {
window.location = 'http://url.com/index.php';
}, 1350);
    }
    </script>

这里是html表单：

    <form id="optin1" name="f1" method="post" action="file1.php" target="iframe1">
    <input type="checkbox" id="c1" name="cc" value="" checked="checked">
    <label for="c1"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>"></form>

    <form id="optin2" name="f2" method="post" action="file2.php" target="iframe2">
    <input type="checkbox" id="c2" name="cc" value="" checked="checked">
    <label for="c2"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>">
    <input name="name" type="hidden" value="Newsletter"></form>

    <form id="optin3" name="f3" method="post" action="http://www.url.com" target="iframe3">
    <input type="checkbox" id="c3" name="cc" value="" checked="checked">
    <label for="c3"><span></span><strong>YES, I"d love to join!</strong></label>
    <input id="txtEmail1" class="field" name="txtEmail1" value="<?=$_GET[email];?>" type="hidden">
    <input type="hidden" value="18" name="webID">
    <input type="hidden" value="20" name="usd">
    <input type="hidden" value="25" name="lsvalue">
    <input type="hidden" value="http://url.com/thanks" name="thanxurl">
    <input type="hidden" value="http://url.com/confirm" name="confirmationurl"></form>
    <form name="Submit">
    <input name="btn1" type="image" onClick="checkSubmit()" src="images.jpg" align="left" /> 
    </form>
<iframe name="iframe1" style="display:none"></iframe>
<iframe name="iframe2" style="display:none"></iframe>
<iframe name="iframe3" style="display:none"></iframe>

提交表单时，仅提交第一个表单。怎么了？

【问题讨论】：

标签： php javascript checkbox form-submit checked

【解决方案1】：

简单地返回false 是不是阻止表单在 JavaScript 中提交的方法。这只是我永远不会告诉人们在没有了解 JS 事件如何工作的情况下使用 jQuery 的原因之一。一个非常好的网站，阅读 JS 事件是很好的'ol quirksmode。

当您编写的 jQuery 处理程序返回 false 时，事件将停止，并且不会冒泡或进一步传播。但是，当您在本机 JS 中返回 false 时，事件仍然会传播，并且在这种情况下，它的默认行为是提交表单。
查看有关 quirksmode 的一些文章以获得完整的解释，但现在，将 return false 替换为：

var e = arguments[0] || window.event;//quirksmode will tell you what this means
//instead of return false:
if (e.preventDefault)
{
    e.preventDefault();//clue is in the method's name
    e.stopPropagation();
}
e.returnValue = false;//this is for IE<9
e.cancleBubble = true;
return false;

如您所见，您需要做几件事来阻止表单提交。当然，人们常说开发人员必须“聪明地懒惰”，所以我经常扩充Event.prototype 并添加一个X-browser 方法来做到这一点。 I've added that code here，这是公认的答案。

更新：
在查看了您的小提琴后，我在 chromium 上测试了 forked it，发现它可以正常工作。
我确实觉得最好将 all 复选框包装到一个表单中，然后提交该表单：未选中的复选框不会发送到服务器.它仍然是最安全的方法：有些人仍然禁用 JS。
更重要的是，您的 HTML 看起来好像是一个时事通讯，即通过邮件发送：请注意您不能在电子邮件中使用 JavaScript。另外，您（不小心）粘贴了一行 php 代码：

<? if ($_GET[email]) { ?>

您正在使用短标签，也许您已经知道这一点，但短标签已被弃用，并且将在不久的将来某个地方被删除，您唯一可以使用的标签是 either <?php 标记和短回显标记：<?=。

无论如何，在你的情况下，我会按照以下方式编写我的 html：

<form method='POST' action='someScript.php'>
    <h3>George Hamilton: IM Newsletter for Professionals (AWEBER)</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c1" name="cc" value="" checked="checked">
        <label for="c1">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
        <input name="email" type="hidden" value="<?=$_GET[email];?>">
    </p>
    <h3>Another checkbox</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c2" name="cc2" value="" checked="checked">
        <label for="c2">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
    </p>
    <!-- @the end of the checkboxes -->
    <input type="submit" value="sumbit image" id="foobar"/>
</form>

在这种情况下，根本不需要 JS 验证脚本。 选中的所有复选框都将发送到服务器。但是，您必须确保它们的名称属性是唯一的……这种方法有两个主要好处：您不必为每个复选框都包含一个隐藏的电子邮件字段（一个就足够了，因为我们只有一个表单) 而且，正如我之前所说，您不必依赖 JS 来提交表单。

【讨论】：

这样的？否则 if (chkbox5.checked === true) { frm5.submit(); } else { var e = 参数[0] || window.event;//quirksmode 会告诉你这是什么意思 // 而不是 return false: if (e.preventDefault) { e.preventDefault();// 线索在方法的名称中 e.stopPropagation(); } e.returnValue = false;//这是针对 IE
@mickzee：我认为最好把a fiddle放在一起，因为评论中的代码难以辨认
感谢您的回答。你可以在这里查看小提琴：jsfiddle.net/MacQV
@mickzee：我看了你的小提琴，将它分叉并在我的答案中添加了一个链接。但是，我会建议一种不同的方法，所以我更新了我的答案。
嘿 Elias，非常感谢您的回答和工作。非常感谢。关于更新，我认为使用您的分叉版本比使用单一表单解决方案更好，因为我需要将表单发送到不同的脚本和 url。我不擅长编程来开发另一个能够捕获表单数据并将其发送到目标的脚本。 :-/ 无论如何，非常感谢您的帮助。我现在将测试脚本并让您更新。 ;)

【解决方案2】：

尝试在 Chrome/Firefox 中执行 url 并从 firebug 调试。

【讨论】：

【解决方案3】：

你的javascript函数应该如下：

    function checkSubmit() {
        var frm1 = document.getElementById("optin1");
        var frm2 = document.getElementById("optin2");
        var frm3 = document.getElementById("optin3");
        var chkbox1 = document.getElementById("c1");
        var chkbox2 = document.getElementById("c2");
        var chkbox3 = document.getElementById("c3");
            if (chkbox1.checked === true) {
               frm1.submit();
                    }

           else if (chkbox2.checked === true) {
              frm2.submit();
                    }

           else if (chkbox3.checked === true) {
              frm3.submit();
                    }
      else {
        return false;
      }   
  setTimeout(function() {
   window.location = 'http://url.com/index.php';
  }, 1350);
 }
}

【讨论】：

这与您的 javascript 代码相同。。我所做的唯一更改是删除您在每个 if 之后编写的 else 条件。在您的情况下，如果未选中第一个复选框，则其执行第一个 else 循环，并且由于 return false 停止执行进一步的脚本。
如您所说已更改，但也不起作用。我正在使用 sendmail 脚本提交表单但不发送电子邮件。
file1.php 可能有问题。尝试在 sendmail 代码 之前和之后在 file1.php 中进行调试

【解决方案4】：

主要问题是您的else 条件。如果第一个复选框没有被选中，那么你 return false，它将立即退出函数并导致其他 if 语句根本不执行。

您需要修改您的代码，以便您只在 none 复选框被选中的情况下 return （或者总是在那些 if 语句之后返回，这可能无关紧要)。

【讨论】：