CODEWITHSUNDEEP
javascriptjqueryhtmlforms
kellysan
kellysan

Reputation: 13

Disable submit button on page load, enable it after function is called

I have a username/password form where the password appears after the user enters their username. Here is the HTML:

<form action="login.php" method="post">
    <!-- Username form -->
    <div id="form1">
        <input type="text" id="username" name="username" placeholder="username">
        <input type="button" value="" id="test1" onClick="switchForm()">
    </div>
    <!-- Password form -->
    <div id="form2">
        <input type="password" id="password" name="password" placeholder="password">
        <input id="button" type="submit" value="">
    </form>

and here is the Javascript for the function switchForm():

function switchForm() {
   document.getElementById("form1").style.display = "none";
   document.getElementById("form2").style.display = "block";
   document.getElementById("password").focus();
}

I have another piece of code that has the enter button simulate a click of test1 so the form switches when a user presses enter. The issue is the form submits all the way (including the blank password field). What I want is to disable the submit button during page load, and re-enable it during the execution of switchForm(). Thanks in advance! I think it has something to do with .prop() or .attr() or something, but I'm not sure the best way to do this.

Upvotes: 1

Views: 15025

Answers (1)

juvian
juvian

Reputation: 16068

If you just want to enable/disable input:

$("#your_input").attr('disabled','disabled'); // disable
$("#your_input").removeAttr('disabled');//enable

Example:

http://jsfiddle.net/juvian/R95qu

Upvotes: 5

Related Questions