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!

Answer 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>