Javascript Recaptcha导致部分页面加载

我在我的网站上使用谷歌重新验证码。当代码正确时，recaptcha工作。页面刷新并向下滚动到正确的位

如果输入的代码不正确，则分页符。它会向下滚动到正确的部分，并且recaptcha会停止页面加载的其余部分

我用于重新匹配的代码是标准php代码-

网站在这里-如果你去下订单，填写表格，并尝试使用正确和不正确的代码，这应该会让你更好地理解我的意思

如果你需要网站上的任何代码，就说出来

我把整个订单页面放在下面，因为大部分代码在页面运行时不显示

网站-mk18.web44.net

谢谢

编辑代码：

  <section  id="order" class="section mtcon">
                <!-- heading -->
                <div class="row">
                    <h2 class="mtcon-title">Place an Order</h2>
                    <div class="span8 short-dec">
<div id="mainContent">
    <div class="ordercontent">
  <?php

$date = date('d-m-Y H:m:s',time());

if ($_POST)
{
require_once('recaptchalib.php');
$privatekey = "KEY";
$resp = recaptcha_check_answer ($privatekey,
        $_SERVER["REMOTE_ADDR"],
        $_POST["recaptcha_challenge_field"],
        $_POST["recaptcha_response_field"]);
if (!$resp->is_valid)
    {
    $error= "<p class='highlighted'><img src='images/recaptcha_logo.gif' width='96' height='56' alt='reCAPTCHA logo' style='float: left; margin: 0 5px 0 0;' /><br / <strong>SORRY</strong> - The reCAPTCHA words were not entered correctly. <br /><a href='javascript:history.back(1);'>Please return to the form</a> and try again.</p>";
    }
    $path = "enquirydata/";

    $filename = 'orderdata.txt';

    $thefile = fopen($path.$filename, 'append');

    while(list($key, $value) = each ($_POST))
    {
    fwrite($thefile, $value."|");
    }

    fwrite($thefile, "\r\n");

    fclose($thefile);


$toMail = 'MAIL'; // your email address
// $toMail = 'MAIL'; // For TESTING ONLY
$ccMail = 'MAIL'; // carbon copy - leave empty if you don't use it
$bccMail = 'MAIL'; // blind carbon copy 
$mailSub = 'MK18 - order for '.$_POST['advert']; // the subject of the email

$thanksPage = $_SERVER['#order']; // the URL of the thank you page.

if(strstr($_POST['Email_Address'], '@'))
    {

if(isset($_POST['Email_Address'])){
    $mailBody = "Many thanks for your order.\r\n";
    $mailBody .= "\r\n";
    $mailBody .= "Order Details: \r\n";
    $mailBody .= "\r\n";
    foreach ($_POST as $field => $input) {
        if(strtolower($field) != 'submit' && strtolower($field) != 'reset' && strtolower($field) != 'recaptcha_challenge_field' && strtolower($field) != 'recaptcha_response_field'){
            $mailBody .= ucfirst ($field) ." : ". trim(strip_tags($input)) . " \r\n"; 
        }   
    }

    //===============================================================
    $mailBody .= "\r\n";
    $mailBody .= "\r\n";
    $mailBody .= "If payment is not yet complete, please use Stripe or post a cheque, along with a copy of the above details, to the address provided on the web site.\r\n";
    $mailBody .= "\r\n";
    $mailBody .= "Thanks again for your purchase.\r\n";
    $mailBody .= "MK18\r\n";
    $mailBody .= "www.mk18.co.uk\r\n";
    $mailBody .= "\r\n";
    //===============================================================

    $usrMail = $_POST['Email_Address'];
    $headers = "From:$usrMail\r\n";
    $headers .= "cc:$ccMail\r\n";
    $headers .= "bcc:$bccMail\r\n";
    $headers .= "Content-type: text/plain\r\n";
    $sendRem = mail($toMail, $mailSub, $mailBody, $headers);
}    
?>

  <h1>Thank you for your order!</h1>

<?php 

$item=$_POST['advert'];

    if($_POST['design_service']=="I would like the MK18 Design Service")
    {
    $item=$_POST['advert']." with Design Service";
    }

?>

<p><strong>Order Summary:</strong></p>

<div class="formfield"><div class="formlabelwide"><?php echo $_POST['advert']; ?></div>&pound;<input type="text" value="<?php echo number_format($_POST['ad_charge'],2); ?>" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><div class="formlabelwide">Design Service</div>&pound;<input type="text" value="<?php echo number_format($_POST['design_charge'],2); ?>" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><div class="formlabelwide">VAT</div>&pound;<input type="text" value="<?php echo number_format($_POST['vat'],2); ?>" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><div class="formlabelwide">Credit Card Fee</div>&pound;<input type="text" value="<?php echo number_format($_POST['card_fee'],2); ?>" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><div class="formlabelwide">Grand Total</div>&pound;<input type="text" value="<?php echo number_format($_POST['grand_total'],2); ?>" size="7" readonly class="plaintextbox" /></div>

<p>&nbsp;</p>

<?php 
    if($_POST['payment_method']=="PayPal")
        {
?>




<form action="charge.php" method="POST"  >
<input type="hidden" name="stripeToken2" value="<?php echo($_POST['grand_total'])*100 ?>" />
<input type="hidden" name="stripeToken3" value="<?php echo $_POST['Email_Address'] ?>" />
  <script
    src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
    data-key="KEY"
    data-amount="<?php echo($_POST['grand_total'])*100 ?>"
    data-name="<?php echo $item; ?>"
    data-description=""
    data-image="/128x128.png">
  </script>
</form>

<FORM><INPUT Type="button" VALUE="Cancel Order" onclick="javascript:window.location.href='http://www.mk18.web44.net'" /></FORM>




<?php
        }
        else if($_POST['payment_method']=="Cardless")
        {
?>

<?php
// Include the library
include_once 'lib/GoCardless.php';

// Uncomment this and change your keys over to go live - but make
// sure you test in sandbox first!
//GoCardless::$environment = 'production';

// Set config vars
$account_details = array(
  'app_id'        => 'KEY',
  'app_secret'    => 'KEY',
  'merchant_id'   => 'KEY',
  'access_token'  => 'KEY'
);

// Initialize GoCardless
GoCardless::set_account_details($account_details);



// The parameters for the payment
$subscription_details = array(
  'amount'           => ($_POST['grand_total']), // I want this to display the amount inside the variable grand_total
);

// Generate the url
//$subscription_url = GoCardless::new_subscription_url($subscription_details);
$subscription_url = GoCardless::new_bill_url($subscription_details);

// Display the link
echo '<a href="'.$subscription_url.'"><img src="https://s3-eu-west-1.amazonaws.com/gocardless/images/public/buttons/updated/pay-with-gc-small.png" width="200" height="32"></a>';
?>

<FORM><INPUT Type="button" VALUE="Cancel Order" onclick="javascript:window.location.href='http://www.mk18.web44.net'" /></FORM>


<?php
        }
        else
        {
            echo "<strong>Please make your payment directly to MK18</strong>";
        }
?>



<div class="spacer"></div>

<?php
    }
        }
        else
        {
?>



<form enctype="multipart/form-data" action='#order' method="post" onsubmit="return validate()" id="orderform" name="first-form">

<div class="enquiryform">

<div class="formfield"><label for="advert" class="formlabel">Advert</label><select name="advert" id="advert" onchange="calculate('');">
    <option value="">Please select the advert required</option>

    <option value="Back Cover Display Advert (Full Page)">Back Cover Display Advert (216mm x 154mm)</option>

    <option value="Inside Front Cover Display Advert (Full Page) - 1 issue">Inside Front Cover Display Advert (Full Page - 136mm x 190mm) - 1 issue</option>
    <option value="Inside Front Cover Display Advert (Full Page) - 2 issues">Inside Front Cover Display Advert (Full Page - 136mm x 190mm) - 2 issues</option>
    <option value="Inside Front Cover Display Advert (Full Page) - 3 issues">Inside Front Cover Display Advert (Full Page - 136mm x 190mm) - 3 issues</option>

    <option value="Inside Front Cover Display Advert (Half Page) - 1 issue">Inside Front Cover Display Advert (Half Page - 136mm x 93mm) - 1 issue</option>
    <option value="Inside Front Cover Display Advert (Half Page) - 2 issues">Inside Front Cover Display Advert (Half Page - 136mm x 93mm) - 2 issues</option>
    <option value="Inside Front Cover Display Advert (Half Page) - 3 issues">Inside Front Cover Display Advert (Half Page - 136mm x 93mm) - 3 issues</option>

    <option value="Inside Back Cover Display Advert (Full Page) - 1 issue">Inside Back Cover Display Advert (Full Page - 136mm x 190mm) - 1 issue</option>
    <option value="Inside Back Cover Display Advert (Full Page) - 2 issues">Inside Back Cover Display Advert (Full Page - 136mm x 190mm) - 2 issues</option>
    <option value="Inside Back Cover Display Advert (Full Page) - 3 issues">Inside Back Cover Display Advert (Full Page - 136mm x 190mm) - 3 issues</option>

    <option value="Inside Back Cover Display Advert (Half Page) - 1 issue">Inside Back Cover Display Advert (Half Page - 136mm x 93mm) - 1 issue</option>
    <option value="Inside Back Cover Display Advert (Half Page) - 2 issues">Inside Back Cover Display Advert (Half Page - 136mm x 93mm) - 2 issues</option>
    <option value="Inside Back Cover Display Advert (Half Page) - 3 issues">Inside Back Cover Display Advert (Half Page - 136mm x 93mm) - 3 issues</option>

    <option value="Full Page Display Advert (136mm x 190mm) - 1 issue">Full Page Display Advert (136mm x 190mm) - 1 issue</option>
    <option value="Full Page Display Advert (136mm x 190mm) - 2 issues">Full Page Display Advert (136mm x 190mm) - 2 issues</option>
    <option value="Full Page Display Advert (136mm x 190mm) - 3 issues">Full Page Display Advert (136mm x 190mm) - 3 issues</option>
        <option value="Full Page Display Advert (136mm x 190mm) - 6 issues">Full Page Display Advert (136mm x 190mm) - 6 issues</option>

    <option value="Half Page Display Advert (136mm x 93mm) - 1 Issue">Half Page Display Advert (136mm x 93mm) - 1 Issue</option>
    <option value="Half Page Display Advert (136mm x 93mm) - 2 Issues">Half Page Display Advert (136mm x 93mm) - 2 Issues</option>
    <option value="Half Page Display Advert (136mm x 93mm) - 3 Issues">Half Page Display Advert (136mm x 93mm) - 3 Issues</option>
       <option value="Half Page Display Advert (136mm x 93mm) - 6 Issues">Half Page Display Advert (136mm x 93mm) - 6 Issues</option>   

       <option value="Quarter Page Display Advert (66mm x 93mm) - 1 issue">Quarter Page Display Advert (66mm x 93mm) - 1 issue</option>          
      <option value="Quarter Page Display Advert (66mm x 93mm) - 2 issues">Quarter Page Display Advert (66mm x 93mm) - 2 issues</option>
       <option value="Quarter Page Display Advert (66mm x 93mm) - 3 issues">Quarter Page Display Advert (66mm x 93mm) - 3 issues</option>
       <option value="Quarter Page Display Advert (66mm x 93mm) - 6 issues">Quarter Page Display Advert (66mm x 93mm) - 6 issues</option>

    <option value="Eighth Page Display Advert (66mm x 44.5mm) - 2 issues">Eighth Page Display Advert (66mm x 44.5mm) - 2 issues</option>
    <option value="Eighth Page Display Advert (66mm x 44.5mm) - 3 issues">Eighth Page Display Advert (66mm x 44.5mm) - 3 issues</option>

</select>

<input type="hidden" name="ad_charge" id="ad_charge" value="" />

</div>

<div class="formfield"><div class="formlabel">Design Service <a href="#order" class="help"><img alt="Help" src="img/help.png">
<span>
Design Service (£20): If you don't already have an advert or image, then why not use our expertise to produce a design to help your business stand out from the rest. Our professional design service will produce an advert to your specifications. This also includes any changes to your advert during the course of your advertising package.
</span>
</a></div><input type="checkbox" value="I would like the MK18 Design Service" name="design_service" id="design_service" class="checkbox" onclick="calculate('orderform');" /><label for="design_service">I would like the MK18 Design Service (&pound;20+vat)</label>

<input type="hidden" name="design_charge" id="design_charge" value="" />

</div>

<div class="formfield"><div class="formlabel">Premium Page <a href="#order" class="help"><img border="0" alt="Help" src="img/help.png">
<span>
<p> If you would like to book a Premium page , please contact MK18 on 01280 860458 to check availability.</p>
</span>
</a></div><input type="checkbox" value="I would like a Premium Page" name="premium_page" id="premium_page" class="checkbox" onclick="calculate('orderform');" /><label for="premium_page">I would like to book a Premium Page</label>

<input type="hidden" name="premium_charge" id="premium_charge" value="" />

</div>

<div class="formfield"><label for="sub_total" class="formlabel">Sub-total</label><input type="text" name="sub_total" id="sub_total" value="0" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><label for="vat" class="formlabel">Vat</label>
  <input type="text" name="vat" id="vat" value="0" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><label for="total" class="formlabel">Total</label>
  <input type="text" name="total" id="total" value="0" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><label for="payment_method" class="formlabel">Payment Method</label><select name="payment_method" id="payment_method" onchange="calculate('');">

    <option value="">Please select your payment method</option>


<option value="PayPal">Credit Card (via Stripe)</option>

    <option value="Cardless">I will make a BACS payment direct to your bank account (via GoCardless)</option>

    <option value="Bank Transfer">I will send payment by cheque prior to the copy deadline date</option>

    </select><br />

Please note: if paying by Credit Card there is a Stripe fee of 2.4% + &pound;0.24

</div>

<div class="formfield">
  <label for="card_fee" class="formlabel">Stripe / GoCardless Fee</label>
  <input type="text" name="card_fee" id="card_fee" value="0" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><label for="grand_total" class="formlabel">Grand Total</label><input type="text" name="grand_total" id="grand_total" value="0" size="7" readonly class="plaintextbox" /></div>

<div class="formfield"><label for="start_issue" class="formlabel">Issue to start</label><input type="text" name="start_issue" id="start_issue" size="30" /></div>

<div class="formfield"><label for="artwork" class="formlabel">Artwork / Copy</label><select name="artwork" id="artwork">

    <option value="">Please select your artwork / copy status</option>

    <option value="Already_supplied">I have already supplied my artwork / copy</option>

    <option value="To_be_supplied">I will supply new artwork / copy</option>

    <option value="To_be_supplied">I would like to use the MK18 Design Service at a cost of &pound;20 plus VAT</option>

</select>

</div>

<div class="formfield"><label for="Name" class="formlabel">Name</label><input type="text" name="Name" id="Name" size="50" /></div>

<div class="formfield"><label for="Email_Address" class="formlabel">Email</label><input type="text" name="Email_Address" id="Email_Address" size="50" /></div>

<div class="formfield"><label for="phone" class="formlabel">Phone</label><input type="text" name="phone" id="phone" size="50" /></div>

<div class="formfield"><label for="address1" class="formlabel">Address Line 1</label><input name="address1" id="address1" type="text" size="50" /></div>

<div class="formfield"><label for="address2" class="formlabel">Address Line 2</label><input name="address2" id="address2" type="text" size="50" /></div>

<div class="formfield"><label for="city" class="formlabel">City/Town</label><input type="text" name="city" id="city" size="50" /></div>

<div class="formfield"><label for="county" class="formlabel">County/Province</label><input type="text" name="county" id="county" size="50" /></div>

<div class="formfield"><label for="postalcode" class="formlabel">Postal Code</label><input type="text" name="postalcode" id="postalcode" size="20" /></div>

<div class="formfield"><label for="notes" class="formlabel">Special notes</label><textarea rows="3" name="notes" id="notes" cols="50"></textarea></div>

<div class="formfield">
<div class="formlabel" style="width: 180px; font-weight: normal; font-size: 10px;">This "Captcha" device helps prevent automated programs and spammers from abusing this contact form. Please complete the game. If you would like a fidderent game, please click the reload button (<img src="img/reload.png" width="12" height="14" alt="reload button" style="margin: 0 1px; vertical-align: middle;" />) which is just below the game:</div>
 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'white'
 };
 </script>
