具有两个提交按钮和两个不同操作的 HTML 表单

HTML form with two submit buttons and two different actions

本文关键字：两个 操作 表单 HTML 提交 按钮      更新时间：2023-09-26

我有这个表格，有 2 个提交按钮：

<form method="post" onsubmit="send_mail(this);return false">
    <select name="liste">
     <option value='0'>Choose list</option>
     <option value="1">list1</options>
         <option value="2">list2</options>      
    </select>
<p>Subject: <input type="text" name="subject" /><br />
<div id="editor">
<textarea value="editor1" name="editor1">Some text here</textarea>
</div>
 <input type="submit" value="Sent Mail!" />
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
</form>

在表单上，如您所见，它具有以下javascript函数：onsubmit="send_mail(this);return false

看起来像这样：

function send_mail(form) {
   jQuery.post('editor.php', jQuery(form).serialize(), function(data) {
   jQuery('#center').html(data);
});
    }

该脚本将表单数据发送到我的编辑器.php脚本，该脚本处理并发送邮件，然后返回"电子邮件发送"。脚本将<div>替换为<form>，并带有此return语句。这正在按照我想要的方式工作。

现在我想创建另一个按钮和输入文本框，让用户在提交之前输入电子邮件并发送上述表单的测试。

我该怎么做？问题是 2 按钮总是提交 javascript send_mail，因为它附加到表单标签onsubmit .

这可能是一个基本问题——我希望有人能为我指出正确的方向。

编辑/更新：

澄清一下：第一个按钮应该将$post发送到我的编辑器.php文件，javascript 替换保存整个表单的div。我的第二个按钮应该$post发送到我的 testmail.php 文件，并且只替换包含此按钮和输入文本字段的div（ID 为"testmail"。

希望这是有道理的..非常感谢你的帮助。

你的 JavaScript 不是最好的。您不应该像现在这样内联使用它（例如，使用 onsubmit 属性）。相反，它应该是不显眼的，因此即使用户浏览器中未启用 JavaScript，您的表单也应该可以工作。其中一个例子：

<form action="editor.php" method="post" id="contact-form">
  <div>
    <label for="to">To:</label>
    <input type="text" name="to" id="to" />
  </div>
  <div>
    <label for="subject">Subject:</label>
    <input type="text" name="subject" id="subject" />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div>
    <input type="submit" name="send" value="Send" />
  </div>
</form>
<div id="response"></div>
<script src="jquery.js"></script>
<script>
    $(document).ready(function() {
        $('#contact-form').submit(function() {
            var action = $(this).attr('action');
            var data = $(this).serialize();
            $.post(action, data, function(response) {
                $('#response').html(response);
            });
            return false;
        });
    });
</script>

上面会看到你的表单仍然提交给编辑器.php如果 JavaScript 不可用，但如果 JavaScript 可用，那么 JavaScript 块将选择表单提交，而是使用 AJAX 发布它而不是重定向到 editor.php。

如果您还想发送测试电子邮件，我会包含一个名为 test 的复选框，如果选中它，请更改表单处理程序中的逻辑（在本例中为 editor.php），而不是使用完全不同的脚本。最简单的，它看起来像这样：

<?php
$to = $_POST['to'];
$subject = $_POST['subject'];
$message = $_POST['message'];
if (isset($_POST['test'])) {
    // do something
    // maybe set $to to something different
}
if (mail($to, $subject, $message)) {
    echo 'Sent';
}
else {
    echo 'Not sent';
}

为什么需要发布 ajax 帖子并提交表单。做任何一个。

有 2 个普通按钮，并通过 S.post 做任何你想做的事情。

<form>
 <div id="testmail">
     <p><input type="button" onsubmit="send_Testmail(this);return false" value="Sent Test" />
     To: <input type="text" name="testemail" /><br />
</div>
<input type="button" id="button1" value="Send Mail!" />
</form>
$('#button1").click(function(form) {
   $.post('editor.php', $(form).serialize(), function(data) {
   $('#center').html(data);
   });
});
相关文章：