Question

我正在尝试在同一页面上放置2个HTML表单，然后根据按下的JavaScript按钮，使用.php来控制他们提交的目标submit文件。< / p>

目前，它发送到正确的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();
  })
}

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

Answer 2

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

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

因为default按钮的submit行为click因此不被prevent编辑 - 它会发生...并且默认行为是到服务器的整页帖子。这就是您被从网页上删除的原因。

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

<强> 1。解决方案1：只需将event参数添加回

即可

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

这只会修复您当前的JavaScript错误，并允许e.preventDefault()工作。

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

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

将第一个表单提交按钮的ID更改为ID="submit1'。目前，这两个按钮具有相同的名称，这是无效的HTML，可能会导致问题。
从两个 onclick=元素中删除button绑定语法。
按如下方式更新您的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 完全相同。

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

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

2 个答案: