标签：forms fancybox html php jquery

如何设置PHP,HTML和JQuery,以使用户单击“提交”时页面不会更改？我的表单位于名为Fancybox(fancybox.net)的灯箱插件中

完整示例为my church’s website

这是我的PHP.

<?php
if(isset($_POST['email'])) {

    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "nonya@yahoo.com";
    $email_also ="nonya2@yahoo.com";
    $email_subject = $first_name + " " + $last_name + " Website Inquiry";


    function died($error) {
        // your error code can go here
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br /><br />";
        echo $error."<br /><br />";
        echo "Please go back and fix these errors.<br /><br />";
        die();
    }

    // validation expected data exists
    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {
        died('We are sorry, but there appears to be a problem with the form you submitted.');       
    }

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
    $string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$first_name)) {
    $error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
  if(!preg_match($string_exp,$last_name)) {
    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
  if(strlen($comments) < 2) {
    $error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
  if(strlen($error_message) > 0) {
    died($error_message);
  }
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }

    $email_message .= "First Name: ".clean_string($first_name)."\n";
    $email_message .= "Last Name: ".clean_string($last_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
@mail($email_also, $email_subject, $email_message, $headers);
?>


<!-- include your own success html here -->

Thank you for contacting us. We will be in touch with you very soon.

<?php
}
?>

jQuery的：

<script>
$(document).ready(function() {


$("#question_form_link").fancybox({
        'scrolling' : 'no',
        'titleShow' : true,
        'onClosed'  : function() {
        }
    });


    }); //end ready 

</script>

和我的形式：

  <div style="display:none">
    <form id="question_form" name="question_form" method="post" action="send_form_email.php">
      <table width="450px">
        <tr>
          <td valign="top"><label for="first_name">First Name *</label></td>
          <td valign="top"><input  type="text" name="first_name" maxlength="50" size="30"></td>
        </tr>
        <tr>
          <td valign="top"><label for="last_name">Last Name *</label></td>
          <td valign="top"><input  type="text" name="last_name" maxlength="50" size="30"></td>
        </tr>
        <tr>
          <td valign="top"><label for="email">Email Address *</label></td>
          <td valign="top"><input  type="text" name="email" maxlength="80" size="30"></td>
        </tr>
        <tr>
          <td valign="top"><label for="telephone">Telephone Number</label></td>
          <td valign="top"><input  type="text" name="telephone" maxlength="30" size="30"></td>
        </tr>
        <tr>
          <td valign="top"><label for="comments">Comments *</label></td>
          <td valign="top"><textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea></td>
        </tr>
        <tr>
          <td colspan="2" style="text-align:center"><input type="submit" value="Submit">
          </td>
        </tr>
      </table>
    </form>
  </div>

解决方法:

您需要ajax.首先,为所有输入字段分配一个ID,以便jQuery可以轻松选择它们.然后将以下内容添加到您的JS中.

$("#submit_button").click(function() {
// Get all of the values from the input fields thru their ID's
   var first_name = $("#first_name").val();
   var last_name = $("#last_name").val();
   var email = $("#email").val();
   var telephone = $("#telephone").val();
   var comments = $("#comments").val();

// Validate the form to make sure that all of the required fields are not left empty
   if(first_name != ''
   && last_name != ''
   && email != ''
   && comments != '')
   {
       $.ajax({
          url: "email.php",
          type: "POST",
          data: ({
               first_name: first_name,
               last_name: last_name,
               email: email,
               telephone: telephone,
               comments: comments
           }),
          success: function(data) 
          {
          // You might wanna display a message telling the user that the form was successfully filled out.
          }
      });
    }

    if(first_name == ''
    || last_name == ''
    || email == ''
    || comments == '')
    {
        alert("You left one of the required fields empty");
    }
 });

标签：forms,fancybox,html,php,jquery
来源： https://codeday.me/bug/20191123/2065086.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。