I'm trying to use this script for my login form submit button, but it's not working at all...
Script: http://lab.hakim.se/ladda/
Basically, i wan't to be able to show the loading indicator onclick and before it submits. Do any of you guys know how to do this ?.
Did you take a look at the README.md at Github? Try to follow the instructions and get back with specifics if you should not manage to make it work.
You need to catch the submiting form (im gona use coffeescript but you can transform it to its jquery javascript equivalent)
$("myform").on "submit" , (e)->
e.preventDefault()
data = $("myform").serialize()
ladda = Ladda.create($(#).find("submit-button")[0])
// in the version i use i have to use [0] because the ladda does not accept a jquery object, it needs a dom object
ladda.start() //this starts the animation
$.post("path/for/post",
data: data
).always ->
ladda.stop() //this stops the animation on any case fail or success
Related
I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved
I've been looking over an older post trying to work out a solution for showing the confirmation PHP in a lightbox.
As my knowledge on javascript and ajax is close to zero - well, it IS zero - I'm hoping someone might elaborate.
<form method="post" action="contact.php">
Is the basic form method. Would I be able to use something like Tinybox2 and simply add
TINY.box.show({url:'submit.php',post:'id=16',width:200,height:100,opacity:20,topsplit:3})
to the action, rather than a php?
Cheers, Trin
If you want to use TinyBox, you need to serialize your form before you post it. One of the fastest and nonpainful way to do this to use jQuery (Just add reference if you haven't done this.)
TINY.box.show({url: $("form").prop("action"), post:$('form').serialize(),width:200,height:100,opacity:20,topsplit:3})
First one grabs the "action" url from your form, and the second method makes your form to be posted with TinyBox.
This code should display a tinybox when user submits the form:
$("form").submit(function( event ) {
event.preventDefault();
TINY.box.show({
url: $("form").prop("action"),
post: $('form').serialize(),
width:200,
height:100,
opacity:20,
topsplit:3
});
return;
});
Just put this inside
<script type="text/javascript">
$(document).ready(function () {
// Here.
}
</script>
block.
I have a code to preventDefault after a form submit, and act accordingly to different conditions. Both condition work, everything works, but after the ELSE condition, the page refreshes. Here is the code:
$('.form_invitation').on 'submit', (e) ->
e.preventDefault()
$('#sending_invite').show()
$.post $(this).prop('action'), $(this).serialize(), (invite) ->
alert(invite.status)
if invite.status
$('#sending_invite').hide()
$('#invite_sent').show()
$('#invite_email').val('')
else
alert('start')
$('#sending_invite').hide()
$('#invite_fail').show()
alert('end')
I put these alerts there, and all of them are shown before page refreshes. I've tried returning false instead of preventingDefault, and is also didn't work. Can anyone see what I am missing?
Just found out what was happening. When rails generated the form, it made it with the same name of another form I had for a similar purpose, and I've already had a js function to deal with the other one. All I had to do was change de id of this one, and everything works now.
I've started using CKEditor v3 few weeks ago.using it in a php project.i've been using it with jquery (using jquery adapter) and all this while using $.ajax (because can't handle for errors when using jquery form) to submit and i thought everything was alright .
So here pops up a case where i need to use normal form mechanism to submit the ckeditor content and all the other information of the form.
To my surprise the content was empty so i started google and apparently it's a known issue.
i haven't seen any thing YET that could let me post my content to php side. so i've come up with a workaround.
I know onclick will always fire before the onsubmit so i've written this.
function returntoSubmit(){
myForm = document.forms[0];
myForm.elements["content"].value = $("#content").val();// note that the textarea name and id are all the same "content"
}
// html here
<input type="submit" value="Save" onclick="returntoSubmit()" />
that does the work for me.But truly and a little uncomfortable with this, isn't there any better method to solve this issue?
Thanks
I'm running a large application with some nasty legacy code and needed something that worked across the whole app as non-intrusively as possible. In my case it wasn't feasible to listen for submits on each page individually, and even when I did I occasionally had race conditions where the submit still occurred before the click event code had a chance to do it's thing. The following seems to do the trick for me when ran after page load at a global scope:
for(var i in CKEDITOR.instances) {
CKEDITOR.instances[i].on('blur', function() { this.updateElement(); });
}
May this help
CKEDITOR.instances[content].getData()
Just ran across this problem too... it seems that the best way to update all the textareas is:
for(var i in CKEDITOR.instances) CKEDITOR.instances[i].updateElement();
http://cksource.com/forums/viewtopic.php?f=11&t=15877
I have actually added my own twist that works nicely as I was having trouble today with the same issue.
I used your function call, but instead do this i give my textarea the ID of ckeditor:
function returnToSubmit() {
$('#ckeditor').val(CKEDITOR.instances['ckeditor'].getData();
}
I used this in a jquery ready event for all forms:
$('form').on('submit',function(){
for(var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
}
});
Later I add another specific form submit event handler to do the actual custom submit logic for each form.
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.