Recaptcha导致部分页面加载

时间:2013-10-02 14:56:01

标签: javascript php html recaptcha

我在我的网站上使用Google重新验证码。当代码正确时,recaptcha会起作用。页面刷新并向下滚动到正确的位。

如果未正确输入代码,页面将“中断”。它倾向于向下滚动到正确的部分,并且recaptcha会停止页面加载的其余部分。

用于recaptch的代码是标准的PHP代码 - https://developers.google.com/recaptcha/docs/php?csw=1

网站就在这里 - 如果您去订购,请填写表格,并使用正确和错误的代码进行尝试,这样可以让您更好地了解我的意思。

如果您需要网站上的任何代码,请说出来。

我已将整个订单页面部分放在下面,因为大多数代码在页面运行时都没有显示。

网站 - 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>

2 个答案:

答案 0 :(得分:0)

我没有去过您的网站进行测试,但我怀疑您不希望die()如果reCAPATCHA不正确,因为那时只会终止脚本。您可能最好将错误消息存储在变量中,然后将其输出到表单中?

所以,你现在在哪里:

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;
?>

让用户知道他们的CAPTCHA错了。

所以最终的代码可能遵循这个结构:

<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 ... -->

答案 1 :(得分:0)

这是一个php问题而不是recaptcha,当有错误时页面发送不完整,内容是在发生php错误之前发送的,在php错误之后内容消失了。 所以你的PHP代码有问题,检查一下。还要检查浏览器中页面的源代码并滚动ldown,你会看到发生php错误的地方,页面被剪切并发送,就像那个没有完成。

希望这会有所帮助。