CODEWITHSUNDEEP
phpjavascripthtml
Corey
Corey

Reputation: 781

Disable Button HTML

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!

Upvotes: 1

Views: 7516

Answers (4)

AJ.
AJ.

Reputation: 28204

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>

Upvotes: 1

Kitet
Kitet

Reputation: 883

onclick="checkURL(this);"

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

Upvotes: 0

Paul DelRe
Paul DelRe

Reputation: 4029

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.

Upvotes: 0

mothmonsterman
mothmonsterman

Reputation: 2491

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

Upvotes: 1

Related Questions