CODEWITHSUNDEEP
javascriptjqueryhtml
vinoth kumar
vinoth kumar

Reputation: 33

Jquery function not working for two or more forms

Hello all i have below jquery function to enable submit only if the input has 1 or more values but i have the same many input and submit button on my page the jquery function is wrking fine for 1st form but it doesnt work for other forms.

Script:

$(function () 
{
    $("#textbox").bind("change keyup", function () 
    {      
        if ($("#textbox").val() != "")
            $(this).closest("form").find(":submit").removeAttr("disabled");
        else
            $(this).closest("form").find(":submit").attr("disabled", "disabled");      
    });
});

HTML:

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" id="textbox" name="textbox" />
    <input type="submit" id="submit" name="submit" value="textbox" disabled="disabled" />
</form>

When I type anything in 1st textbox the submit button getting activated and working fine but if i add any values in second or third text box the submit button is not getting activated.

Upvotes: 1

Views: 220

Answers (3)

Silver_Clash
Silver_Clash

Reputation: 405

Because you can add only one element with id="textbox" on the same page.

Add some class name to inputs (e.g. "textbox"), and change selector '#textbox' to '.textbox' on event binding:

$(function () 
{
    $(".textbox").bind("change keyup", function () 
    {      
        if ($(this).val() != "")
            $(this).closest("form").find(":submit").removeAttr("disabled");
        else
            $(this).closest("form").find(":submit").attr("disabled", "disabled");      
    });
});

Upvotes: 3

steo
steo

Reputation: 4656

First of all , you are using the same ID's for more div in html and this is NO good. Id's are unique. Use a class instead. Otherwise it won't work with classes neither , you should try using 3 different divs or $.each() function or recogninizing on keyup()

Upvotes: 0

ATOzTOA
ATOzTOA

Reputation: 35950

Just use class instead of id as you cannot have more than one element with same id.

Also, you need to use $(this) inside the event handler to access the changed element.

Try this:

<script type="text/javascript">
    $(function () {
        $(".textbox").bind("change keyup", function () {      
                if ($(this).val() != "")
                    $(this).closest("form").find(":submit").removeAttr("disabled");
                else
                    $(this).closest("form").find(":submit").attr("disabled", "disabled");      
            });
        });
</script>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

<form action="http://localhost/" method="post" accept-charset="utf-8">
    <input type="text" class="textbox" name="textbox" />
    <input type="submit" class="submit" name="submit" value="textbox" disabled="disabled" />
</form>

Upvotes: 1

Related Questions