Validation de formulaire avec Ajax et PHP - retourner une variable de PHP à utiliser dans la fonction javascript

Question

J'utilise Ajax via jQuery pour la première fois. J'ai une entrée html et quand un utilisateur clique dessus et tape quelque chose et ensuite le focus se brouille, j'utilise jquery pour appeler un script PHP pour valider l'entrée de l'utilisateur. J'essaye de comprendre comment prendre la variable dans PHP et la comparer dans jQuery. S'il vous plaît donnez-moi un conseil

Maintenant, lorsque la mise au point est floue, les deux images sont visibles.

Merci d'avance!

Le html:

<label for="FirstName">First Name</label> 
    <input type="text" name="FirstName" title="First Name Here" id="firstName" /> 
    <img class="thumb" id="up" src="Images/thumbs_up_48.png" /> 
    <img class="thumb" id="down" src="Images/thumbs_down_48.png" /> 

Le CSS

img.thumb { 
visibility:hidden; 
height:0; 
width:0; 
} 
img.thumbV { 
visibility:visible; 
height:20px; 
width:20px; 
float:right; 
}img.thumbNV { 
visibility:visible; 
height:20px; 
width:20px; 
float:right; 
} 

Le jquery:

$(document).ready(function() { 
//my attempt at ajax using jQuery 
$("#firstName").change(function() { 
    sendValue($(this).val()); 
    $("img").removeClass('thumb').addClass('thumbV'); 
}); 


function sendValue(str) { 
$.post("ajax.php", {sendValue: str}, 
function(data) { 
    if(data.returnValue === true) { 
    $("#up").removeClass('thumb').addClass('thumbV'); 
    } 
    else { 
    $("#down").removeClass('thumb').addClass('thumbNV'); 
    } 
    //$("#ajax").html(data.returnValue); 
}, "json"); 
} 

}); 

et PHP:

<?php 

$choice = false; 

if(isset($_POST['sendValue'])) { 
$value = $_POST['sendValue']; 
if(preg_match('/^[a-zA-Z]$/', $value)) { 
    $choice = true; 
} 

} 

echo json_encode(array("returnValue"=>$choice)); 

?> 

Answer 1

Je garderais ce que tu as en ce moment.

Pour le moment, je ne vois pas s'il existe une meilleure solution, mais ce que vous avez maintenant semble correct.

Answer 2

Il y a une ligne qui fait un peu bizarre:

$("img").removeClass('thumb').addClass('thumbV');

signifie que vous retirez le pouce à toutes les balises de classe et ajoutez la classe thumbV, les rendant visibles. ce qui signifie essentiellement que l'un d'eux a class="thumbNV thumbV" et l'autre a class="thumbV"

À moins que vous avez l'intention d'utiliser les classes pour quelque chose d'autre, je recommande de faire simplement

img.thumb { display: none; height:20px; width:20px; }

puis utilisez simplement $('#up').hide() et $('#down').show() méthodes de jQuery.