en utilisant JQuery et Ajax pour poster un formulaire

Question

Je veux utiliser ajax pour poster ma forme

Je veux radiobuttons de le faire (il n'y a pas soumettre buton)

si cliquant sur un bouton radio provoquera une formulaire à présenter ou être post

ma page php doit connaître le nom du bouton radio cliqués

est mon code correct? Parce que ça ne marche pas et je ne sais pas pourquoi?

<div id="Q1"> 
<form id="Question1" method='post'> 
<br /> 
<P> The sky color is.. 
</P><img border="0" src="images/wonder.png" width="94" height="134"/><br /><br /><br /> 
<input type="radio" id="option1" name="answer[1]" value="correct!"/> blue 
<br /> 
<input type="radio" id="option1" name="answer[1]" value="false!"/> red 
<br /> 
<input type="radio" id="option1" name="answer[1]" value="false!"/> green 
<br /> 
<input type="radio" id="option1" name="answer[1]" value="false!"/> white 
<br /> 
<br /> </Form> 
<!-- <p id="greatp" style="display: none;"> GREAT !!<br /><br /><br /><br /><br /><br /><br /></p> --> 
<img border="0" src="images/welldone3.png" width="230" height="182" id="greatp" style="display: none;"/> 
<!-- <p id="sorryp" style="display: none;"> Sorry !!<br /><br /><br /><br /><br /><br /><br /></p> --> 
<img border="0" src="images/failed3.png" width="230" height="182" id="sorryp" style="display: none;"/> 
<img src="images/false2.png"id="myImage1"style="display: none;"/> 
<img src="images/correct2.png"id="myImage2"style="display: none;"/> 
<!-- <input type= "submit" onclick="Next1()" value="Next"/> --> 
<input type="image" src="images/next.png" name="image" width="80" height="30" onclick="Next1()"> 
</div> 

morue jquery:

<script> 
$(document).ready(function(){ 
    $("#option1").click(function() { 

    var answer= $("#option1").value; 

    var fff= $("#option1").name; 

     $.ajax({ 
      type: "POST", 
      url: "page2.php", 
      data: fff, 
      success: function(){ 
       if(answer=='correct!') 
        { 
        $('#greatp').show(); 
        $('#myImage2').show(); 
        $('#Question1').hide(); 

        } 
       else 
        { 
         $('#sorryp').show(); 
         $('#myImage1').show(); 
         $('#Question1').hide(); 
        } 


      } 
     }); 
    return false; 
    }); 
}); 


</script> 

Answer 1

Tout d'abord, une carte d'identité sur une étiquette ne peut exister pour une étiquette, il est un identifiant unique. Ce serait votre premier problème. JQuery attrapera le premier élément trouvé en utilisant $("#someId").

Changez cela en classe et cela devrait aider. c'est à dire. $(".someClass") ou n'utilise pas de cours du tout et faire quelque chose comme $("input:radio").click...

Pour les données, vous êtes assez proche, mais je pense que ne fonctionnera pas tout à fait que vous avez besoin d'envoyer les données comme une paire clé/valeur . Vous pouvez y parvenir en utilisant une chaîne de requête ou simplement un objet json direct. Quelque chose comme:

var theData = { 
name: $(this).attr("name"), 
value: $(this).val() 
}; 

$.ajax({ 
    data: theData 
    ... 
}); 

c'est le this que vous recherchez. this est défini sur le bouton radio qui est cliqué, maintenant vous êtes en cours de codage à nouveau sur le premier bouton radio avec ID # option1 qui est faux.

En outre, pensez à regarder les fonctions $.get et $.post comme leur légèrement plus simple que le $ .ajax. Ils sont aussi plus concis donc cela conduit à moins de code pour atteindre la même chose.