Question

这是我设计并编写了一个PHP的模态表单，但由于我对PHP的命令较少...我的最终目标是在页面上提交表单而不刷新页面＆amp;使用PHP通过电子邮件获取所有这些详细信息。这就是我迄今为止用PHP编写的内容。

<?php

// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "example@gmail.com" );
define( "EMAIL_SUBJECT", "Visitor Message" );

// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$senderPhone = isset( $_POST['senderPhone'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderPhone'] ) : "";
$senderCountry = isset( $_POST['senderCountry'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderCountry'] ) : "";
$senderBudget = isset( $_POST['senderBudget'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderBudget'] ) : "";
$senderSelect = isset( $_POST['senderSelect'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderSelect'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";

// If all values exist, send the email
if ( $senderName && $senderEmail && $senderPhone && $senderCountry && $senderBudget && $senderSelect && $message ) {

    $msgToSend = "Name: $senderName\n";
    $msgToSend .= "Email: $senderEmail\n";
    $msgToSend .= "Phone: $senderPhone\n";
    $msgToSend .= "Sender Country: $senderCountry\n";
    $msgToSend .= "Sender Budget: $senderBudget\n";
    $msgToSend .= "Sender Select: $senderSelect\n";
    $msgToSend .= "Message: $message";

    $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
    $headers = "From: " . $senderName . " <" . $senderEmail . ">";
    $success = mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

.modal-popup-main {
  padding:35px; box-shadow:0px 0 4px #333;
}
.bg-white {
  background:#fff!important
}
.bg-blue {
  background:#003d76!important
}
.position-relative {
  position:relative!important;
  z-index:5
}

.no-padding, .no-padding-section {
  padding:0!important
}
.center-col {
  position: relative;
  float:none!important;
  margin-left:auto!important;
  margin-right:auto!important
}
.white-text {
  color:#FFF!important
}
.request_form {
  background:rgba(255, 255, 255, .5);
  font-size:50px;
  padding:10px 10px 8px;
  position:fixed;
  right:25px;
  text-align:center;
  top:400px;
  z-index:999999999;
  color:#01315f; border:1px solid #ddd;
}
.request_form span {
  display:block;
  font-size:14px;
  font-weight:700;
  padding:8px 0;
}
.slider-subtitle5 {
  font-size:22px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:50px;
  line-height:30px;font-family:"Oswald",sans-serif;
}
.slider-subtitle4, .slider-subtitle5, .slider-title-big4, .slider-title-big5 {
  text-transform:uppercase;
  display:block
}
.no-margin-bottom {
  margin-bottom:0!important
}
.margin-four {
  margin-top:4%!important;
  margin-bottom:4%!important
}
.input-round {
  border-radius:4px!important
}
.big-input, .big-select, .big-textarea {
  padding:11px 10px;
  border:1px solid rgba(0, 0, 0, .2)
}
@media screen\0 {
.big-input, .big-select, .big-textarea {
  padding-bottom:20px
}
}

.med-input.select-style select {
  padding:14px 15px
}
.med-input.select-style {
  margin:0 0 20px
}
.select-style {
  padding:0;
  border:1px solid #ccc;
  width:100%;
  overflow:hidden;
  margin:0 0 40px;
  background:url(http://www.tkdigitals.com/images/select-arrow.png) 97% 50% no-repeat #fff
}
.select-style select {
  padding:12px 10px;
  width:100%;
  border:none;
  box-shadow:none;
  background-color:transparent;
  background-image:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  font-size:11px;
  letter-spacing:1px;
  margin-bottom:0;
  color:#6d6d6d !important
}
.select-style select:focus {
  outline:0;
  border:none;
  box-shadow:none
}
.travel-booking .select-style select {
  padding:6px 15px 9px;
  border:none;
  height:37px
}
.travel-booking .select-style {
  background:url() right 10px top 50% no-repeat #fff
}
.select-style2 {
  border:none;
  margin-bottom:0
}
select.coup_select {
  padding:10px 13px;
  border:none;
  margin-bottom:0!important
}
input.coup_input[type=text]:focus, select.coup_select:focus {
  background:#CF6
}
.clear-both, footer {
  clear:both
}
#modal-popup5 input{
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}
#modal-popup5 select {
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}
#modal-popup5 textarea {
  border:1px solid #dfdfdf;
  letter-spacing:1px;
  font-size:11px;
  padding:8px 15px;
  width:100%;
  margin:0 0 20px;
  max-width:100%;
  resize:none
}

.required-field {
  font-size:11px;
  display:block;
  text-transform:uppercase;
  letter-spacing:1px
}
.margin-two {
  margin-top:2%!important;
  margin-bottom:2%!important
}
.margin-one {
  margin-top:1%!important;
  margin-bottom:1%!important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#contactForm" class=""><button class="banner-btn">Request For Quote</button></a>
<script>
    $('#call_form').on('click', function () {
       
        var url = "http://example.com/submit.php";

        var call_name = $('#call_name').val();
        var call_email = $('#call_email').val();
        var call_phone = $('#call_phone').val();
        var call_country = $('#call_country').val();
        var call_budget = $('#call_budget').val();
        var call_service = $('#call_service').val();
        var call_message = $('#call_message').val();


        $('#call_name').css('color', '#000');
        $('#call_email').css('color', '#000');
        $('#call_phone').css('color', '#000');
        $('#call_country').css('color', '#000');
        $('#call_budget').css('color', '#000');
        $('#call_service').css('color', '#000');
        $('#call_message').css('color', '#000');


        var error = 0;
        var regex = /^[a-zA-Z ]*$/;
        var phone_regex = /[0-9\-\(\)\s]+/;
        var email_pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;

        if (call_name == '' || regex.test(call_name) == false) {
            $('#call_name').css('color', 'red');
            error++;
        }
        if (call_email == '' || email_pattern.test(call_email) == false) {
            $('#call_email').css('color', 'red');
            error++;
        }
        if (call_message == '') {
            $('#call_message').css('color', 'red');
            error++;
        }

        if (error == 0) {
            $.ajax({
                url: url,
                data: {
                    call_name: call_name,
                    call_email: call_email,
                    call_phone: call_phone,
                    call_country: call_country,
                    call_budget: call_budget,
                    call_service: call_service,
                    call_message: call_message

                },
                type: "POST",
                success: function (res) {
                    // console.log(res);
                    $('#call_name').val("");
                    $('#call_email').val("");
                    $('#call_phone').val("");
                    $('#call_country').val("");
                    $('#call_budget').val("");
                    $('#call_service').val("");
                    $('#call_message').val("");
                    window.location = 'thank-you.html';
                }

            });
        }
    });
</script>

<script>
    $('#disc_form').on('click', function () {
       
        var url = "http://example.com/submit.php";

        var disc_name = $('#disc_name').val();
        var disc_email = $('#disc_email').val();
        var disc_country = $('#disc_country').val();


        $('#disc_name').css('color', '#000');
        $('#disc_email').css('color', '#000');
        $('#disc_country').css('color', '#000');


        var error = 0;
        var regex = /^[a-zA-Z ]*$/;
        var phone_regex = /[0-9\-\(\)\s]+/;
        var email_pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;

        if (disc_name == '' || regex.test(disc_name) == false) {
            $('#disc_name').css('color', 'red');
            error++;
        }
        if (disc_email == '' || email_pattern.test(disc_email) == false) {
            $('#disc_email').css('color', 'red');
            error++;
        }

        if (error == 0) {
            $.ajax({
                url: url,
                data: {
                    disc_name: disc_name,
                    disc_email: disc_email,
                    disc_country: disc_country

                },
                type: "POST",
                success: function (res) {
                    // console.log(res);
                    $('#disc_name').val("");
                    $('#disc_email').val("");
                    $('#disc_country').val("");
                    window.location = 'thank-you.html';
                }

            });
        }
    });
</script>
<div class="request_consl"> <a href="#modal-popup5" class="request_form popup-with-move-anim">+<span data-toggle="tooltip" title="click here" >Request a<br>consultation</span></a>
  <div id="modal-popup5" class="zoom-anim-dialog mfp-hide bg-blue col-lg-6 col-md-6 col-sm-7 col-xs-11 center-col bg-white text-center modal-popup-main"> <span class="slider-subtitle5 white-text  no-margin-bottom" style="font-family:'oswald';font-weight:600;">Request a
                  Quote</span>
    <!-- <form> -->
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_name" type="text" class="input-round big-input coup_input" name="name" placeholder="Full Name">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_email" type="text" class="input-round big-input coup_input" name="email" placeholder="Email">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_phone" type="text" class="input-round big-input coup_input" name="email" placeholder="Phone Number">
        <!-- end input -->
      </div>
    </div>

    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->
        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <select id="call_country" class="coup_select">
            <option value="">Country</option>
            <option value="brazil">Brazil</option>
            <option value="france">France </option>
            <option value="germany">Germany</option>
            <option value="india">India</option>
            <option value="japan">Japan</option>
          </select>
        </div>
        <!-- end select -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- input -->
        <input id="call_budget" type="text" class="input-round big-input coup_input" name="email" placeholder="Mention your estimated budget? ">
        <!-- end input -->
      </div>
    </div>
    <div class="col-md-4 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <select id="call_service" class="coup_select">
            <option value="">Choose a Service</option>
            <option value="web-design">Web Design</option>
            <option value="graphic-design-branding">Graphic Design/Branding</option>
            <option value="seo">SEO</option>
            <option value="sem">SEM</option>
            <option value="smm">SMM</option>
            <option value="mobile-application">Mobile Application</option>
            <option value="seat-outsourcing">Seat Outsourcing</option>
          </select>
        </div>
        <!-- end select -->
      </div>
    </div>

    <div class="col-md-12 col-sm-6  ">
      <div class="form-group">
        <!-- label -->

        <!-- end label -->
        <!-- select -->
        <div class="select-style input-round big-input select-style2">
          <textarea id="call_message" placeholder="Message" rows="" cols="" name=""></textarea>
        </div>
        <!-- end select -->
      </div>
    </div>
    <div class="clear-both"></div>
    <div class="form-group">
      <!-- required  -->
      <span class="required-field margin-two white-text">*Please complete all fields correctly</span>
      <!-- end required  -->
      <!-- button  --><button id="call_form" type="submit" class="btn btn-black btn-medium2 btn-round margin-one" style="background-color:#c1c1c1;">Submit</button>
      <!-- end button  -->
    </div>
    <!-- </form> -->
  </div>
</div>

Answer 1

首先尝试这样做，我遇到了同样的问题并且解决了问题。

你的AJAX数据：

$.ajax({
        url: url,
        dataType: "json",
        data: {
              "disc_name": disc_name_val,
               "disc_email": disc_email_val,
               "disc_country": disc_country_val

         },
...

在你的PHP中：

$disc_name = $_POST['disc_name']; 
...

执行此操作后，您需要执行更多操作以验证数据是否正确发送。

您可以通过检查浏览器的控制台来验证数据是否正确发送。

更多错误：

在你的php中处理字符串，你应该这样做：

$msgToSend = "Name:".$senderName."\n";
 $msgToSend .= "Email:".$senderEmail."\n";
 $msgToSend .= "Phone:".$senderPhone."\n";
...

还有一个错误：

您正在发送POST并使用GET接收。你必须使用POST或GET。

if ( isset($_GET["ajax"]) )

Answer 2

提交表格而不重新加载你必须使用ajax 所以尝试添加这个，给你的表单id = formid

<script>
$('#fromid').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        if (response=="ok") {
            window.location.href = "dashboard.php";
        }else{
            $('#created').html(response); // update the DIV
            setTimeout(function() {
                $('#created').fadeOut("slow");
            }, 20000 );
        }
    }
});
return false; // cancel original event to prevent form submitting
});
</script>

无法为页面表单提交编写PHP

2 个答案: