Just want to get a concept clear here.
suppose i have this html page:
<script>
function_1()
{
... posts a form via ajax
};
</script>
<body>
<div class='car'>
</div>
</body>
On an event I prepend() this form (which I get via ajax) to the above <div class='car'>
<form method='post'>
...
<button type='submit' value='post' />
</form>
The idea is to submit this form via ajax by calling the function_1 function on pressing the submit button.
Does this work? Because when I submit the form it is not calling the function_1, its just posting it via regular Http post.
When we append() or prepend() elements to DOM, do they have access to javascript right away?
Thank you
You are appending those form elements during run time, so you have to register events for it by using event-delegation. And by the way it is a submit button, so whenever you are clicking on it, it will simply invoke its default action, that is submitting the form. So you should use e.preventDefault() to prevent its default behaviour or you should need to change the type of that button from submit to button
Try,
<script>
$(document).ready(function(){
function function_1()
{
... posts a form via ajax
};
$(document).on("click", "input[type='submit']", function(e) {
e.preventDefault();
function_1()
});
});
</script>
You need to use a delegated event handler, for example:
$(document).on("submit", "#your-form-id", function(e) {
e.preventDefault();
// AJAX code
});
Then, the handler will be called on submit regardless of when the form is appended, as long as the form exists.
Related
I have a form that I want to use jquery for validation of the form before I submit. If I click on one of the buttons, I have it save the data via an ajax call. For the other button I want to submit the form, but not have it go through ajax, just do a submit the old fashioned way and go to that page.
I had the submitHandler in my validate() function, which works great for doing the ajax stuff, but what about for the other button where I don't want to use ajax? Do I remove the submitHandler portion from the validate() function? If so, then how should I set up for using ajax? Do I put it in the event handler for the click on that button? If so, how should I set it up?
Can't you just create 2 different functions or just one parameterized with a boolean to indicate whether to send ajax request or just submit the form? the latter may be done using the JQuery submit function.
I think the best way is to bind a personal event
$('form').on('submitajax submit', function(e){
if(e.type === 'submitajax'){
//ajaxstuff
}
else{
//classic stuff
}
})
And your ajax button will trigger the submitajax event
Your validation function can be like this:
function bar( ajax )
{
var valid = true, fooForm = $('#fooForm');
// do validation stuff
if( !valid ) return;
if( ajax ){
$.post(fooForm.attr('action'), fooForm.serialize());
}else{
fooForm.submit();
}
}
And your buttons:
<input type="button" value="With Ajax" onclick="bar( true )" />
<input type="button" value="Old Fashion" onclick="bar( false )" />
You need check JavaScript events on submitting form.
Just consider form:
<form class="js-form">
<a class="js-save">Save</a>
<input type="submit" value="Submit"/>
</form>
$('.js-from').on('click', function(event){
if (event.target === event.currentTarget){
# Triggers on click submit input that triggers as part of form and target same
# Call ajax stuff
} else {
# Triggers on click link witch is fired as click as not a part of form
# Call other ajax or link stuff
}
});
One function for cheching if form submit on submit button or link that can do any thing other
I figured it out. In my ajax button click event handlers, I needed to add
event.preventDefault();
Then I could add the $.ajax() call to the one where I wanted to call ajax, and to the other one just did the submit normally.
Thank you for all of your responses, it was an interesting exercise and I learned a bit more about the intricacies of this type of coding.
i am trying to submit my page using jquery with different actions, but below code seems not working
adding user
$("#createBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'addUser.html');
});
});
updating user
$("#updateBtn").click(function() {
$("#formname").submit(function(event){
$(this).attr('action', 'updateUser.html');
});
});
EDIT :-
<form:form name="formname" commandName="comandNamd">
i didnt give action name, since i want to change actions.
on click of button, the page is not getting submitted.
You are writing submit handler inside the click handler. This should work.
$("#createBtn").click(function() {
$("#formname").attr('action', 'addUser.html');
$("#formname").submit();
});
Change for update button also.
"i have place my script inside the tag in top of the page"
In that case your script won't actually bind event handlers to your buttons, because the script will run before the form and buttons have been parsed. $("#createBtn") will find no matching element. You can correct this either by putting your script at the end of the page, just before the closing </body> tag, or by wrapping your code in a document ready handler.
Also, the code inside your .click() handler is binding a submit handler to the form, which doesn't really make sense. You just want to set the action:
$(document).ready(function() {
$("#createBtn").click(function() {
$("#formIdHere").attr('action', 'addUser.html');
// OR
$(this).closest("form").attr('action', 'addUser.html');
});
$("#updateBtn").click(function() {
$("#formIdHere").attr('action', 'updateUser.html');
});
});
You said in a comment that the "buttons are inside the form" - if they are submit buttons then the above code should work. The click will run the code shown to set the action, after which the default behaviour (form submission) will continue.
i have fixed the issue, and thanks for your help, since i am using spring form tag,
<form:form name="formName" commandName="command">
but in jquery i was using above form name attribute value, but actually spring form tag generates form id value and final html looks like
<form:form id="formid" name="formName" commandName="command">
after changing the code to have formid, it worked thanks
$("#formid").attr('action', 'addUser.html');
We have a script that tracks form submits by adding an event listener to the form. The problem is that one customer submits the form via a link using
Submit
which ignores the event listener. Here's a JSFiddle to demonstrate: http://jsfiddle.net/XhLkG/
As you can see the Submit button triggers the alert while the Submit link simply just submits the form and bypasses the event listener.
Is there a way to still trigger the event listener?
EDIT: We cannot change the markup since it's on our customer's homepage where they have embedded our script. Sorry if I didn't make it clear.
You can use this:
var form = document.getElementsByClassName('form');
form[0].addEventListener("submit", function(e) {
e.preventDefault();
alert('event');
});
form[0].childNodes[3].addEventListener("click", function(e) {
e.preventDefault();
alert('event');
});
instead of using the href try this
<form method="post" name="formname" class="form">
<input type="text" name="hello">
<a onclick="javascript:document.formname.submit();">Submit</a>
<input type="submit">
</form>
remove the href and replace it with onclick
try the following with jquery:
$("form").submit(function (e) {
e.preventDefault();
alert('event');
});
Reference here.
I did a jQuery form (form1) which bring another form(form2) in that page through ajax.
Now I want to submit the form2 data through ajax.
But whenever I click the button, it submit the whole page. I mean the whole page reloads.
$(document).ready(function() {
$("#form2").submit(function() {
$(this).ajaxSubmit({
beforeSubmit: function(before) {
$('.loading_result').html('Loading...');
},
success: function(dd) {
$('.loading_result').html(dd);
}
});
return false;
});
});
All the JavaScript codes in the parent page. I don't have any JavaScript codes in ajax pages
//
page.php
* There is a form (form1) in this page.
* All the jQuery functions are inside the page.php
When the form1 is submitted, it brings data from page2.php // It works good.
** page2.php gives form2.
Now when i submit the from2 (which is also in page.php after the ajax request) it does not trigger the jquery function inside page.php
Instead of binding the form submit on $(document).ready, I usually just include an "onclick" event to the form's button:
<button type='submit' onclick='MyAjaxFunction();return false;'>Submit</button>
The return false; portion of the onclick will prevent the form from submitting.
This is because the form is being submitted in the traditional sense. This is the default action of the submit event. You need to suppress this:
$("#form2").submit(function(evt) {
evt.preventDefault(); //<-- prevent the event's default action
//code here...
I looked all around SOF but no luck to find me answer. It is either too easy or the answer is not just there.
What I simply need to do is to validate the form when my <img id='submit'/> is clicked and submit it afterwards.
$(document).ready(function(){
$('#submit').click(function() {
$('#suzuki_scb').submit();
});
$('#suzuki_scb').validate({
submitHandler: function(form) {
form.submit();
}
});
});
Even this doesn't work and returns form.submit() is not a function.
I think this is what you're trying to accomplish
<script type="text/javascript>
$(document).ready( function(){
$('#suzuki_scb').validate({
// validation arguments go here
});
});
</script>
...
<form id="suzuki_scb">
<!-- Your form goes here -->
<button id="submit">
<img src="[image url goes here]" />
</button>
</form>
From the jQuery validation example they have on the site, all you need to do is call $("#suzuki_scb").validate();. The plugin should take care of canceling the submit action for you. So clicking the submit button with invalid data won't actually submit the form.
Using an HTML Button element with an image inside it is a little more semantically correct than using an image with a JavaScript click event that attempts to submit the form
This page, on jQuery docs, has the information you seek. Here's a snippet from the first paragraph:
This method sets up event handlers for
submit, focus, keyup, blur and click
to trigger validation of the entire
form or individual elements.
Hope it helps.