Question

I am having two problems.

First: Trying to submit this form using jquery. When I hit submit nothing happens, no data is submited but everything else works.

Second: When I click submit the message appears and then when I hit close the box closes,
how can I reload the popup div so that when the link is clicked again it doesn’t show
the message or the last action.

<script type="text/javascript">
$(document).ready(function(){ 
    $('#popbox').click(function(){
        $('#form').submit(function(){
            $.post('url.php', function(data){
                var message = 'some text';
                $('#popbox').html('message');
            });
            return false;
        });
        $('#closeForm').click(function(){
            $('#popbox').fadeOut(); 
        });
    }); 
}); 
</script> 

HTML Code:

<div id="popbox">
    <form id="form" method="post" action="" >
        <input type="radio" name="option" value="text1" />text1 <br>
        <input type="radio" name="option" value="text2" />text2<br>
        <br><input type="submit" name="sendData" value="send"/>
    </form>
    <div style="margin:auto; border:1px gray groove ; padding:2px 7px 2px 5px; clear:both; width:30px;border-radius:5px;"><a id="closeForm">close</a></div>
</div>

Answer 1

You have to add the forms data to the AJAX request. To do this we can use jQuery’s .serialize() function:

        $.post('url.php', $(this).serialize(), function(data){
            var message = 'some text';
            $('#popbox').html('message');
        });

• Docs for .serialize(): http://api.jquery.com/serialize
• Docs for $.post(): http://api.jquery.com/jquery.post