具有两个提交按钮和两个不同操作的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脚本，该脚本处理并发送邮件，然后返回“电子邮件发送”。 脚本使用此return语句将<div>替换为<form> 。 这是我想要的。

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

我怎样才能做到这一点？ 问题是2按钮始终提交javascript send_mail，因为它附加在表单标签onsubmit 。

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

编辑/ UPDATE：

需要说明的是：第一个按钮应该将$ 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>

上面会看到你的形式仍然提交editor.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';
}

Answer 2

为什么需要发表ajax帖子并提交表格。 任一个。

有2个普通按钮，可以通过S.post做任何您想做的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);
   });
});