используя 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 Cod:

<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

Во-первых, идентификатор тега может существовать только для одного тега, это уникальный идентификатор. Это будет вашей первой проблемой. 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. Они также более лаконичны, поэтому для достижения того же результата нужно меньше кода.