javascript - 如何在一页上放置两个表格

Question

我试图在同一个页面上放置 2 个 HTML 表单，然后使用 JavaScript 来控制他们提交到的目标 .php 文件，基于哪个 提交按钮被按下。

目前，它正在发送到正确的 php/email 地址，但也会让用户离开该页面——这是我想要防止的。

如有任何帮助，我们将不胜感激。这是我的 HTML:

<div class="col-md-6">
  <form class="form" id="ajax-contact-form" action="multi/sendmail.php">
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="fa fa-user"></i></span>
        <input type="text" name="contact_name" id="contact_name" class="form-control" placeholder="Name" required>
      </div>
    </div>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="fa fa-envelope"></i></span>
        <input name="contact_email" id="contact_email" type="email" class="form-control" placeholder="Email" required>
      </div>
    </div>
    <textarea name="contact_message" id="contact_message" placeholder="Message" rows="8" class="form-control" required></textarea>
    <div class="controls send">
      <button type="submit" class="btn-primary btn-lg" value="Submit1" id="submit2" onClick="mainform">Send</button>
      <div class="loading"></div>
      <div class="results"></div>
    </div>
  </form>
</div>
<!--FORM 2-->
<div class="col-md-6">
  <form class="form2" id="ajax-contact-form2" action="multi/sendmail2.php">
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="fa fa-user"></i></span>
        <input type="text" name="contact_name" id="contact_name" class="form-control" placeholder="Name" required>
      </div>
    </div>
    <div class="controls">
      <div class="input-prepend">
        <span class="add-on"><i class="fa fa-envelope"></i></span>
        <input name="contact_email" id="contact_email" type="email" class="form-control" placeholder="Email" required>
      </div>
    </div>
    <textarea name="contact_message" id="contact_message" placeholder="Message" rows="8" class="form-control" required></textarea>
    <div class="controls send">
      <button type="submit" class="btn-primary btn-lg" value="Submit2" id="submit2" onClick="form2">Send</button>
      <div class="loading"></div>
      <div class="results"></div>
    </div>
  </form>
</div>
<!--/FORM 2-->

这是我的 JavaScript:

function mainform() {
    e.preventDefault();
    $('.loading').show();
    $.post('multi/sendmail.php', $('.form').serialize(), function(data) {
        $('.results').html(data);
    }).success(function() {
        $('.loading').hide();
    })
}

function form2() {
    e.preventDefault();
    $('.loading').show();
    $.post('multi/sendmail2.php', $('.form2').serialize(), function(data) {
        $('.results').html(data);
    }).success(function() {
        $('.loading').hide();
    })
}

这是我的旧 JavaScript，可以正常工作:

$('form').submit(function(e) {
    e.preventDefault();
    $('.loading').show();
    $.post('multi/sendmail.php', $('.form').serialize(), function(data){
        $('.results').html(data);
    }).success(function(){
        $('.loading').hide();
    })
})

还有一个 PHP 文件:

<?php
$name = isset($_REQUEST['contact_name']) ? $_REQUEST['contact_name'] : '' ;
$email = isset($_REQUEST['contact_email']) ? $_REQUEST['contact_email'] : '' ;
$message = isset($_REQUEST['contact_message']) ? $_REQUEST['contact_message'] : '' ;

$headers  = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type: text/html; charset=iso-8859-1" . "\r\n";
$headers .= "From:".$name." ".$email;

// Replace mail@website.com with your email
mail( "me@email.com", "Message from My Future Now Website",$message, $headers );
print "<strong>Form submitted successfully.</strong>";
?>

我做错了什么？

Answer 1

您是否尝试过将以下行出现的第二个位置更改为其他内容？

<div class="loading"></div>
<div class="results"></div>

我看到两个 javascript 函数都引用一个元素，就好像它是唯一的一个元素，而你现在有两个。如果将第二个更改为:

<div class="results2"></div>
<div class="loading2"></div>

然后你可以改变

function form2(){
   e.preventDefault();
   $('.loading').show();
   $.post('multi/sendmail2.php', $('.form2').serialize(), function(data){
     $('.results').html(data);
   }).success(function(){
     $('.loading').hide();
  })
}

到:

function form2(){
   e.preventDefault();
   $('.loading2').show();
   $.post('multi/sendmail2.php', $('.form2').serialize(), function(data){
     $('.results2').html(data);
   }).success(function(){
     $('.loading2').hide();
  })
}

我认为这会给您带来更大的成功。如果您在尝试这样的更改后遇到任何进一步的问题，请告诉我