<div style="float: right; width: 330px; text-align: left;">
<?php
 require_once('recaptchalib.php');
  $publickey = "6Lf9RucSAAAAAH9rHa-efXtHt9MNRtB3bc_JVfgE"; // you got this from the signup page
  echo recaptcha_get_html($publickey);
  ?>
  <?php
    if (isset($error)) echo $error;
?>
</div>
<div class="separator"></div>
</div>

<div class="formfield" style="text-align: center;"><input type="submit" name="submit" id="submit" value="Place Order" class="button" /></div>

<div class="spacer"></div>

<div class="paypalcenter" id="secureordering">

<img src="img/PaymentMethods/mastercard.png" width="53" height="35" alt="We accept Mastercard" style="margin: 0;" />

<img src="img/PaymentMethods/maestro.png" width="53" height="35" alt="We accept Maestro" style="margin: 0;" />

<img src="img/PaymentMethods/visa.png" width="53" height="35" alt="We accept Visa" style="margin: 0;" />

<img src="img/PaymentMethods/delta.png" width="53" height="35" alt="We accept Visa Delta" style="margin: 0;" />

<img src="img/PaymentMethods/solo.png" width="53" height="35" alt="We accept Solo" style="margin: 0;" />

<img src="img/PaymentMethods/americanexpress.png" width="53" height="35" alt="We accept American Express" style="margin: 0;" />

