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脚本，该脚本处理并发送邮件，然后返回“email send”。这些脚本使用此<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 可用，那么JavaScript块将会提取表单提交，而不是使用AJAX发布，而不是重定向到 editor.php 。

如果您还想发送测试电子邮件，我会在其中添加名称为test的复选框，如果已选中，则更改表单处理程序中的逻辑（在本例中为编辑器。 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);
   });
});

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

2 个答案: