EntropySink
Technical & Scientific => Programming => Topic started by: ober on July 30, 2011, 10:39:37 PM
-
I want to disable a submit button and change it's text once the user hits submit.
document.getElementById('processD').value = "Processing...";
document.getElementById('processD').disabled = true;
document.getElementById('cancel').disabled = true;
document.getElementById('colbill').submit();
processD = submit button
colbill = form ID
The above seems to work in the onsubmit of a form in firefox, but not Chrome (i haven't tested IE yet). I know we've run into this recently at work so I'm tempted to play it safe and just put a warning on the form to only click once like I've seen so many sites do. But there has to be a cross-browser way to do this, right?
In the end, I don't want to piss of users of a specific browser just because of this 'nice to have'.
-
aren't you using jQuery now?
$("#processD").val("Processing...").attr("disabled",true);
$("#cancel").fadeOut("fast");
-
jQuery :D
var doonce = true;
$('#theform').submit(function()
{
if (doonce)
{
doonce = false;
$('#submitbutton').text('Submitting....');
return true;
}
else
{
alert('I said click one time asshole!');
return false;
}
});
-
aren't you using jQuery now?
$("#processD").val("Processing...").attr("disabled",true);
$("#cancel").fadeOut("fast");
Yeah, I have JQuery in there but I don't always know how to implement it. Where do you put that?
-
In a JS file or in a <script> block. Just make sure it is in a document ready or for shorthand $({});
So
<script type="text/javascript">
$({
var doonce = true;
$('#theform').submit(function()
{
if (doonce)
{
doonce = false;
$('#submitbutton').text('Submitting....');
return true;
}
else
{
alert('I said click one time asshole!');
return false;
}
});
});
</script>
-
gah... ok, so I don't understand what you mean by the shorthand statement. Here is what is in my header file for the page:
<script type="text/javascript" src="<?=$env?>js/jquery/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?=$env?>js/jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript">
$({
$('#agree').submit(function()
{
$("#gopay").val("Processing...").attr("disabled",true);
$("#cancel").fadeOut("fast");
}
});
</script>
<script type="text/javascript">
$({
$('#colbill').submit(function()
{
$("#processD").val("Processing...").attr("disabled",true);
$("#cancel").fadeOut("fast");
}
});
</script>
<script type="text/javascript">
function getpromo(subtotal){
var inputString = $('#promo').val();
var tax = $('#oldtax').val();
$('#promo').addClass('load');
$.post("sources/payments/promo.php", {queryString: ""+inputString+""}, function(data)
{
$('#promo').removeClass('load');
if(data != 'Not Found')
{
var pieces = data.split('|');
if(Number(tax) != 0)
{
var oldtotal = Number(subtotal) * ((Number(tax)/100) + 1);
var newtotal = ((1 - (Number(pieces[0])/100)) * (Number(subtotal) * ((Number(tax)/100) + 1)));
var newtax = newtotal * (Number(tax)/100);
}
else
{
var oldtotal = Number(subtotal);
var newtotal = ((1 - (Number(pieces[0])/100)) * (Number(subtotal)));
var newtax = 0;
}
var totaldiff = Math.abs(newtotal - oldtotal);
/********************************************************
* WRITE VALUES TO BEGINNING PART OF THE FORM FOR VIEWING
*********************************************************/
$('#total').attr('readonly', false);
$('#total').val(newtotal.toFixed(2));
$('#total').attr('readonly', true);
$('#newtax').attr('readonly', false);
$('#newtax').val(newtax.toFixed(2));
$('#newtax').attr('readonly', true);
$('#discshow').html('('+totaldiff+') or '+pieces[1]+'%');
/********************************************************
* WRITE VALUES TO LATER PART OF THE FORM FOR SUBMISSION
*********************************************************/
$('#promocode').val(inputString);
$('#calctotal').val(newtotal.toFixed(2));
$('#taxsaved').val(newtax.toFixed(2));
$('#discstate').val('('+totaldiff+') or '+pieces[1]+'%');
}
else
{
window.alert('That Promo Code has already been used or is not valid.')
}
});
}
</script>
This is included throughout my checkout process. If I put those 2 new sections for the submit buttons in with the other promo code stuff, the promo code part doesn't work. But I wasn't wrapping it in those additional tags you said to use either. So I put them in their own script tags.
I liked Micah's version better because I do actually want to disable the button so they can't click it again.
But using the above, it's not actually changing the buttons.
-
gah... ok, so I don't understand what you mean by the shorthand statement. Here is what is in my header file for the page:
*snip*
This is included throughout my checkout process. If I put those 2 new sections for the submit buttons in with the other promo code stuff, the promo code part doesn't work. But I wasn't wrapping it in those additional tags you said to use either. So I put them in their own script tags.
I liked Micah's version better because I do actually want to disable the button so they can't click it again.
But using the above, it's not actually changing the buttons.
Ok time for a quicky lesson.
$({
/*stuff*/
});
is short hand for
$(document).ready(function()
{
/*stuff*/
});
Which basically says "when the document is ready run this function". This is needed in order to prevent the code from referencing DOM elements which might not exist yet. So let's say you want to bind some action to your form (like a submit handler) but the form doesn't exist in the DOM yet then jQuery will silently ignore the problem but that action won't be triggered. By waiting until the document is loaded and ready you know all the elements are there. So there is a chance you are running into that.
If you want to disable the submit button go for it. I would still add in a do once mechanism as clicking the button isn't the only way of submitting a form.
-
I found this:
$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
$('select', this).attr('disabled', 'disabled');
$('input[type=text]', this).attr('readonly', 'readonly');
$('textarea', this).attr('readonly', 'readonly');
});
Which basically disables all elements on the form (or the ones that I'm using), which removes the other possible ways to submit the form.
-
$('form').submit(function(){
$('input,select,textarea', this).attr('readonly', 'readonly');
});
Never do things in three lines that you can do in one :D
-
although, this only solves the double post problem for people with javascript turned on... you should probably still do a double check on the server side. Maybe set a unique token, in a hidden field, and check for it on submit to make sure it wasn't just submitted a half second ago... or look for transactions from the same IP within the last 10 seconds with the same post values, ect...
-
although, this only solves the double post problem for people with javascript turned on... you should probably still do a double check on the server side. Maybe set a unique token, in a hidden field, and check for it on submit to make sure it wasn't just submitted a half second ago... or look for transactions from the same IP within the last 10 seconds with the same post values, ect...
server side is the only way to guarantee it. js (jquery) for user friendliness and slick interface, but server side validation is always needed.
-
also, make sure the user can't resubmit after navigating back to the form. For example, if its a shopping cart, make sure the "basket" in their session is emptied after checkout so if they go back to the checkout page it doesn't populate with stuff in their cart that they already bought.
-
It's not a shopping cart in the normal sense. They're purchasing a subscription. If they do it more than once then it just extends their subscription period. I was doing server side checking already, I just wanted to do it on the front end too.
-
Just realized I made a mistake earlier.
The short hand version isn't $({}) but is instead $(function(){})
Sorry