I have the following:
$(document).ready(function(){
// bind 'myForm' and provide a simple callback function
$('#form').ajaxForm(function() {
alert("Works!!!");
});
});
The problem is that when I dynamically add the form to the HTML the script is not working. If the form is there from the beginning the form is submitted with Ajax and works as expected.
What is the problem here?
the problem is that $(document).ready() only gets fired when the page is initially loaded. If you add the form dynamically to the page, you'll need to make the call to setup the form again.
Alternatively, you can use the livequery plugin to 'listen' on the page for when a new form element is added to the page and to automatically setup the form for you.
Related
I am having some problems when I want to add custom jQuery code that affects the form.
For example when someone clicks an input or radio button another input or element to be hidden or shown.I tried to get a result like console.log('trigger'); when clicked or something else but nothing in dev. console appeared.Also, I tried the following methods:
To call the click event with .on('click', function()... or to call the event with .trigger('click');, or to change the event to change
To embed the script within a file from ninja forms or to put it inside the page at the ending of body tag in footer.php
To change the opening declaration of jQuery to work inside a function like this : (function($) {$(document).ready(function(){.....
I know that I could try another plugin, I tried one and the custom jQuery works but I really like this one and don't know why this is happening ...
Thanks
Not sure if you need help with this any more as it's been some time since you posted your question, but this may help others in the future. I had the same/similar issue with not being able to run JS/jQuery on the Ninja Forms and found that it's because Ninja Forms load their forms asynchronously. So, when your document.ready function runs, the form doesn't yet exist and it's not able to bind.
Ninja Forms have their own event ready state that can be used as follows:
jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
// Your code goes here...
});
The event isn't registered simply because the elements you're trying to bind the event to do not exist yet at that moment (on document load). Ninja forms loads the form contents asynchronously, so you'll have to wait until the form is fully loaded and then add your event listeners.
This works for me:
var formExists = setInterval(function() {
if ($(".nf-form-cont").length) {
// Set your event listeners here, example:
$("#nf-field-1").click(function(e) {
console.log("click!");
}
clearInterval(formExists);
}
}, 100); // check every 100ms
I'm using jQuery's load() function to change content on a page dynamically. It's a application with different 'levels' but the URL never changes.
It's working fine except for the final screen I'm using. I've got a form with text inputs etc that I need to create some form validations for but I can't get on('submit') to work after the page load. I am using a callback function on the load function and I do run some simple jQuery CSS, etc. to content that is on the final_page.php so I know that it's successfully running the function AFTER the content is loaded.
I'm trying to simply just apply a preventDefault() to the form for now to confirm that it's working correctly but the form submits every time I get to that final page so it looks like the on() function doesn't get bound to the form selector.
Is there some sort of conflicting with submit and load?
$('#main_content').load('final_page.php', function(){
$('#main_content').css({'height':'auto','padding-bottom':'25px','background':'#086c8c'});
$('#hidden_input').attr('value', 'complete');
//GOOD UP TO THIS POINT
$('#final_form').on('submit',function(e){
e.preventDefault();
});
});
When one uses AJAX commands with Jquery, is it necessary to disable form action parameter in the HTML? The load URL and the action point to the same place, so is it necessary to have the action parameter?
You should use the event object's preventDefault() method, which will disable any default behavior associated with the element type. This is very important for links and form submit buttons.
For example:
<!-- you have this link -->
<a id="clickme" href="test.html">Click me</a>
You can disable the loading of test.html by using preventDefault()
$('#clickme').click(function(event) {
event.preventDefault();
// ...
});
You can also return false in your click function for the same effect.
In this case I think is useful only for clarity of code. When you put your code to make the AJAX call you can get the url from the form's action but that depends on you.
Try to be clear and consistent it's my advice.
If you are submitting the form via Ajax, then you just need to make sure there is not a way for the form to be submitted traditionally. You can either remove the form tags themselves, remove the actions, or remove any submit buttons. You can also capture the submit event of the form and just return false to prevent the form from doing a postback submit.
I have a form loading inside my page and there is a button out side this form its function is to submit this form.
$('#MyForm').submit();
I want a way to write a submit complete function, means to know that the form successfully/completely submitted.
I tried the jquery form plugin, but didn't work, i think because the submit come from a button outside the form.
anyone knows any different ways?
Actually, you can use the jquery form plugin, just use the ajaxSubmit() method.
Documentation for the jQuery form plugin.
// setup the form, and handle the success
$('#myFormId').ajaxForm({
success: function() {
// do what you are looking to do on
// success HERE
}
});
// setup submission on some random button
$('#someButton').click(function() {
// submit the form from a button
$('#myFormId').ajaxSubmit();
});
I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?
A couple of suggestions:
Overwrite the submit function to do your evil bidding
var oldSubmit = form.submit;
form.submit = function() {
$(form).trigger("submit");
oldSubmit.call(form, arguments);
}
Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):
$("form a").click(function() {
$(this).parents().filter("form").trigger("submit");
});
If you are using jQuery, you should be attaching events via it's own event mechanism and not by using "on" properties (onclick etc.). It also has its own event triggering method, aptly named 'trigger', which you should use to activate the form submission event.
Thanks Eran
I am using this event binding code
this._form.bind('submit', Delegate.create(this, function(e) {
e.preventDefault();
this._searchFadeOut();
this.__onFormSubmit.invoke(this, new ZD.Core.GenericEventArgs(this._dateField.attr('value')));
});
but there is legacy onclick code on the HTML and I would prefer not to change it as there are just so many links.
This worked for me:
Make a dummy button, hide the real submit with the name submit,
and then:
$("#mySubmit").click(function(){
$("#submit").trigger("click"); });
set an event handler on your dummy to trigger click on the form submit button. let the browser figure out how to submit the form... This way you don't need to preventDefault on the form submit which is where the trouble starts.
This seemed to work around the problem.