使用JQuery和Ajax发布表单

I want to use ajax to post my form

我想用ajax发布我的表单

I want radiobuttons to do this(there is no submit buton)

我想radiobuttons这样做（没有提交buton）

so clicking a radiobutton will cause a form to be submitted or be post

因此，单击一个单选按钮将导致表单被提交或发布

my php page needs to know the name of the radio button clicked

我的php页面需要知道单击的单选按钮的名称

is my code correct? cuz it doesn't work and I don't know why?

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

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

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>

1 个解决方案

#1

First off, an ID on a tag can only exist for one tag, it's a unique identifier. That would be your first problem jQuery will grab the first element it finds using $("#someId").

首先，标签上的ID只能存在于一个标签中，它是唯一的标识符。这将是你的第一个问题，jQuery将使用$（“＃someId”）获取它找到的第一个元素。

Change that to a class and that should help. ie. $(".someClass") or don't uses classes at all and do something like $("input:radio").click...

将其更改为类，这应该有所帮助。即。 $（“。someClass”）或根本不使用类并执行类似$（“input：radio”）的操作。单击...

For the data, you're pretty close, but I think that won't quite work as you need to send the data as a key/value pair. You can achieve this using a query string or just a straight up json object. Something like:

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

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

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

it's the this that you're looking for. this is set to whatever radio button is clicked, right now you're hardcoding again to the first radio button with ID #option1 which is wrong.

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

Also, consider looking at the $.get and $.post functions as their slightly simpler than the $.ajax. They're also more terse so it leads to less code to achieve the same thing.

另外，考虑将$ .get和$ .post函数看作比$ .ajax稍微简单一些。它们也更简洁，因此可以减少代码来实现同样的目标。

#1