php执行后我不希望页面刷新

时间:2018-05-08 21:55:16

标签: php html html5 contact-form

<?php
  $sendTo = "example@example.nl"; //Receiver mail
  $name = ""; //Sender's Name
  $email = ""; //Sender's email address
  $phone = ""; //Sender's mobile number
  $subject = ""; //Subject of form
  $message = ""; //Message of form
  $nameErr = "";
  $emailErr = "";
  $subjectErr = "";
  $messageErr = "";
  $succesMessage = "";

  //On submitting form, below function will execute
  if (isset($_POST['submit'])) {
    //Check if name is not empty
    if (empty($_POST['name'])) {
      $nameErr = "Name is required.";
    } else {
      $name = test_input($_POST['name']);
      //Check if name only contains letters and whitespace
      if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
        $nameErr = "Only letters and whitespace allowed.";
      }
    }

    //Check if email is not empty
    if (empty($_POST['email'])) {
      $emailErr = "Email is required.";
    } else {
      $email = test_input($_POST['email']);
      //Check if email format is correct
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format.";
      }
    }

    //Phone
    if (empty($_POST['phone'])) {
      $phone = "Phonenumber not submitted.";
    } else {
      $phone = test_input($_POST['phone']);
    }

    //Subject
    if (empty($_POST['subject'])) {
      $subjectErr = "Subject is required.";
    } else {
      $subject = test_input($_POST['subject']);
     }

    //Message
    if (empty($_POST['message'])) {
      $messageErr = "Message is required.";
    } else {
      $message = test_input($_POST['message']);
    }

    if( !($name=='') && !($email=='') && !($subject=='') &&!($message=='') ) {
      $emailSubject = "New form submission";
      $header= "You have received a new e-mail from " .$name;
      $txt = $subject. "\n\n" .$message. "\n\n" . "Contact Details" ."\n". "Name: " .$name. "\n" . "Email: " .$email. "\n" . "Phone: " . $phone;

      /* Send the message using mail() function */
      if(mail($sendTo, $emailSubject, $txt, $header)) {
        $successMessage = "Message sent successfully. I will contact you shortly.";
        } else {
        $emailErr = "Invalid Email";
      }
    }
}

function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>

所以我的代码站在所有html之上,代码运行正常!但我不希望页面重新加载并从页面顶部开始。我希望它留在页面的底部,因为这是联系表单所在的位置。我该如何解决这个问题?

我已经阅读了一些修复此问题的JavaScript问题,但我不清楚自己更改自己的代码。

这里的HTML:
<div class="form-container"> <form class="ccform" id="ccform" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post"> <span class="error"><?php echo $nameErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-user"></i></span> <input type="text" class="ccform-field" placeholder="*Full Name" name="name"> </div> <span class="error"><?php echo $emailErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-envelope"></i></span> <input type="email" class="ccform-field" placeholder="*Email" name="email"> </div> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-mobile-phone"></i></span> <input type="text" class="ccform-field" placeholder="Phonenumber" name="phone"> </div> <span class="error"><?php echo $subjectErr;?></span> <div class="ccfield"> <span class="ccform-icon"><i class="fa fa-info"></i></span> <input type="text" class="ccform-field" placeholder="*Subject" name="subject"> </div> <span class="error"><?php echo $messageErr;?></span> <div class="ccfield msgfield"> <span class="ccform-icon"><i class="fa fa-comment"></i></span> <textarea class="ccform-field" name="message" rows="8" placeholder="*Message"></textarea> </div> <div class="ccfield btnfield"> <input class="ccbtn" id="ccbtn" type="submit" value="Submit" name="submit"> </div> </form> <span class="error"><?php echo $succesMessage;?></span> </div>

1 个答案:

答案 0 :(得分:2)

我认为您想要的是使用Ajax提交表单。 这是您的原始代码:

<?php

  // .....

  //On submitting form, below function will execute
  if (isset($_POST['submit'])) {

      // ..... 

      // After processing your form data, you have to output your result here. For example:
      echo $message;

      // then exit php script, so that it will not generate HTML below
      exit;
  }
?>

您的HTML应该有一个如下所示的表单:

<form id="myForm" method="post" action="contact.php">
    // ......
    <button id="btSubmit" name="submit">Submit</button>
</form>

要不刷新页面,必须使用Ajax,这里我使用jQuery:

<script>
    $(function() {
         $('#btSubmit').click(function() {
              var method = $('#myForm').attr('method');
              var action = $('#myForm').attr('action');
              $.ajax({
                  url: action, 
                  method: method,
                  data: $('#myForm').serialize();
                  success: function(data) { 
                       // your response data
                  }
              });
         });
    });        
</script>