I have a problem in firefox, where I'm trying to get a form submission button to display "loading" when a person clicks on it (to prevent multiple submissions of a user clicking it two/three times due to a slow site).
I have this jquery code:
$(document).ready(function(){
$('.submitButton').click(function() {
document.aform.submit();
$('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
Chrome executes it correctly, but Firefox only changes the HTML in the span surrounding but doesn't submit the form. Firefox submits when i click the button twice. If I remove the line of the .html() changing, it also submits with no problem.
Here is the form code for reference:
<form name="aform" action="index.php" enctype="multipart/form-data" method="post">
...form data
<span class="buttonSpan">
<button class="btn btn-primary submitButton" name="submit"/>Submit</button>
</span>
</form>
Does firefox put precedence on html changes and ignore everything else? Again, this works fine in Chrome, but firefox is really killing me!
Thanks!
In most cases it is better to use the submit event on the form instead of the click event of the submit button. (what if you submit the form by pressing the enter button?)
$(function(){
$('form[name=aform]').submit(function() {
$('.buttonSpan', this).html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
When using this, you will need to fixed the html of your submit button as I have stated below.
Otherwise I suggest finding the form relative to the submit button:
$(function(){
$('.submitButton').click(function() {
$(this).closest("form").submit()
.find('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
});
});
Also the proper way of defining your submit button is like this:
<input type="submit" class="btn btn-primary submitButton" value="Submit" name="submit"/>
Works for me, but removing a button from the document during its click handler seems likely to cause inconsistent behaviour: does the default action of submitting the form apply to the form that owned it at click-time, or at the post-click-event-time the default action fires (no form)?
Avoid this ambiguity - don't destroy the button by replacing it with new markup. Instead, alter it:
<button type="submit" class="btn btn-primary submitButton" name="submit">Submit</button>
$('.submitButton').click(function() {
$(this).text('Loading...');
$(this).removeClass('submitButton');
$(this).addClass('disabled');
});
Note that (a) you don't need to call form.submit() because that's the default action for a submit-button anyway; (b) as Munter said, document.namedElement is bad form, (c) as d_inevitable said, hooking form.onsubmit is almost always a better thing to do than button.onclick - though maybe not here if you are specifically only worried about mouse clicks.
Accessing dom elements by name like you do in document.aform is not recommended.
Since you already have the button inside the form you should use the buttons .form property.
so something like
button.onclick = function () {
this.form.submit();
}
try this:
$(document).ready(function(){
$('.submitButton').click(function() {
$('.buttonSpan').html('<button class="btn btn-primary disabled">Loading...</button>');
$('form').submit();
});
});
Here is a working example : tested on FF http://jsfiddle.net/JV68U/
Related
I have a multiple pages form where people can press next and previous. The form validates when trying to click next but it also validates when they click previous, which shouldn't be the case.
I've searched on Google and used some solutions provided by different websites such as class="cancel" or formnovalidate="formnovalidate" but nothing has worked for me so far.
These are my two buttons who are both in a form
<button data-role="prevbutton" class="btn btn-secondary pull-left">Previous</button>
<button data-role="nextbutton" class="btn btn-primary">Next</button>
There is no simple JS code that calls a function but more like this:
flow.isBelgianResidentChangeHandler = function(isBelgianResident) {
if (isBelgianResident) {
$('[data-role="nextbutton"]').attr('disabled', false);
} else {
$('[data-role="nextbutton"]').attr('disabled', true);
} };
It's hard to know without seeing your JavaScript code, but it could be because the default behavior of button elements in a form are to be submit buttons. So, whichever button you pressed, it would still submit your form. If this is the problem, then adding type="button" to your previous button will fix it.
<button data-role="prevbutton" type="button" class="btn btn-secondary pull-left">Previous</button>
When I attempt to call a function my this page using the below code. I just seems to refresh the page and not call the script.
<form role="search" name="locationForm">
<div class="form-group">
<input id="locationInput" type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
</form>
If I add a '#' to the end of the url, reload the page, then the onlcick event works as it is suppose to.
As far as I knew these were Anchor tags and I have no idea why they would be required in the calling of a function.
How do I correct this? As I don't want to have to use the #.
You are using a button element, whose default behavior, when clicked, submits its parent form. return false will stop the form from submitting:
<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>
If you don't want the button to automatically submit, you could change its type to button. Then, all it will do is run its onclick code. (You can still have that code submit the form manually)
I suppose you want to run the start() function when you submit the form?
You said you're working with an click event listener.
Try to listen for the submit event, instead.
$('#your_form_id').on('submit', function(e) {
e.preventDefault();
your script...
});
The code above basically does this.
Furthermore, the preventDefault keeps the form from actually submitting itself.
You could access the form data with
$('#your_form_id').serialize();
I hope this pushes you into the right direction!
I'm new to javascript, but I've searched extensively about this and tried dozens of different alternatives. Most of them did nothing at all, others prevented the form from submitting!
I have the following form:
<form name="buy" action="process_order.php" method="post">
<input type="hidden" name="itemid" value="{$itemid}">
<button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button>
</form>
I want to prevent double submissions by either disabling the submit button after submit or just make it disappear, whichever works best.
I have tried multiple JS approaches and I dont even know which one is best, so I wont provide one here to avoid confusion.
I'd be thankful if you could provide me a full javascript <script> snippet and anything else I eventually need. I would prefer to not use Ajax here, but let me know if that would help.
Many thanks!
You can use jQuery for this.
$('form[name="buy"]').on('submit', function() {
$('#submit').prop('disabled', true);
});
That will disable the submit button as soon as the form is submitted.
As #rolodex has pointed out submitting the form will refresh the page, thus the disabled button becomes enabled again. This is what I would do if not using Ajax (as #rolodex's answer does):
<form name="buy" action="process_order.php" method="post">
<input type="hidden" name="itemid" value="{$itemid}">
<button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button>
</form>
Thus once someone has submitted the form, the button becomes disabled. This doesn't stop someone refreshing the page again without form data though, but neither does using Ajax. The only way to get around that would be to use cookies.
In order to prevent second submission after the first, you have to use AJAX, as far as I am concerned, because every time the form is submitted, the page will refresh and there will not be any indication if the form is already submitted or not. My approach here will use jQuery and here's how you do it.
First, remove the attribute action and method from your <form> which we will replace with the AJAX call. Just as simple as this;
<form name="buy">...</form>
Secondly, include the necessary jQuery library;
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Then the script;
<script>
$(function(){
$('form').on('submit', function(){
var data = $(this).serializeArray()
$.post('process_order.php', data, function(r,s){
console.log(r)
});
// Updated answer (change submit button's ID to class instead);
$(this).find('.submit').prop('disabled', true);
return false;
})
})
</script>
And that's all. It's identical to #Styphon's answer, but I believe that this is more complete and I hope this helps.
Cheers!
I use this (jQuery required):
<script>
var submiting = false;
$(function() {
$('form').submit(function() {
if (!submiting) {
submiting = true;
$('button[type=submit]').prop('disabled', true); //cosmetic
} else {
return false;
}
});
});
</script>
With this code, when the form is submitted, the boolean will prevent any further submission (ie. the user clicks really fast on the submit button) and will disable the button preventing further clicks.
But a much better aproach is described here:
Prevent double submission of forms in jQuery
Here is a neat solution
$('form').submit(function(){ //prevent multiple submit
$(':submit', this).click(function() {
console.log("submit prevented"); // Debug purpose.
return false;
});
});
If you submit form for instance 4 times, you will see the 3 "submit prevented" output.
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");
<form name="callEventForm" method="post" action="/PDC/callevent.do">
...
<input type="button" value="Save" name="addCallEvent" id="addCallEvent" onclick="alert('You clicked me!')"/>
...
</form>
When clicking this "Save" button, the form is submitted instead of displaying the alert. I was lead to believe that type="button" would cause the form to not submit on click.
Change:
onclick="alert('You clicked me!')"
To:
onclick="alert('You clicked me!');return false;"
I hate to answer my own questions but this was a weird one. There was an ajax:updateField tag that was overriding the onclick event of the button. Changing the source event of the ajax:updateField allowed my established onclick event to fire appropriately. I know that there's no way anyone would have caught that based on the code I posted, but the rest of the page is so much code that I would hate to make people wade through it.
I have a web form for which I want to prevent multiple submissions. In production, this is accomplished by the submit button having an onclick="this.disabled=true" attribute. This way, if the form is submitted and then the user goes back (presumably to "edit" the data, which our users seemed to want to do from time to time), the submit button remains disabled.
This works fine in Firefox, Safari, and Internet Explorer. In Chrome, however, the disable seems to fire before the form submission, thus preventing it from happening. In order to work around this, I changed the button's onclick action to:
this.disabled=true; $('myform').submit()
This results in the form being submitted, but when I use Chrome's back button to return to the form page, the button is no longer disabled. Values I entered into the form before submitting remain, so my guess is that Chrome must be selectively reloading the DOM.
Is there any way to accomplish what I want with Javascript in Chrome? There are other ways to solve this problem, of course, but disabling the button has a highly attractive simplicity to it.
I've tested in Chrome 12.0.742.100 in Linux, and 12.0.742.112 in MacOS X.
I prefer this
http://jsfiddle.net/mplungjan/sCgZ9/
Script:
$("form").submit(function() {
$("#subbut").hide();
$("#submitted").show();
});
CSS:
#submitted { display:none }
HTML:
<form action="http://www.google.com/" target="_blank">
<input type="submit" id="subbut" /><span id="submitted">Form submitted</span>
</form>
You can set a cookie if you want to decide to show or not show the button
Consider instead using the form's submit to disable the button.
In any case, you sould be dealing with this at the server, there are other ways to submit a form without using the submit button. Disabling the button will not prevent the user from re-submitting the form.
Using javascript
<form name ="myform" method="POST" action="youractionhere" onSubmit="document.getElementById('submit').disabled=true;">
<input type="submit" name="submit" value="Submit" id="Submit">
</form>
Using jQuery
$("form").each(function() {
$(this).find("button:submit").click(function() {
if($('input[type="submit"]').hasClass("disabled"))
return false;
$('input[type="submit"]').addClass("disabled");
return true;
});
});
I use to do this
html
<form action="/" method="post">
<button type="button" class="submit-form" >Save</button>
</form>
javascript
var button = document.querySelector('.submit-form')
button.addEventListener("click", function(){
this.setAttribute('disabled',true);
var form = this.closest('form')
form.submit();
},false);
jquery
$(document).on("click",".submit-form",function(){
$(this).attr('disabled',true);
$form = $(this).closest('form');
$form.submit();
});