I have an RSVP box on my website where I want people to click the tick or cross image depending on whether they are coming or not. I currently have a PHP system that updates a SQL database but it reloads the page.
I have tried this code:
$(document).ready(function() {
var options = {
url: 'process.php',
type: 'post',
data: 'attending',
success: success
};
// bind to the form's submit event
$('.attending').click(function {
$(this).ajaxSubmit(options);
return false;
});
function success(responseText, $form) {
$(".attending").hide();
$(".success").fadeIn();
}
});
The RSVP buttons are links with tags
But I am strugling with this, any help would be appreciated!
Thanks
The ajaxSubmit function is part of the jquery forms plugin ... are you including that plugin with the page? (You didn't tag the question with jquery-forms-plugin, so I'm guessing no) If this is your first go at jQuery ajax, I'd recommend using the .ajax method first, even though it's more lines of code, to get an understanding of what's going on there.
You missed the brackets after declaring the function in your click handler, try this:
// bind to the form's submit event
$('.attending').click(function() {
$(this).ajaxSubmit(options);
return false;
});
Or better yet:
// bind to the form's submit event
$('.attending').click(function(e) {
e.preventDefault();
$(this).ajaxSubmit(options);
});
Related
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});
I would like to ask help on jQuery Mobile plugin conflict on my main scripts. Im trying to create another version of the website, which is the mobile version with a bought template that uses jQuery Mobile. Still the site is in CodeIgniter framework based from the web version.
In my main scripts, I have a preventDefault() function on every form submit to display the validation errors. Then when I migrated the site I'm working on with the bought Mobile Template, it seems not to listen to the preventDefault(). whenever I submit a form, it will show validation errors but will change the page seconds after before I could read it. It refreshes the site.
My script looks something like the code below. This works on my web version. >>>
$('form#frm-signup-updates').submit(function(e){
e.preventDefault();
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
});
Try return false to block submit.
$('form#frm-signup-updates').submit(function(e){
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
return false;
});
UPDATE:
Well, I checked source code of jQuery Mobile and found that jQM prevent form submit by default, and handle with ajax.
//bind to form submit events, handle with Ajax
$.mobile.document.delegate("form", "submit", function(event) {
var formData = getAjaxFormData($(this));
if (formData) {
$.mobile.changePage(formData.url, formData.options);
event.preventDefault();
}
});
preventDefault is invalid because submit is done by $.mobile.changePage not browser.
So, if wanna prevent submit, that is $.mobile.changePage, I have two suggestions:
1. Add 'data-ajax=false' attribute to form element
demo1
2. Do ajax when submit button clicked
demo2
I have a form and when the user clicks the submit button I want to run a separate PHP script before the form-action (going to the next page) gets executed.
Of course I can stop the form-action with evt.preventDefault(); and then I can fire my jquery $.post call but then I cannot 'resume' or undo this preventDefault call, as far as I can see.
So what is the best way to execute a script that process some information after a user clicks the submit button BUT before the user gets redirected to the next page defined in the form action tag?
(Of course I could just carry over the data and perform whatever I want on the next page – but in this case, I would like to keep it separate).
Thanks for any suggestions!
You can try something like this:
var posted = false;
$('form').on('submit', function(ev) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
posted = true;
$('form').trigger('submit');
});
}
posted = false;
});
Or more succinct, using extra parameters:
$('form').on('submit', function(ev, posted) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
$('form').trigger('submit', [true]);
});
}
});
Your $.post call can be run synchronously, so the form would not submit until you've got a response from the server.
You can submit the form programmatically, perhaps in your callback function.
prevent default on form, then run post, on success of post, target the form by id and use .submit();
$('#submit-button').click(function(e) {
e.preventDefault();
$.post({
url:'url',
success:function() {
$('#formid').submit()
}
});
});
Go head with your evt.preventDefault().
Make an $.ajax() call to run your php script.
In the $.ajax() success/failure callback, check the output of the php script you want to run, and accordingly make a $.post call (or not).
You can always hook the click event, and do your stuff.
When you are done you just do $(form).submit();
Working example
$("#submitbutton").click(function(e) {
e.preventDefault();
// do your ajax stuff here.. $.post().
$("#form").submit();
});
You can use just use the native submit function instead of jQuery's submit() which goes through the event handler again
$('form').submit(function(e){ // change form to your form id
e.preventDefault();
var el = this; // store this form in variable
$.post('/echo/html/',data,function(d){ // your post function
el.submit(); // trigger native submit function in success callback
});
});
FIDDLE
In your form tag, add onsubmit="myfunction()"
I have what I think is a fairly classical problem involving what looks to me like a callback race, but in spite of all my reading, I'm still stuck. You'll find the code pasted below.
It's a simple log in form and you can see that when a certain button is clicked, I'll send the form data "ajaxically" to an external php file. Once the php has run, I'm to receive the results back, and as a test here, to simply alert out the email address from the php file.
When I run this, the ajax callback doesn't execute. If I click the button fast and repeatedly, I get the right alert. I also get the right response if I put in an extra alert.
How do I get it to run without doing these other silly things?
Thanks in advance
RR
$('#'+this.loginForm[0].parentId+"logIn")
.on('click', function() {
var jax = $.ajax(
{
type: "POST",
url: "../sharedfunctions3/act-membership.php",
data: {email: document.getElementById(that.parentId+'email').value,
password: document.getElementById(that.parentId+'password').value,
path: that.path,
action: "logIn"
}
});
jax.done(function()
{
obj = JSON.parse($.trim(jax.responseText));
alert(obj.email);
});
jax.fail(function() { alert("error"); });
alert(1);
});
I had a hunch that when you clicked the button the browser was submitting synchronously and asynchronously.
The return false; tells the browser to not submit the form and to prevent default actions from there on.
When a button inside of a form tag is clicked, most browsers will submit the form even though it is not a submit input.
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()