CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Usman Tahir
Usman Tahir

Reputation: 33

JavaScript/jQuery Class modification

I'm trying to change the state of a button (using Bootstrap) from active to inactive based on input from the user. In the bigger picture, I am trying to come up with an intuitive way to test input for a form, so that once every field is valid, the submit button can then be pressed for PHP processing on the server side. Here is what I currently have for code:

<br>
<label>
    Input: <input type="text" name="sample" class="form-control" id="input" onkeyup="activateButton()" required>
</label>

<br>
<label>
    <button type="submit" name="submit" class="btn btn-success disabled" id="button">Submit</button>
</label>

<script type="text/javascript">
    function activateButton() {
        "use strict";

        var input = document.getElementById("input").val();
        if (input == "activate") {
            document.getElementById("button").className = "btn btn-success active";
        }

    }
</script>

This is, of course within html markup, and so I wanted to get some pointers on how to approach this, since my current setup doesn't seem to work. Thank you!

Upvotes: 0

Views: 61

Answers (1)

Varun
Varun

Reputation: 1946

In your code document.getElementById("input").val(); should be document.getElementById("input").value;

And Since you have tagged question in jquery too..

 function activateButton() {
        "use strict";

        var input =$("#input").val();
        if (input == "activate") {
            $("#button").toggleClass("btn btn-success active");
        }

    }

ADDITION(extra info asked by the user):

$("input").keyup(function(){
        var d=$(this).val();
        var res = d.test(/your-regex-here/);
        if(res)
        {
              //enable button here
        }
        else
        {
              //disable button here
        }
    });

Upvotes: 1

Related Questions