I’m trying to get the results from a form (with nearly a hundred of different options selected) to update without a page refresh. I’ve got it working with the page reloading but it doesn’t work otherwise and I’m not sure what I’m doing wrong.
The form action is set to to the page (although I’ve tried it with # as well) and there’s a
in the page but it’s not changing to show the results.
This is the code I’m using to try and get it to work:
It looks like what’s probably happening is that the form is submitting and the page is refreshing before your AJAX code completes.
Probably what you want to do is attach your code to the ‘submit’ event of the form rather than the ‘click’ event of the submit button, as this will make sure it works when the form is submitted by pressing the enter key. You then need to stop the form’s default action from happening, so that the page won’t refresh and your JS code can submit the form data via AJAX.
$('#myFormId').on('submit', function(e) {
e.preventDefault // prevent form submission
$.ajax({
url:'/results/index.php',
data: $(this).serialize(), // serialize form data and attach to request
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
I was going to say (and @fretburner beat me to it) that it sounds like the default submit is happening (which doesn’t refresh the page, it redirects to itself unless the attribute action has value.)
One method is as @fretburner suggests. Another would be to not use a submit button to submit the form, rather use a standard button and give it an onclick to evoke the AJaX.
That makes sense that it was submitting without having any data. Ideally I’d like it to submit it after each checkbox or button is ticked, I changed the code to this, but it’s still not working.
$('.filter_link').on('click', function(e) {
e.preventDefault // prevent form submission
$.ajax({
url:'/results/index.php',
data: $(this).serialize(), // serialize form data and attach to request
type:'POST',
success:function(results) {
$(".result").html(results);
}
});
});
.filter_link being the class of the buttons and checkboxes
I changed the code and the form id but now nothing happens. What should happen is when somebody clicks a button or checkbox the form is submitted with all of the values that have previously been ticked.
This is for the form:
<script type="text/javascript">
$('#filter_form').on('click', function(e) {
e.preventDefault // prevent form submission
$.ajax({
url:'/results/filter.php',
data: $(this).serialize(), // serialize form data and attach to request
type:'POST',
success:function(results) {
$(".result_div").html(results);
}
});
});
</script>
What do you expect to happen?
When you click AJAX request should be sent in background so you can’t see any changes at the moment.
Do you receive data in your filter.php?
I though if I did it that way the form would be sent whenever anybody clicks a button or checkbox, I changed the code to this but still nothing happens:
<script type="text/javascript">
$('#filter_form').on('submit', function(e) {
e.preventDefault // prevent form submission
$.ajax({
url:'/results/filter.php',
data: $(this).serialize(), // serialize form data and attach to request
type:'POST',
success:function(results) {
$(".result_div").html(results);
}
});
});
</script>
Because the OP wants the form to be saved each time an input is changed.
@coding_noobie just to check I’ve understood correctly, your form consists of a lot of checkboxes and you want it to save back to the server any time one of them is changed? Are there any other form input types (text inputs, select boxes etc)? And does this mean that the form doesn’t have a submit button?
Please don’t kill me, that was what I originally wanted to do but now my boss has decided she wants a submit button so I’m guessing this will work now?
<script type="text/javascript">
$('#filter_form').on('submit', function(e) {
e.preventDefault // prevent form submission
$.ajax({
url:'/results/filter.php',
data: $(this).serialize(), // serialize form data and attach to request
type:'POST',
success:function(results) {
$(".result_div").html(results);
}
});
});
</script>
One question though, the results are taking a long to get arrive so is it possible to have an image show while the user is waiting?
Thank you so much for your help and I’m really sorry to be a pain and change it half way through.
Sure, add a hidden spinner image to your page, and then show it before you start your ajax request. Add a complete callback to your ajax call to hide the spinner again - this is called after the request is finished.
$('#filter_form').on('submit', function(e) {
e.preventDefault
$('.loading-image').show(); // Show the loading spinner
$.ajax({
url:'/results/filter.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result_div").html(results);
},
complete: function() {
$('.loading-image').hide(); // Hide the image again after request completed
}
});
});
I’ve changed the form so that the coinI’ve now got this but all it does is refreshes the page without even refining the results. It doesn’t submit the form in the background and the results aren’t updated.
This is what I’ve got:
<script type="text/javascript">
$('#filter_form').on('submit', function(e) {
e.preventDefault
$('.loading-image').show(); // Show the loading spinner
$.ajax({
url:'/results/filter.php',
data: $(this).serialize(),
type:'POST',
success:function(results) {
$(".result_div").html(results);
},
complete: function() {
$('.loading-image').hide(); // Hide the image again after request completed
}
});
});
</script>
ad this is the first line of the form: <form id="filter_form" method="post" action="#">
