Disable Button HTML

Question

I have a submit form for a URL and I want it to have specific behavior which I am not able to achieve so far. Initially I want the button to be enabled. After someone enters a URL and hits the "submit" button, I want to call my checkURL() function. If the function returns true, I want the button to become disabled and I want to then open remote_file.php. If it returns false, I want the button to be enabled and make them try another URL.

<form name=URLSubmitForm
    action="remote_file.php" 
    method="post">

    <input type="hidden" name="MAX_FILE_SIZE" value="524288000">
    <input type="text" name="name" size="50">
    <input type="submit" 
        onchange="this.disabled=false"
        onclick="this.disabled=true; checkURL();"
        value="submit">
</form>

Edit: It looks like I was just putting the onchange in the wrong place. I ended up doing this to fix reenabling the button

<input type="text" onchange="submit.disabled=false" name="name" size="50">

Thanks!

AJ. · Accepted Answer · 2011-07-15 20:35:27Z

1

I would propose that you attach the event handling code to the form's onsubmit event, not the button event(s). What you're trying to control is whether or not the form is posted. The button being disabled while your validation logic runs is a secondary goal.

Try this instead:

<script type="text/javascript">
function checkURL(){
    var submitButton = document.getElementById('submitButton');
    submitButton.disabled=true;

    /* implement your validation logic here
    if( url is invalid ){
        submitButton.disabled=false;
        return false;
    }
    */

    // everything is valid, allow form to submit
    return true;
}
</script>

<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post">
        <input type="hidden" name="MAX_FILE_SIZE" value="524288000">
        <input type="text" name="name" size="50">
        <input type="submit" name="submitButton" id="submitButton" value="submit">
</form>

edited Jul 15, 2011 at 20:35

answered Jul 15, 2011 at 20:10

AJ.

28.3k19 gold badges89 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mothmonsterman Over a year ago

returning false from the onclick of a submit button is a common validation pattern

mothmonsterman · Accepted Answer · 2011-07-15 20:11:09Z

1

<input type="submit" 
    onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }"
    value="submit">

answered Jul 15, 2011 at 20:11

mothmonsterman

2,4913 gold badges21 silver badges28 bronze badges

9 Comments

The Scrum Meister Over a year ago

According to the MDN Docs the disabled property type is boolean

Corey Over a year ago

this is good, except it does not reactivate the button if the text is changed in the box

mothmonsterman Over a year ago

it would never have been disabled, because if checkurl returned the form would submit and you get a clean start

mothmonsterman Over a year ago

@The Scrum Meister.. its defined as a boolean attribute, but the value is inconsequential, and IE prefers disabled=disabled when setting dynamically (why refer to mozilla docs? w3.org/TR/html4/interact/forms.html#h-17.12.1)

Corey Over a year ago

but if the cheekURL() function returned false then the button is disabled and it can't be reenabled unless I reload the page. I edited my answer to solve that problem; however, It still won't preform the action of loading remote_file.php

|

Paul DelRe · Accepted Answer · 2011-07-15 20:12:47Z

0

How about in the form's onsubmit event:

<form onsubmit="(function(){
    if(checkURL()){
        this.elements['submit'].disabled = 'disabled';
    }
    else{
        return false;
    }
})()">

Since you haven't given any ajax code, the form will still be submitted normally and when the page is reloaded the button will be enabled again.

answered Jul 15, 2011 at 20:12

Paul DelRe

4,0392 gold badges26 silver badges27 bronze badges

Comments

Kitet · Accepted Answer · 2011-07-15 20:13:59Z

0

onclick="checkURL(this);"

function checkURL(arg){
  this.disabled=true;
  if(<something>) this.disabled=false;
}

answered Jul 15, 2011 at 20:13

Kitet

8832 gold badges10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Disable Button HTML

4 Answers 4

1 Comment

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related