<img src="img/PaymentMethods/stripe.png" width="53" height="35" alt="Secure online payments by PayPal" style="margin: 0;" />

<img src="img/PaymentMethods/gocard.png" width="53" height="35" alt="Secure online payments by PayPal" style="margin: 0;" /><br />

<span class="smaller">Secure Online Ordering</span>

</div><!-- /secure ordering -->



<div class="separator"></div>



</div><!-- /enquiryform -->
</form>

<?php

}

?>
</div>
<!-- Oli EDIT Pasted .ordercontent into #mainContent -->

<!-- Oli EDIT End pasted .ordercontnet -->

<!-- menu begins -->

<!-- menu ends -->
<div class="separator"></div>



<hr />

<h3 class="titles2">Your Privacy</h3>

<p class="titles2 c4">MK18 are committed to protecting your privacy and we comply with the Data Protection laws applicable to the UK.</p>
<p class="titles2 c4">Unless otherwise advised, only MK18 will have access to the information you submit.</p>
<p class="titles2 c4">Your details will not be passed or sold to other companies for marketing or mailing purposes.</p>
<p class="titles2 c4">We do use the information we collect about you to process your requests and to provide you a more personalised service.</p>
<p class="titles2 c4">We monitor web site traffic patterns and usage to help us determine which aspects are of most importance to you and to develop the web site design and its layout.</p>
<p class="titles2 c4">We may also use the information we collect, occasionally, to tell you about our progress and changes to the MK18 web site. If you would rather not receive this information, please indicate your wishes when submitting on-line forms or you may send an e-mail to <a href="mailto:info@mk18.co.uk">info@mk18.co.uk</a>.</p>
<hr />

      <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

    <!-- end #footer --></div>
                </div>  
     </section>

