I have bind an event on submit form on a login page. I want to make an ajax request first before form submission. Problem is that ajax post dont work, as form submits very early.... If on event add on end "return false" ajax works but this way form dont submits, how delay a bit execution so ajax end and after continue form submission?
This way ajax dont work:
$("button").bind("click", function(){
$.post("test.php", $(this).parents("form").serialize());
})
This way ajax works but form dont submits:
$("button").bind("click", function(){
$.post("test.php", $(this).parents("form").serialize());
return false;
})
You could wait for the ajax to finish before submiting the form:
$("button").bind("click", function() {
var form = $(this).parents("form");
$.post("test.php", form.serialize(), function() {
form.submit();
});
return false;
})
Related
i am calling the form from ajax and after submitting the form, validation error message not showing, ajax call on load.
my ajax code
$.ajax({
type:"POST",
url:"/application/workpermit",
data:dataString,
success:function(data){
$('#tabs-12 .workpermit').html(data);
//alert(data); return false;
}
});
Success return the workpermit view with form
The controller part, after submitting
if ($validator->fails()) {
return redirect("application/".$employer_maid_id."/edit?tab=tab11")
->withErrors($validator)
->withInput();
}
Please any one suggest me, how to show the validation message
if you are not refreshing the page you need to add(append) the message with js/jQuery
if you are redirecting from the page you can you Laravel's built in feature "Flash". Basically it's a one time Session laravel docs
Similar to this question, I'm wanting to run a function when an ajax form is successfully submitted, but I don't have direct access to the initial ajax code that loads the form.
How would I check that the form was successful given that I can't add code to the initial ajax success call?
$('#registration-form').submit( function() {
alert('registered successfully');
});
try binding .ajaxSuccess() to your element http://api.jquery.com/ajaxSuccess/
$('#registration-form').ajaxSuccess(function() {
alert('registered successfully');
});
Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
You could try to use the ajaxSucess() global ajax event handler:
$(document).ajaxSuccess(function() {
alert('registered successfully');
});
I have a form that looks like this:
<form name="formi" method="post" action="http://domain.name/folder/UserSignUp?f=111222&postMethod=HTML&m=0&j=MAS2" style="display:none">
...
<button type="submit" class="moreinfo-send moreinfo-button" tabindex="1006">Subscribe</button>
In the script file I have this code segment where I submit the datas, while in a modal box I say thank you for the subscribers after they passed the validation.
function () {
$.ajax({
url: 'data/moreinfo.php',
data: $('#moreinfo-container form').serialize() + '&action=send',
type: 'post',
cache: false,
dataType: 'html',
success: function (data) {
$('#moreinfo-container .moreinfo-loading').fadeOut(200, function () {
$('form[name=formi]').submit();
$('#moreinfo-container .moreinfo-title').html('Thank you!');
msg.html(data).fadeIn(200);
});
},
Unfortunately, after I submit the datas, I'm navigated to the domain given in the form's action. I tried to insert return false; in the code (first into the form tag, then into the js code) but then the datas were not inserted into the database. What do I need to do if I just want to post the data and stay on my site and give my own feedback.
I edited Eric Martin's SimpleModal Contact Form, so if more code would be necessary to solve my problem, you can check the original here: http://www.ericmmartin.com/projects/simplemodal-demos/ (Contact Form)
Usually returning false is enough to prevent form submission, so double check your code. It should be something like this
$('form[name="formi"]').submit(function() {
$.ajax(...); // do your ajax call here
return false; // this prevent form submission
});
Update
Here is the full answer to your comment
I tried this, but it didn't work. I need to submit the data in the succes part, no?
Maybe, it depends from your logic and your exact needs. Normally to do what you asking for I use the jQuery Form Plugin which handle this kind of behavior pretty well.
From your comment I see that you're not submitting the form itself with the $.ajax call, but you retrieve some kind of data from that call, isn't it? Then you have two choices here:
With plain jQuery (no form plugin)
$('form[name="formi"]').submit(function() {
$.ajax(...); // your existing ajax call
// this will post the form using ajax
$.post($(this).attr('action'), { /* pass here form data */ }, function(data) {
// here you have server response from form submission in data
})
// this prevent form submission
return false;
});
With form plugin it's the same, but you don't have to handle form data retrieval (the commented part above) and return false, because the plugin handle this for you. The code would be
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$(form[name="formi"]).ajaxForm(function() {
// this call back is executed when the form is submitted with success
$.ajax(...); // your existing ajax call
});
});
That's it. Keep in mind that with the above code your existing ajax call will be executed after the form submission. So if this is a problem for your needs, you should change the code above and use the alternative ajaxForm call which accepts an options object. So the above code could be rewritten as
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$(form[name="formi"]).ajaxForm({
beforeSubmit: function() { $.ajax(...); /* your existing ajax call */},
success: function(data) { /* handle form success here if you need that */ }
});
});
I am currently trying to validate a zend form with ajax and zend validate at the same time...
Let me explain, my forms pops up in an iframe (fancybox) and when submitted, I need to display a "thank you" message, close the iframe and redirect the user. I planned to use ajax validation to close the fancybox iframe if success.
I followed several tutorials http://www.zendcasts.com/ajaxify-your-zend_form-validation-with-jquery/2010/04/ explaining how to ajaxify your zend form to display errors for instance onblur event on a textinput.
Everything works find onblur or over events but when I specify the click event on the submit button, my guess is that the form gets processed by zend and ajax validation doesn't work... Do you have any hints or do you see obvious mistakes??
thanks a lot....
the javascript:
$(function()
{
$('#contact').submit(function()
{
doValidation();
});
});
function doValidation()
{
var url = '/ceramstar/public/contact/validateform';
var data = {};
$("input").each(function(){
data[$(this).attr('name')] = $(this).val();
});
$.post(url,data,function(resp)
{
//document.write(resp);
console.log(resp);
alert(resp);
//parent.$.fancybox.close();
},"json");
}
the zend action:
public function validateformAction()
{
$this->_helper->viewRenderer->setNoRender();
$this->_helper->layout->disableLayout();
$form = new Form_ContactForm();
$form->isValidPartial($this->_getAllParams());
//print_r($bool);
$json = $form->processAjax($this->getRequest ()->getPost ());
header('Content-type: application/json');
echo Zend_Json::encode($json);
}
You should return false or preventDefault on the .submit
(function() {
$('#contact').submit(function() {
doValidation();
return false;
}
});
I'm using the Jquery Validation Plugin to forms loaded via Ajax (dynamic forms). I know that as of Jquery 1.4, live events on submit is now possible. Now the problem is I want to show a confirm message after the dynamic form has been validated. My code looks like this:
$('.dynamicForm').live('submit',function(){
$(this).validate();
if($(this).valid()){
if(!confirm('Are you sure?'))
e.preventDefault();
}
});
It's not working as expected. Somehow confirmation shows first, then at the second time I submit the form, that's the time the validation happens. Any ideas?
Somehow this seems to work:
$('.dynamicForm').live('mouseover',function(){
$(this).validate({
submitHandler:function(form){
if(confirm("Are you sure?")){
form.submit();
}
}
});
});
Use the submitHandler function available in the validate options:
$(".dynamicForm").validate({
submitHandler: function(form) { //Only runs when valid
if(confirm('Are you sure?'))
form.submit();
}
})
From the docs - submitHandler:
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.