如何在一个页面上放置 2 个表单答案

【问题标题】：How to put 2 forms on one page如何在一个页面上放置 2 个表单
【发布时间】：2015-05-07 17:18:35
【问题描述】：

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

目前，它正在发送到正确的 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>";
?>

我做错了什么？

【问题讨论】：

简化问题文本，提高代码可读性

标签： javascript php html forms

【解决方案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();
  })
}

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

【讨论】：

【解决方案2】：

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

您的页面正在发布，因为当您调用 e.preventDefault() 时 - 我怀疑您遇到了 JavaScript 错误，表明 e 是 undefined。

因为 submit 按钮的 default 行为是 clicked，因此不是是 prevented - 它会发生......并且默认行为是整页发布到服务器。这就是为什么你被从你的页面带走的原因。

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

1.解决方案 1：只需将 event 参数添加回

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

这将简单地修复您当前遇到的 JavaScript 错误，并允许您的 e.preventDefault() 工作。

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

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

将您第一个表单提交按钮的ID 更改为ID="submit1'。目前这两个按钮具有相同的名称，这是无效的 HTML，可能会导致问题。
从 both button 元素中删除 onclick= 绑定语法。
如下更新您的 JavaScript：

新的 JavaScript：

$('#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();
    })
});

请注意，我们仍将 e 添加回每个 function() 调用 - 与 解决方案 1 中的完全相同。

如果这对您不起作用 - 请随时发表评论并寻求更多帮助。

【讨论】：