I have a page with 22 different forms that use ajax to send json to my server-side code. I have one form that needs to be submitted via a normal post, i'm attempting to break out of the function and let it process normally. It appears to work fine, the form is submitted it behaves as normal, afterwords if you submit another form the page refreshes, this can be duplicated every time.
$("form").submit(function(e) {
if( $('input[name="ticketpost"]').val() === "true" ) {
return;
}
e.preventDefault();
...
ajax/json stuff
My other function to trigger the submit of the special form is as follows:
$(".TicketPost").click(function() {
$("#ticketpost").submit();
});
I thank you ahead of time for your help.
Try adding e.preventDefault also in TicketPost click function
$(".TicketPost").click(function(e) {
e.preventDefault();
$("#ticketpost").submit();
});
Related
I have a form in place that shows a .questionTitle__valid class when we validate each element on the page.
Here is my code
$.validator.setDefaults({
highlight: function (e) {
$(e).closest('.questionWrap').addClass('error');
$(e).closest('.questionWrap').find('.questionTitle').removeClass('questionTitle__valid');
},
unhighlight: function (e) {
var qWrap = $(e).closest('.questionWrap');
$(e).closest('.questionWrap').find('.questionTitle').addClass('questionTitle__valid');
if (qWrap.find('.field-validation-error').length == 0) {
$(e).closest('.questionWrap').removeClass("error");
}
},
onclick: function (e) {
this.element(e);
},
ignore: ':hidden:not(.validateHidden)'
});
My issue is when I submit the page and go to page 2 and then go back to page 1 the .questionTitle__valid has disappeared.
I thought if I called this on document.ready
$('.pet_questions:visible').find(":input").valid();
Which validates is visible element, but on first load of the page the validate plugin is run and shows all the error messages.
Its like I need to call validate if all elements have been filled out filled out like this
$('.pet_questions:visible').find(":input").each(function () {
if ($(this).val() != "") {
$(this).valid();
}
});
But if I add this the error messages still loads on first page load
Any help would be greatly appreciated to call jQuery validate if all elements have already been filled out on document.ready
Managed to sort this, so when the user goes back to a page, I revalidate the form if the first question has already been answered and only validate the fields that are visible. This might not be a pretty way to do this but seems to work for me.
if ($(".petspecieradio:checked").length > 0) {
$('.pet_questions:visible').find(":input").valid();
}
I have a web page with a push button on it. The button makes a call to a js function I wrote that will populate a form and then submit that form. Upon form submission, I would like set the value of the button to "enabled" instead of "disabled". My server (created in Python/Linux Env.) is able to interpret the get requests and take care of what it needs to just fine.
The problem is that every time I submit a form, the page refreshes itself, which effectively means I can't toggle values back and forth (at least not the way I am doing it now)
Ultimately what I need is a way for a user to press a button to toggle a value and have the server be able to react to that button press. If I don't need a form to do this, awesome! I just used the form because it seemed like the best approach at the time.
Here is my code:
function createForm(tagStr,piStr)
{
myform=document.createElement('form');
myform.method='get';
myform.action='http://172.26.177.17/standardTable.html';
input2=document.createElement('input');
input2.type='hidden';
input2.name='tagID';
input2.value=tagStr;
input3=document.createElement('input');
input3.type='hidden';
input3.name='piID';
input3.value=piStr;
elem= document.getElementById("mapButton");
input4=document.createElement('input');
input4.type='hidden';
input4.name='Action';
input4.value=elem.value;
myform.appendChild(input2);
myform.appendChild(input3);
myform.appendChild(input4);
document.body.appendChild(myform);
myform.submit();
if (elem.value == "Disabled") elem.value = "Enabled";
else elem.value = "Disabled";
}
need to handle the form submission on the submit event, and return false preventing page refresh
$('#form').submit(function () {
sendContactForm();
return false;
});
I have a form setup where a user can register, and on submittal, a PHP script runs which validates the user, and once that is done, it echoes a messagebox which jQuery quickly hides and then fades in over the course of 1 second. What I now want to do is to be able to hide that form on submittal, and I thought this might do it:
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function() {
$(this).hide(1000);
});
});
Where div.mainsuccess is the success message, and form.register is the form (with a class of register). Now the first line works, which tells me the script is being called, but the form is not being hidden at all. I'm doing something stupid here, but I cannot figure out what?
I've tried to look through the jQuery API documentation for submit(), but I cannot understand what is being said. Thanks.
I think the reason it may not work is because the form is submitting it's data and waiting for page to refresh... which means, it will stop all of it's javascript stuff coz it's pointless ... I could be wrong but hey, your hide would take 1 second to hide but your page could reload quicker.
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function(e) {
e.preventDefault();// will stop the form being submited...
$(this).hide(1000);
// do ajax here...
return false;
});
});
Updated
here is a list of tutorials
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
Videos ....
http://www.youtube.com/watch?v=0CMTQtnZ0G0
Try this:
$("form").submit(function(e){
e.preventDefault();
$(this).hide(1000);
});
You'd want to incorporate an ajax call (I'm taking post) to call the php instead of reloading the page
$('form.register').submit(function(e) {
e.preventDefault();
url = $(this).attr('action');
$.post(url,$(this).serialize(), function(data) {
alert('success');
// data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
$('#result').html($(data).find('form'));//form can be replaced with anything
// #result is the id of an element you wish to return the info to
});
$(this).hide(1000);
});
And you'd be done.
More info here
Well, seems that the form refreshes after submission, so it is still there.
I suggest using something like jQuery form: http://jquery.malsup.com/form/
Read up on it and you will find how to use it, and when it is submitted, it won't refresh, and using hide() you will be able to hide it.
N.B you will need jQuery referenced in your code to use jQuery form.
Enjoy.
I want to submit a form inside a page, but don't want the page to do any refresh. I just want to submit some data to the server. How can I make it?
Use AJAX for this. Cross-browser support for AJAX is a pain, and I'm not willing to demo it without a framework, but here's a jQuery example:
$("#myform").submit(function (e) {
e.preventDefault();
$.post(
url,
$(this).serialize(),
function () { /* What to do when the data is successfully posted */ }
);
});
You can just use an ajax post() to submit (POST/GET) the data to a page where the server uses this data. Also add e.preventDefault(); to stop refreshing the page from the forms action
I am trying to post a form using ajax.
Right now, the code I have is
$("#sub").click(function() {
var tag = $("#tagbar").val();
var opinion = $("#op").val();
alert($("#expressform").serialize());
$.post("dbfunctions.php", $("#expressform").serialize());
});
This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?
Also, if I remove the alert, the script stops working completely. I can't figure out anyway in which this makes sense.
Thanks
Make sure you cancel the default action of the button by returning false from the click handler:
$("#sub").click(function() {
$.post("dbfunctions.php", $("#expressform").serialize());
return false;
});
Also instead of subscribing for submit button clicks, it's better to subscribe to the submit event of the corresponding form directly:
$("#expressform").submit(function() {
$.post(this.action, $(this).serialize());
return false;
});
This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.
You can use below function for submit the data
through Ajax form Submit
$('#form1').ajaxForm({
success:function(response){
$('#save_data').html(response);
});
$('#btnSubmit').click(function() {
$('#form1').submit();
});