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.

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.

• javascript
• jquery
• html
• forms

• 1 Instead of disabling it on page load couldn't you just put the disabled attribute on the button and use your function to enable it. – rfoo Commented Feb 24, 2014 at 23:25

1 Answer 1

If you just want to enable/disable input:

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

Example:

http://jsfiddle/juvian/R95qu