Reputation: 116
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>
Upvotes: 0
Views: 2049
Reputation: 76003
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');
});
.serialize()
: http://api.jquery.com/serialize$.post()
: http://api.jquery.com/jquery.postUpvotes: 1