---

我没有去过你的网站测试它，但我怀疑如果Recapatca不正确，你不会想死的，因为那样会在那个时候终止脚本。您最好将错误消息存储在变量中，然后将其输出到表单中

那么，您目前的情况是：

if (!$resp->is_valid)
    {
    die ("<p class='highlighted'><img src='images/recaptcha_logo.gif' width='96' height='56' alt='reCAPTCHA logo' style='float: left; margin: 0 5px 0 0;' /><br /><strong>SORRY</strong> - The reCAPTCHA words were not entered correctly. <br /><a href='javascript:history.back(1);'>Please return to the form</a> and try again.</p>");
    }

您可能需要的是：

if (!$resp->is_valid)
    {
    $error= "<p class='highlighted'><img src='images/recaptcha_logo.gif' width='96' height='56' alt='reCAPTCHA logo' style='float: left; margin: 0 5px 0 0;' /><br / <strong>SORRY</strong> - The reCAPTCHA words were not entered correctly. <br /><a href='javascript:history.back(1);'>Please return to the form</a> and try again.</p>";
    }

然后，在显示表单的位置：

<?php
    if (isset($error)) echo $error;
?>

让用户知道他们错了验证码

因此，最终代码可能遵循以下结构：

<section  id="order" class="section mtcon">
                <!-- heading -->
                <div class="row">
                    <h2 class="mtcon-title">Place an Order</h2>
                    <div class="span8 short-dec">
