CODEWITHSUNDEEP
javascriptformssubmitonsubmit
zerokarma
zerokarma

Reputation: 1

How to Disable a Form Submit Image after being clicked?

I am trying to disable form submit button that is an image after it is clicked to prevent duplicate entries. The form goes to Netsuite which is a ERP/CRM and is often slow so we have been getting users clicking it multiple times causing multiple entries which is why we want to have it disabled after a user clicks on it.

This is the code we are currently using:

<INPUT TYPE="hidden" NAME="payment" VALUE="check" ##check## checked>
<br>
<INPUT type="image" onMouseOver="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" 
onMouseOut="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" 
src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" VALUE="order" 
NAME="order" id="order" class="button" onclick="this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';return true;">

I have searched around and read a few suggestion with most saying to add this to onclick area:

this.disabled=true

However adding that code to the onclick does not seem to work. I have tried adding it before and after the netsuite submit portion but does not seem to make a difference.

Does anyone know how I can get this to work?

Upvotes: 0

Views: 1310

Answers (3)

chriserwin
chriserwin

Reputation: 1242

I did a quick test and it looks like if you disable the button onclick the form will never get submitted. I'm not sure if you have have the ability to change the <form> tag, but if you do you could add an onsubmit event that disables the submit button after the form has been submitted:

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="document.getElementById('order').disabled=true;">
    <input type="hidden" name="payment" value="check" checked>
    <br>
    <input type="image" onmouseover="this.src='http://www.domain.com/pb/tpl/img/emailquote3.jpg'; return false;" onmouseout="this.src='http://www.domain.com/pb/tpl/img/emailquote2.jpg'; return false;" src="http://www.domain.com/pb/tpl/img/emailquote2.jpg" value="order"name="order" id="order" class="button">
</form>

If you have the ability to add your own CSS and JavaScript you could clean this up even more.

  1. The rollover image would be better handled by CSS
  2. And simply disabling the submit button doesn't necessarily mean the form can't be submitted. For instance you can submit forms by hitting the enter key on your keyboard. It's better to prevent the submit event itself, rather than disabling a button that may or may not be used.

Example:

<style>
    #order {
        background: url('http://www.domain.com/pb/tpl/img/emailquote2.jpg') no-repeat;
        width: 300px; /* sizing for example only */
        height: 100px;
        border: none;
    }
    #order:hover {
        background: url('http://www.domain.com/pb/tpl/img/emailquote3.jpg') no-repeat;
    }
</style>

<script>
    var formSubmitted = false;

    function handleSubmit() {
        if (!formSubmitted) {
            formSubmitted = true;
            return false;
        }
        return false;
    }
</script>

<form action="https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx" onsubmit="return handleSubmit();">
    <input type="hidden" name="payment" value="check" checked>
    <br>
    <input type="submit" name="order" id="order" class="button">
</form>

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

Actually disabled=true doesn't prevent elements of firing the onclick event. You could, instead, a javascript function to perform your submit instructions, and lock it with a variable after the first execution.

Something like this:

var submitEnabled = true;

function Submit() {
    if(submitEnabled) {
        submitEnabled = false;

        this.form.action='https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=1&deploy=1&compid=xxxxxx&h=xxxxxxxxxxxx';
        //Or any submitting code you have
    }
}

And then, your image element:

<INPUT type="image" onclick="Submit()" ...

Upvotes: 0

Tech Boost
Tech Boost

Reputation: 19

this.disabled=true will not work for input[type=image]. This has to handle in javascript.

<input type="image" onclick="return submitForm(this)"/>
<scritp>
var submitted = 0;
function submitForm(input){
   input.src = "new image path";
   if (submitted == 0) {
       submitted = 1;
       return true;
   }
   return false
}
</script>

Upvotes: 1

Related Questions