虽然加载了ReCaptcha,为什么不显示?

时间:2016-05-18 01:30:55

标签: javascript php jquery html

我有两个HTML表单,ReCaptcha showA在一个,但不是另一个。两者的代码完全相同。可能导致这个问题的原因是什么?

Form-1(ReCaptcha显示在选择文件下方。

Form-2(显示在这里)

PHP

require_once  '/home/deje/public_html/writers-tryst/ReCaptcha/autoload/autoload.php';
// Register API keys at https://www.google.com/recaptcha/admin
$siteKey = '6LffIB8TAAAAACanI10YyJ-Rmw8CAKobwRDqr7Yr';
$secret =  '6LffIB8TAAAAAEtF8obobrsoyn7T5BSL9Ewr2rFY';
// reCAPTCHA supported 40+ languages listed here: https://developers.google.com/recaptcha/docs/language
$lang = isset($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2) : "en";;

if (isset($_POST['g-recaptcha-response'])) {
    $recaptcha = new \ReCaptcha\ReCaptcha($secret);
    $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

    if (!$resp->isSuccess()) {
        $errors = $resp->getErrorCodes();
        echo 'err=' . $errors;
    } else echo "no errors";
}

echo json_encode(array("sitekey" => "$siteKey", "lang" => "$lang"));
/*
$str1 = "'<div class='g-recaptcha' data-callback='recaptchaCallback' data-sitekey='$siteKey'></div>";
$str2 = "<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=$lang;</script>'";
echo $str1 . $str2;
*/

JS

$(function () {
    $.ajax({
        url: 'php/recaptcha.php',
        type: 'post',
        dataType: 'json',
        cache: false
    }).done(function (result, success, xhr) {
        var script = "<script type='text/javascript' src='https://www.google.com/recaptcha/api.js?hl=" + result.lang + "'</script>";
        var div = "<div class='g-recaptcha' data-callback='recaptchaCallback' data-sitekey= " + result.sitekey + "></div>"
        $("#recaptcha-elements").append(div + script)
    }).fail(function (xhr, desc, err) {
        var msg = formatError("Initialize recaptcha error: ", err, xhr.responseText);
        showMessage(0, msg);
        console.log(msg);
    });
});

ReCaptcha回调

function recaptchaCallback() {
    setTimeout(function() { $("#recaptcha-elements").css({ "display": "none" })}, 10000);
    $('.btn.btn-default').removeAttr('disabled');
};

表单1 HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Writer's Tryst - Writers Form</title>
        <link type="text/css" href="css/writers.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container center_div">
            <!--<form id="form-writers" class="form-horizontal well">-->
            <form action="php/writers.php" method="post" enctype="multipart/form-data" target="upload-target" onsubmit="startUpload();" >
                <h1>Writers</h1>
                <p>
                    <input id="title" name="title" class="form-control"  placeholder="Title" required autofocus="true" />
                </p>
                <p>
                    <label for="work-type" class="fixed50">Type:</label>
                    <select id="work-type" name="work-type">
                        <option value="fiction">Fiction</option>
                        <option value="non-fiction">Non-Fiction</option>

                                         <option value="screenplay">Screenplay</option>
                        <option value="play">Play</option>
                    </select>
                </p>
                <p>
                    <p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a></p>
                    <label for="genre"  class="fixed50">Genre:</label>
                    <select id="genre" name="genre">
                    </select>
                </p>
                <p>
                    <label for="subgenre" class="fixed50">Sub-Genre:</label>
                    <select id="subgenre" name="subgenre">`
                        <option value="-1">None</option>
                    </select><br/>
                </p>
                <p>
                    <label for="nbrPages" class="fixed50">Number of pages:</label>
                    <input id="nbrPages" name="nbrPages" required style="width: 48px" placeholder="Pages" /><br/>
                </p>
                <p>For a limied time, writers can upload their sysnopsis or query letterr for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
                <div id="tips">The objective of a sysnopsis or query letter is to entice enablers into requesting your manuscript. 
                                It must be concise and to the point, no more than two pages and, of course very well writtehref=n. Remember, brevity is the sole of wit.
                                <a href="uploads/ron/3870379533.pdf" target="_blank">Sample Query Letter</a>

                </div>
                <div class="form-group">
                    <p id="file-warning">Your synopsis or query letter must be a PDF file.
                    <a target="_blank" href="https://www.freepdfconvert.com/" target="_blank">Free file conversion to PDF</a></p>
                </div>
                <div class="form-group">
                    <label for="file2upload">PDF to Upload</label>
                    <input id="file2upload" name="file2upload" type="file" required value="File to upload" />
                </div>
                <div id="recaptcha-elements"></div>
                <div class="form-group">
                    <button type="submit" id="writers-submit" class="btn btn-default">Submit</button>
                </div>
                <input id="userid" name="userid" type="hidden" />
                <iframe id="upload-target" name="upload-target" src="#" ></iframe>                 
            </form>
            <input id="filesize-limit" name="filesize-limit" type="hidden" value="2250000" /> <!--document size limited to 2,250,000-->
            <script src="js/recaptcha.js"></script>
            <script src="js/genres.js"></script>
            <script src="js/writers.js"></script>
        </div>
    </body>
</html>

0 个答案:

没有答案