<div id="mainContent">
    <div class="ordercontent">
  <?php

$date = date('d-m-Y H:m:s',time());

if ($_POST)
{
    require_once('recaptchalib.php');
    $privatekey = "KEY";
    $resp = recaptcha_check_answer ($privatekey,
            $_SERVER["REMOTE_ADDR"],
            $_POST["recaptcha_challenge_field"],
            $_POST["recaptcha_response_field"]);
    if (!$resp->is_valid)
        {
        // CAPTCHA is invalid, store an error message and stop processing the $_POST
        $error= "<p class='highlighted'><img src='images/recaptcha_logo.gif' width='96' height='56' alt='reCAPTCHA logo' style='float: left; margin: 0 5px 0 0;' /><br / <strong>SORRY</strong> - The reCAPTCHA words were not entered correctly. <br /><a href='javascript:history.back(1);'>Please return to the form</a> and try again.</p>";
        }
    else 
        {
            // <snipped> This is where you process the form, send the email etc., as before
        }
}
// First visit to the page or there was an error with the CAPTCHA
// NOTE: We can't use the else anymore as we might want to process the top section AND this section
if (!$_POST || isset($error))
    {
    // <snipped> the original form
    }

?>
</div>
<!-- ... and the rest of the page ... -->

---

这是一个php问题，不是recaptcha，当出现php错误时，页面发送不完整，内容在php错误发生前发送，php错误后内容消失。 所以你的php代码有问题，检查一下。另外，在浏览器和Scrolldown中检查页面的源代码，您将看到在发生php错误的地方，页面被剪切并以不完整的方式发送

---

希望这有帮助。

那么还有更好的吗？那没用。我把代码放在u建议的地方，结果是recaptcha接受了一切。我已经用你建议的代码更新了我的原始帖子，基本上我们需要$resp->is_有效的检查来决定我们通过页面剩余部分的路线。如果是好的，我们希望发送电子邮件等，否则我们希望再次显示原始表单，让用户有机会输入正确的验证码。因此，在is_valid检查之后，我们需要一个else，然后进一步向下更改代码，以发现设置了$error并重新显示原始表单。我会把你需要的代码添加到我的原始答案中。