I have been looking at a lot of questions for this same topic and I have not found anything so I am forced to formulate a new one...
I have a form like this:
var value=$.trim($(".form-control").val());
if(value.length>0)
{
$("#user-data-next-button").attr('disabled', true);
} else{
$("#user-data-next-button").attr('disabled', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="userdevdata.php" method="post">
<label>Email</label>
<input type="email" class="form-control" name="email"/>
<label>Full name</label>
<input type="text" class="form-control" name="name"/>
<label>Address</label>
<input type="text" class="form-control" name="address"/>
<label>Postal code</label>
<input type="number" class="form-control" name="cp"/>
<label>City</label>
<input type="text" class="form-control" name="city"/>
<label>Province</label>
<input type="text" class="form-control" name="province"/>
</form>
<button id="user-data-next-button" class="btn my-button" disabled="true" ><i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-right"></i></button>
What I need is that, as long as all the fields of my form are not completed, the button is deactivated (disabled). Instead, when I complete all the form fields, the button must be activated ( disabled="false"
) to be clickable.
var userdevdata = 6;
if($("#usermail").val().length > 0){ userdevdata = userdevdata-1;}
if($("#username").val().length > 0){ userdevdata = userdevdata-1;}
if($("#useraddress").val().length > 0){ userdevdata = userdevdata-1;}
if($("#usercp").val().length > 0){ userdevdata = userdevdata-1;}
if($("#usercity").val().length > 0){ userdevdata = userdevdata-1;}
if($("#userprovince").val().length > 0){ userdevdata = userdevdata-1;}
if(userdevdata == 0){
$('#user-data-next-button').attr('disabled', false);
} else {
$('#user-data-next-button').attr('disabled', true);
}
I'm not very good with this comment thing. I've done this and it doesn't work for me I don't know if it's right or wrong.
Thank you.
To do this, you need to know the length of characters that are in each of the inputs of your form.
Based on your HTML , I'm including a small jQuery script that will allow you to do that:
You must add an ID to the form, or a class and change it in the code.
Roughly speaking, what this code does is look for all the input fields and check if their length is greater than 0 (you have typed something), and if all the fields are filled, then it removes the disabled property from the button.
I've added a link to the jsFiddle in case you need to mess around with it.
You can create a numeric variable equal to the number of fields you have, whenever a field is not empty.
you subtract one from the numeric variable and check if it is equal to zero. if it is equal to zero you remove the disabled.
The most direct thing is to ask for each of the fields to find out if they have been filled in and if one is empty, store it in a variable and show the button or not depending on its value. ...
The form adds ids
... with jquery for form field
or
If you ask for the class that is common to all fields, it will take the value of only one field, not all of them.
You can use the event
input
to do the checks: