联系表单上的重定向问题

时间:2017-10-27 21:00:50

标签: javascript php html forms contact

我无法弄清楚为什么当一切看上去都不会重定向。

我使用了位置/路径,但是没有从主页面移动。

电子邮件发送和表单很好,但无法重定向到感谢页面或错误显示。

这是我的代码JS / PHP / HTML

提前致谢,希望你能发现一些事情

JS:

/* ==================================
       Hero Form Validation
    =====================================*/
$('#hero-submit').click(function(e) {

  // Stop form submission & check the validation
  e.preventDefault();

  // Variable declaration
  var error = false;
  var fname = $('#hero-fname').val();
  var email = $('#hero-email').val();
  var username = $('#hero-username').val();

  // Form field validation
  if (fname.length == 0) {
    var error = true;
    $('#hero-fname').parent('div').addClass('field-error');
  } else {
    $('#hero-fname').parent('div').removeClass('field-error');
  }
  if (email.length == 0 || email.indexOf('@') == '-1') {
    var error = true;
    $('#hero-email').parent('div').addClass('field-error');
  } else {
    $('#hero-email').parent('div').removeClass('field-error');
  }
  if (username.length == 0) {
    var error = true;
    $('#hero-username').parent('div').addClass('field-error');
  } else {
    $('#hero-username').parent('div').removeClass('field-error');
  }

  if (error == true) {
    $('#hero-error-notification').addClass('show-up');
  } else {
    $('#hero-error-notification').removeClass('show-up');
  }

  if (error == false) {
    $.post("hero-form.php", $("#register-form").serialize(), function(result) {
      if (result == 'sent') {
        $('#hero-success-notification').addClass('show-up');
        $('#hero-submit').addClass('disabled');
      }
    });
  }
});


// Function to close the Notification
$('a.notification-close').click(function() {
  $(this).parent('div').fadeOut(200);
});

PHP:

<?php 
$subject='Register New Account on Urip Landing Page'; // Subject of your email
$to='adam@test.com'; //Recipient's or Your E-mail
$headers='MIME-Version: 1.0' . "\r\n";
$headers .="From: " . $_POST['heroEmail'] . "\r\n"; // Sender's E-mail
$headers .='Content-type: text/html; charset=iso-8859-1' . "\r\n";
$message .='ACCOUNT DETAILS: ' . "<br>";
$message .='Username: ' . $_POST['heroUsername'] . "<br>";
$message .='First Name: ' . $_POST['heroFname'] . "<br>";
$message .='Last Name: ' . $_POST['heroLname'] . "<br>";
$message .='Email Address: ' . $_POST['heroEmail'] . "<br>";
$message .='Phone Number: ' . $_POST['heroPhone'];
if (mail($to, $subject, $message, $headers)) {
  header('location: /page2.html');
}

else {
  header('location: /page3.html');
}

?>

HTML

<form class="register-form margin-top-32 margin-bot-5" id="register-form" method="post">
  <div class="row">

    <div class="col-lg-6 col-md-6">
      <div class="required-field">
        <input name="heroFname" id="hero-fname" class="hero-input" type="text" placeholder="First Name">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-6 col-md-6">
      <input name="heroLname" id="hero-lname" class="hero-input" type="text" placeholder="Last Name">
    </div>

    <div class="col-lg-12 col-md-12">
      <div class="required-field">
        <input name="heroUsername" id="hero-username" class="hero-input" type="text" placeholder="Choose Username">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-12 col-md-12">
      <div class="required-field">
        <input name="heroEmail" id="hero-email" class="hero-input" type="text" placeholder="Email Address">
      </div>
      <!--/ .required-field -->
    </div>

    <div class="col-lg-8 col-md-8">
      <input name="heroPhone" id="hero-phone" class="hero-input" type="text" placeholder="Phone Number">
    </div>

    <div class="col-lg-4 col-md-4">
      <button id="hero-submit" type="submit" class="submit-btn">Create</button>
    </div>

  </div>
</form>
<!--/ .register-form -->

2 个答案:

答案 0 :(得分:1)

问题是你的php头重定向:

header("Location: $redirect_thankyou"); 

这会导致浏览器在ajax调用中加载重定向的页面:

$.post("hero-form.php", $("#register-form").serialize(),function(result){

因此result将包含您重定向到的网页的html内容,而不仅仅是单词sent

你需要删除php中的header()重定向,而是发送回jQuery中你的ajax调用所期望的内容。 Json会更适合这种情况,但单个字符串也可以正常工作。

答案 1 :(得分:0)

PHP

if (mail($to, $subject, $message, $headers)) {
    echo $redirect_thankyou; 
    die(); 
} 
else 
{ 
    echo $redirect_error"; 
    die(); 
} 

的javascript

$.post("hero-form.php", $("#register-form").serialize(),function(result){
    if(result){
       location.replace(result);
       $('#hero-success-notification').addClass('show-up');
       $('#hero-submit').addClass('disabled');
    }
});