使用JQuery和Ajax发布形式

Question

我想使用Ajax后我的形式

我想单选按钮来做到这一点（有没有提交布顿）

所以点击一个单选按钮将导致提交或进行后期形式

我的PHP页面需要知道的单选按钮的点击

是我的代码正确的名字吗？因为它不起作用，我不知道为什么？

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

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

首先，在标签上的ID可以只存在一个标记，它是一个唯一的标识符。这将是你的第一个问题jQuery将抓住它使用$("#someId")找到的第一个元素。

更改为一个类，这应该有所帮助。即。 $(".someClass")或者根本不使用类，并且做类似$("input:radio").click...

对于数据，您非常接近，但我认为这不会很有效，因为您需要将数据作为键/值对发送。您可以使用查询字符串或直接向上的json对象来实现此目的。例如：

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

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

这是您要查找的this。 this被设置为任何单选按钮被点击，现在你再次硬编码到ID＃option1的第一个单选按钮，这是错误的。

此外，请考虑查看$.get和$.post函数，因为它们比$ .ajax稍简单。它们也更简洁，因此导致更少的代码来实现相同的事情。