jQuery选择器有效，但不能通过$ post

Question

I have a jquery script that takes the value of the selected radio button and post it to another php script to be processed. I suspect there is something wrong with the selector, but I used

$("input[name='act']:checked").val()

in the firebug console, and it returned the correct value.

Also, I used an alert to show a popup of the selected value and it returned the correct value using:

alert($("input[name='act']:checked").val());

The code seems solid as well, as I created a "test" field to post, and the correct value showed up.

Thanks for your help!

jquery code:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      $("#driver").click(function(event){
        alert($("input[name='act']:checked").val());

                 $('#mainarea').hide('fast');
                 $('#mainarea').empty();

          $.post(
           "facultyoptions.php",
           {
                act: $("input[name='act']:checked").val(),
                test: 'test'
           },
            function(data) {
                $('#mainarea').empty();
                $('#mainarea').append(data);
                $('#mainarea').show('slow');
             }

          );
      });
   });



   </script>

HTML

<form id="facultyportal" name="facultyportal" method="post" action="facultyoptions.php">

<input type="radio" id="blank" name="act" value="blank"/>
</br>
<input type="radio" id="copy" name="act" value="copy" />
</br>
<input type="radio" id="temp" name="act" value="temp"/>
</br>

<input type="button" id="driver" class="btn btn-danger" value="Submit" />

</form>

facultyoptions.php

<?php

echo 'HI</br>';

echo $_POST['act'];

echo $_POST['test'];

?>

Results:

Hi
Test

Answer 1

You need to return false at the end of the click handler, or use event.preventDefault() at the start of the handler.

Otherwise you are doing a normal submit which refreshes the pages.

So

  $(document).ready(function() {
      $("#driver").click(function(event){
            //alert($("input[name='act']:checked").val());

            $('#mainarea').hide('fast');
            $('#mainarea').empty();

            $.post("facultyoptions.php",{
                  act: $("input[name='act']:checked").val(),
                  test: 'test'
                },function(data) {
                   $('#mainarea').empty();
                   $('#mainarea').append(data);
                   $('#mainarea').show('slow');
                });

            return false;
      });
   });

oh, and remove the alert as that might interfere with your attempt to stop the normal submit.

---

Update for completeness

After a discussion in the comments, we identified the problem to the .empty() call.

The relevant input element was inside the #mainarea element and so it was getting removed before accessing it..

Answer 2

You need to not submit the form

So attach to the submit event and use preventDefault - no need to append after empty

$(function() {
  $("#facultyportal").on("submit",function(event){
    event.preventDefault(); // stop submission
    var act = $("input[name='act']:checked").val();// save before emptying
    $('#mainarea').empty().hide('fast');
    $.post("facultyoptions.php",{act: act,test: 'test'},
      function(data) {
        $('#mainarea').html(data).show('slow');
    });
  });
});