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

Question

我有这个表格，有 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);
});
    }

该脚本将表单数据发送到我的 editor.php 脚本，该脚本处理并发送邮件，然后返回“电子邮件发送”。脚本将<div> 替换为<form>，并使用此return 语句。这是我想要的工作。

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

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

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

编辑/更新：

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

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

Answer 1

你的 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>

如果 JavaScript 不可用，上面会看到您的表单仍然提交到 editor.php，但如果 JavaScript is 可用，那么 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';
}

Answer 2

为什么你需要做一个 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);
   });
});