Author Topic: disabling submit button  (Read 2804 times)

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
disabling submit button
« 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. 

Code: [Select]
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'.

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: disabling submit button
« Reply #1 on: July 30, 2011, 10:45:14 PM »
aren't you using jQuery now?

   $("#processD").val("Processing...").attr("disabled",true);
   $("#cancel").fadeOut("fast");
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: disabling submit button
« Reply #2 on: July 30, 2011, 10:45:31 PM »
jQuery :D

Code: [Select]
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;
    }
});

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: disabling submit button
« Reply #3 on: July 30, 2011, 10:52:31 PM »
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?

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: disabling submit button
« Reply #4 on: July 30, 2011, 10:57:42 PM »
In a JS file or in a <script> block.  Just make sure it is in a document ready or for shorthand $({});

So
Code: [Select]
<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>

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: disabling submit button
« Reply #5 on: July 30, 2011, 11:06:00 PM »
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:

Code: [Select]
<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.

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: disabling submit button
« Reply #6 on: July 30, 2011, 11:19:17 PM »
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.

Code: [Select]
$({
  /*stuff*/
});

is short hand for
Code: [Select]
$(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.

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: disabling submit button
« Reply #7 on: July 30, 2011, 11:25:28 PM »
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.

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: disabling submit button
« Reply #8 on: July 30, 2011, 11:40:56 PM »
Code: [Select]
$('form').submit(function(){
  $('input,select,textarea', this).attr('readonly', 'readonly');
});
Never do things in three lines that you can do in one :D

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: disabling submit button
« Reply #9 on: July 31, 2011, 08:47:58 AM »
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...
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

webwhy

  • Jackass IV
  • Posts: 608
  • Karma: +15/-10
Re: disabling submit button
« Reply #10 on: July 31, 2011, 10:12:09 AM »
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.

micah

  • A real person, on the Internet.
  • Ass Wipe
  • Posts: 6915
  • Karma: +58/-55
  • Truth cannot contradict truth.
    • micahj.com
Re: disabling submit button
« Reply #11 on: July 31, 2011, 11:50:27 AM »
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.
"I possess a device, in my pocket, that is capable of accessing the entirety of information known to man.  I use it to look at pictures of cats and get in arguments with strangers."

ober

  • Ashton Shagger
  • Ass Wipe
  • Posts: 14305
  • Karma: +73/-790
  • mini-ober is taking over
    • Windy Hill Web Solutions
Re: disabling submit button
« Reply #12 on: August 01, 2011, 09:08:54 AM »
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.

Mike

  • Jackass In Charge
  • Posts: 11248
  • Karma: +168/-32
  • Ex Asshole - a better and more caring person.
Re: disabling submit button
« Reply #13 on: August 02, 2011, 12:30:39 PM »
Just realized I made a mistake earlier.

The short hand version isn't $({}) but is instead $(function(){})

Sorry