この主題に関する多くのトピックにもかかわらず、私の問題を解決する答えがなかったので、私は助けを求めるためにここに来ました:
原則は簡単です: キャプチャを含む div を含む以下のフォームがあり、HTML にはキャプチャをロードするスクリプトも含まれています。
<form id="contactformpage">
<div class="messages"></div>
<div class="form-group row">
<label for="societepage" class="col-sm-6 col-form-label">Société</label>
<div class="col-sm-6 champ">
<input type="text" name="societe" class="form-control" id="societepage" placeholder="Nom de la société"
aria-describedby="indicsocietepage" required pattern =".{1,100}">
<small id="indicsociete" class="form-text text-muted"> * Obligatoire </small>
</div>
</div>
<div class="form-group row">
<label for="adressepage" class="col-sm-6 col-form-label">Adresse</label>
<div class="col-sm-6 champ">
<input type="text" name="adresse" class="form-control" id="adressepage" placeholder="Adresse">
</div>
</div>
<div class="form-group row">
<label for="codepostaletvillepage" class="col-sm-6 col-form-label">Code postal & ville</label>
<div class="col-sm-6 champ">
<input type="text" class="form-control" name="codepostaletville" id="codepostaletvillepage"
placeholder="Code postal & ville">
</div>
</div>
<div class="form-group row">
<label for="contactpage" class="col-sm-6 col-form-label">Nom du contact</label>
<div class="col-sm-6 champ">
<input type="text" class="form-control" name="contact" id="contactpage" placeholder="Nom du contact">
</div>
</div>
<div class="form-group row">
<label for="telephonepage" class="col-sm-6 col-form-label">Téléphone</label>
<div class="col-sm-6 champ">
<input type="tel" class="form-control" name="téléphone" id="telephonepage" placeholder="Numéro de téléphone"
aria-describedby="indictelephonepage" required pattern="^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$">
<small id="indictelephonepage" class="form-text text-muted"> * Obligatoire </small>
</div>
</div>
<div class="form-group row">
<label for="mailpage" class="col-sm-6 col-form-label">Adresse mail</label>
<div class="col-sm-6 champ">
<input type="email" class="form-control" name="mail" id="mailpage" placeholder="Entrez votre adresse mail"
aria-describedby="indicmailpage" required>
<small id="indicmailpage" class="form-text text-muted"> * Obligatoire </small>
</div>
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label" for="selecmarque" aria-describedby="indicmarquepage"> Marque du véhicule
</label>
<div class="col-sm-6 champ">
<select class="form-control" name="marque" style="height:20px;padding-bottom:0;padding-top:1;"
onchange="generechoixmodele('selecmarque','apreschoixmarquepage','apreschoixmodelepage','nommodelepage','choixmodelepage','choixtypepage');"
id="selecmarque">
<option selected> Séléctionnez </option>
</select>
<small id="indicmarquepage" class="form-text text-muted"> * Obligatoire </small>
</div>
</div>
<div class="form-group row" id="apreschoixmarquepage" style="display:none;">
<!-- Liste déroulante qui apparait après le choix de la marque -->
<label class="col-sm-6 col-form-label" for="apreschoixmarquepage" aria-describedby="indicmarque"
id="nommodelepage"></label>
<div class="col-sm-6 champ">
<select class="form-control" name="modele" style="height:20px;padding-bottom:0;padding-top:1;"
id="choixmodelepage"
onchange="generechoixtype('selecmarque','choixmodelepage','apreschoixmodelepage','nomtypepage','choixtypepage');">
</select>
</div>
</div>
<div class="form-group row" id="apreschoixmodelepage" style="display:none;">
<!-- Liste déroulante qui apparait après le choix du modèle -->
<label class="col-sm-6 col-form-label" for="apreschoixmodelepage" aria-describedby="indicmarque"
id="nomtypepage"></label>
<div class="col-sm-6 champ">
<select class="form-control" name="type" style="height:20px;padding-bottom:0;padding-top:1;" id="choixtypepage">
</select>
</div>
</div>
<p> Je souhaite recevoir les catalogues suivants (dynamique)</p>
<div id="choixcataloguepage">
</div>
<div class="form-group row">
<label class="col-sm-6 col-form-label" for="commentairepage">Commentaire</label>
<div class="col-sm-6 champ">
<textarea class="form-control" name="commentaire" id="commentairepage" rows="1"></textarea>
</div>
</div>
<div class="form-group row" style="margin-top:5px;">
<label for="captchapage" class="col-sm-6 col-form-label" style="margin-top:10px;">Captcha</label>
<div class="col-sm-6 champ captcha" >
<div class="g-recaptcha" id="captchapage" data-sitekey="6LfYqq8UAAAAAGi_ImKvNYvAhNLysLCf9SoD3gZd" data-badge="inline" style="transform:scale(0.74);-webkit-transform:scale(0.74);transform-origin:0 0;-webkit-transform-origin:0 0;"> </div>
</div>
</div>
<input type="submit" class="btn" id="submitpage">
</form>
次に、このフォームの検証中に、フォームに入力されたデータと、Google によって取得されたキャプチャの応答 ("grecaptcha.getResponse ()") を取得し、Ajax 要求を含む php ページでそれらを送信します。 :
$(document).ready(function(){
$("#contactformpage").submit(function(e){
e.preventDefault();
if (document.getElementById("selecmarque").value=="Séléctionnez") {
alert("Séléctionnez une marque (Obligatoire)");
}
else {
var cases = document.getElementById("contactformpage").getElementsByClassName("form-check");
var catalogues = [];
for (var i = 0; i < cases.length; i++) {
if ($(cases[i].firstChild).prop("checked")==true) {
catalogues[i]=cases[i].lastChild.innerHTML;
}
else {
}
}
$.ajax({
type: "POST",
url: 'sendform.php',
data: {
societe : $("#societepage").val(),
adresse : $("#adressepage").val(),
codepostaletville : $("#codepostaletvillepage").val(),
contact : $("#contactpage").val(),
telephone : $("#telephonepage").val(),
mail : $("#mailpage").val(),
marqueclient : $("#selecmarque").val(),
modeleclient : $("#choixmodelepage").val(),
typeclient : $("#choixtypepage").val(),
catalogues : JSON.stringify(catalogues),
commentaire : $("#commentairepage").val(),
captcha: grecaptcha.getResponse()
},
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contactformpage').find('.messages').html(alertBox);
// empty the form
$('#contactformpage')[0].reset();
grecaptcha.reset();
}
},
error: function(xhr, status, error){
var errorMessage = xhr.status + ': ' + xhr.statusText
alert('Error - ' + errorMessage);
}
})
}
});
});
これは、キャプチャの回答を取得するphpスクリプトです。この回答に従って、タスクまたはその他を実行します。
try {
if (isset($_POST['captcha'])) {
$captcha = $_POST['captcha'];
$privatekey='6LfYqq8UAAAAAJHL90FXgdCjEIDYtY2HhkGw7sbs';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array(
'secret' => $privatekey,
'response' => $captcha,
'remoteip' => $_SERVER['REMOTE_ADDR']
);
$curlConfig = array(
CURLOPT_URL => $url,
CURLOPT_POST => true,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_POSTFIELDS => $data
);
$ch = curl_init();
curl_setopt_array($ch, $curlConfig);
$response = curl_exec($ch);
curl_close($ch);
$jsonResponse = json_decode($response);
var_dump($response);
if ($jsonResponse->success === true) {
}
else {
throw new \Exception('Vous êtes un robot');
}
}
}
私の問題は、スクリプトが常に条件を検証することです$jsonResponse->success === true.aを作成しようとしましたがvar_dump($jsonResponse)、これは常にnull. Ajax リクエストを実行したときに送信されるデータは次のとおりです。
