Javascript 如何将两张表格放在一页上

我试图将两个HTML表单放在同一页面上，然后使用

JavaScript

控制它们提交到的目标

.php

文件，在此基础上按下

submit

按钮

目前，它正在发送到正确的php/电子邮件地址，但也会将用户从页面中带走——这正是我想要阻止的

任何帮助都将不胜感激。这是我的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，它很有效：

$('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>";
?>

---

我做错了什么？

您是否尝试过将下面几行出现的第二个位置更改为其他位置

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

致：

---

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

这里有几个问题阻碍了您想要的功能

您的页面正在发布，因为当您调用

e.preventDefault（）

-我怀疑您遇到了JavaScript错误，表明

e

是

未定义的

因为
默认
提交
按钮的
行为是
点击
ed，因此它不是
防止
ed-它发生了。。。默认行为是向服务器发送整页文章。这就是为什么你被从你的页面中删除

有两种方法可以轻松解决此问题：

1。解决方案1：只需将
事件
参数添加回

function mainform(e) { ... }
function form2(e) { ... }

这将简单地修复您当前的JavaScript错误，并允许您的
e.preventDefault（）
工作

但是，您已经在页面上使用了jQuery，因此我建议您保持与工具的一致性，并使用jQuery的事件绑定语法。这就是您最初的JavaScript的编写方式—现在您可以返回到它

2。解决方案2：重新引入jQuery

将第一个表单的提交按钮的
ID
更改为
ID=“submit1”
。当前两个按钮的名称相同，这是无效的HTML，可能会导致问题
从两个
按钮
元素中删除
onclick=
绑定语法
按如下方式更新您的JavaScript：
新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();
    })
}

请注意，我们仍然在
e
中为每个
function（）
调用添加了返回-与解决方案1完全相同

如果这对您不起作用-请随时发表评论并寻求更多帮助。
简化了问题文本，提高了代码可读性
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();
  })
}

function mainform(e) { ... }
function form2(e) { ... }

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

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