We Keep Coding

disable submit button when input fields is null

I want to disable submit button when 4 input fields are nulls
<input type="text" name="val1" id="val1">
<input type="text" name="val2" id="val2">
<input type="text" name="val3" id="val3">
<input type="text" name="val4" id="val4">
submit button
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />
I am using
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.sendButton').attr('disabled',true);
$('#val1').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val2').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val3').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
$('#val4').keyup(function(){
if($(this).val().length !=0){
$('.sendButton').attr('disabled', false);
}
else
{
$('.sendButton').attr('disabled', true);
}
})
});
</script>
I think I am using wrongly. I put all ids in one function.
$('#val1','#val2','#val3','#val4').keyup(function(){
this code is not working . any suggestion. how to use & and condition(val1 &val2 & val3 &val4) in these function?.

The way I would try and solve this is like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$("#val1").keyup(function(event) {
validateInputs();
});
$("#val2").keyup(function(event) {
validateInputs();
});
$("#val3").keyup(function(event) {
validateInputs();
});
$("#val4").keyup(function(event) {
validateInputs();
});
function validateInputs(){
var disableButton = false;
var val1 = $("#val1").val();
var val2 = $("#val2").val();
var val3 = $("#val3").val();
var val4 = $("#val4").val();
if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
disableButton = true;
$('.sendButton').attr('disabled', disableButton);
}
</script>
This way you will have a single place for checking your logic and not having to maintain it at N number of places if you diced to add more inputs later. And also a bit better solution would be to give your inputs the same class so you could do something like
$(".myInputs").keyup(function(event){
validateInputs();
});
Here is a jsFiddle example: https://jsfiddle.net/moj2dnup/

You could use the pattern attribute you would also need to use the required attribute otherwise an input field with an empty value will be excluded from constraint validation. This will prevent your form from being submitted, however, it won't disable your button.
Example:
<input pattern=".{5,}" required title="5 character minimum">
<input pattern=".{5,10}" required title="between 5 and 10 characters">

$(document).ready(function(){
$('.sendButton').attr('disabled',true);
$('.txtValues').keyup(function(){
var checkNull=false;
$('.txtValues').each(function(index,input){
if($(this).val().length !=0)checkNull=true;
});
if(checkNull){
$('.sendButton').attr('disabled', false);
}else{
$('.sendButton').attr('disabled', true);
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" name="val1" id="val1" class="txtValues">
<input type="text" name="val2" id="val2" class="txtValues">
<input type="text" name="val3" id="val3" class="txtValues">
<input type="text" name="val4" id="val4" class="txtValues">
<input name="contact" type="submit" id="contact" value="Update" style="padding:5px" class="sendButton" disabled />
Use a common css class for all inputs. Loop through inputs using $.each and check all values are null.

change radio button check status using JQuery

I have two radio buttons with one input text, when I insert value more than 12 it will automatically check RadioBtn2 otherwise it will check RadioBtn1
It works OK but when I return to textbox and change the value again it not working until I refresh the page
$(function() {
$('#field222').change(function() {
var text_value = $("#field222").val();
if (text_value >= '12') {
$('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
} else {
$('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

That's because you have incorrect condition in if statemenet. You need to parse the value to integer before making greater than check.
You also need to change change event to keyup and set property checked as true:
var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
$('input:radio[id="RadioBtn1"]').prop("checked", true);
} else {
$('input:radio[id="RadioBtn2"]').prop("checked", true);
}
$(function() {
$('#field222').keyup(function() {
var text_value = parseInt($("#field222").val());
debugger;
if (text_value >= 12) {
$('input:radio[id="RadioBtn1"]').prop("checked", true);
} else {
$('input:radio[id="RadioBtn2"]').prop("checked", true);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend

Try the code with keypress function and prop for radio button check.
$(function() {
$('#field222').keyup(function() {
var text_value = parseInt($("#field222").val());
if (text_value >=12) {
$('input:radio[id="RadioBtn1"]').prop("checked", true);
} else {
$('input:radio[id="RadioBtn2"]').prop("checked", true);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='integer' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' checked>Secend
Run code

Parse the value and if condition like this
For versions of jQuery equal or above (>=) 1.6, use:
var text_value = parseInt($("#field222").val());
if (text_value >= 12) {
$('#RadioBtn1').prop("checked", true);
} else {
$('#RadioBtn2').prop("checked", true);
}

when I return to textbox and change the value again it not working
this is because you are using .attr when you should be using .prop. Essentially, the 2nd radio's .attr is always set and because you can only have one checked, the browser shows the second as checked.
It works fine if you use .prop or if you use .removeAttr before setting it again.
$(function() {
$('#field222').change(function() {
var text_value = $("#field222").val();
if (text_value >= '12') {
$('input:radio[id="RadioBtn2"]').prop('checked', 'checked');
} else {
$('input:radio[id="RadioBtn1"]').prop('checked', 'checked');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend
$(function() {
$('#field222').change(function() {
var text_value = $("#field222").val();
$('input:radio').removeAttr("checked");
if (text_value >= '12') {
$('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
} else {
$('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option2' >Secend
You will also need to parse the value to an int if you want to check it numerically, but it works with strings as-is (use "0" and "12" to show it working).

$(function() {
$('#field222').keyup(function() {
var text_value = $("#field222").val();
if (text_value >= 12) {
$('#RadioBtn2').prop('checked', true);
} else {
$('#RadioBtn1').prop('checked', true);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' class='input-lg' id='field222'>
<input type='radio' name='Radios' id='RadioBtn1' value='option1' checked>First
<input type='radio' name='Radios' id='RadioBtn2' value='option1' >Secend

I have seen one issue in above example that you are taking integer value and trying to compare with string.
Instead of
if (text_value >= '12') {
$('input:radio[id="RadioBtn2"]').attr('checked', 'checked');
} else {
$('input:radio[id="RadioBtn1"]').attr('checked', 'checked');
}
Use
if (text_value >= 12) {
$("input[id='RadioBtn1']").prop("checked", true);
} else {
$("input[id='RadioBtn2']").prop("checked", true);
[See Working Demo](https://jsfiddle.net/HuZcM/1137/
)

Disable form submit button if all input and textarea are empty except one

I need to enable a submit button only when each input fields has a value except one. The except one.
HTML:
// start of form
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<input type='text /> // cant be blank
<textarea type='text /> // cant be blank
<button type='submit'>Submit</button>
// end of form
<input id='subscription-input' type='text /> // exclude this one only
[...]
JS:
function doCheck(){
var allFilled = true;
$('input[type=text]').not('#subscription-input').each(function(){
if($(this).val() == ''){
return false;
}
});
if (allFilled) {
// Apply active css and enable button
$('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
$('button[type=submit]').prop('disabled', !allFilled);
}
}
$(document).ready(function(){
$('input[type=text]').keyup(doCheck).focusout(doCheck);
});
Basically I need a way to get the textarea field so I thought adding wilecard (*) would work:
$('*[type=text]').not('#subscription-input').each(function(){...}
How to get the input and textarea fields?

Apply the same class to all the fields and attach event to that class with a not for the ID:
function doCheck() {
var allFilled = true;
$('.form-fields:not(#subscription-input)').each(function() {
if ($(this).val() == '') {
allFilled = false;
}
});
$('button[type=submit]').prop('disabled', !allFilled);
if (allFilled) {
$('button[type=submit]').removeAttr('disabled');
}
}
$(document).ready(function() {
doCheck();
$('.form-fields').keyup(doCheck);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='form-fields' />
<input type='text' class='form-fields' />
<input type='text' class='form-fields' />
<textarea class='form-fields'></textarea>
<input id='subscription-input' class='form-fields' type='text' />
<button type='submit'>Submit</button>

change code to:
function doCheck(){
var allFilled = true;
$('input[type=text]:not(#subscription-input),textarea').each(function(){
if($(this).val() == ''){
allFilled=false;
}
});
if (allFilled) {
// Apply active css and enable button
$('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
$('button[type=submit]').prop('disabled', !allFilled);
}
}
$(document).ready(function(){
$('input[type=text]').keyup(doCheck).focusout(doCheck);
});

Here you go with the solution https://jsfiddle.net/ehjxvz4j/1/
function doCheck(){
var allFilled = true;
$('input[type=text]').not('#subscription-input').each(function(){
if($(this).val() == ''){
allFilled = false;
}
});
if($('textarea').val() == ''){
allFilled = false;
}
if (allFilled) {
// Apply active css and enable button
$('button[type=submit]').removeClass('form-submit--plain').addClass('form-submit--active');
}
$('button[type=submit]').prop('disabled', !allFilled);
}
$(document).ready(function(){
$('input[type=text], textarea').focusout(doCheck);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
<input type='text' />
<input type='text' />
<textarea></textarea>
<button type='submit' disabled>Submit</button>
<input id='subscription-input' type='text'/>

how to validate multiple textboxes on button click using jquery

In my application I have five textboxes.
When submit button click I want to validate these textboxes.
Validation should be at least 3 textboxes should have value in it.
Old way is using jQuery each loop we can check but is there any other way to do it ?
$("#submitBtn").on("click", function(){
var count = 0;
$(".textboxesDiv input").each(function () {
if($(this).val() != "" && $(this).val() != null && $(this).val() != undefined){
count++;
}
});
if(count > 2 )
{
alert("3 or more");
}
else{
alert("lessa than 3");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textboxesDiv">
<input type="text" id="textbox1" >
<input type="text" id="textbox2" >
<input type="text" id="textbox3" >
<input type="text" id="textbox4" >
<input type="text" id="textbox5" >
</div>
<input type="submit" id ="submitBtn" name="button"/>
https://jsfiddle.net/7Lmgbbng/1/

Check this example
http://jsfiddle.net/ggChris/mfbaxkfp/
<input id="AccountText" type="text" name="AccountText" value="" class="form-control" placeholder="Name" required=''/>
<input class="button" type="submit" value="submit">
$(document).ready(function(){
$('.button').click(function(){
if ($('input#AccountText').val() == ""){
alert('Please complete the field');
}
});
});
or you can use jquery validation
https://jqueryvalidation.org/

Disable submit button until all form inputs have data

I'm trying to disable the submit button until all inputs have some data. Right now the button is disabled, but it stays disabled after all inputs are filled in. What am I doing wrong?
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
if ($('input').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}

Here's a modification of your code that checks all the <input> fields, instead of just the first one.
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
// get all input fields except for type='submit'
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
// if it has a value, increment the counter
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">

Vanilla JS Solution.
In question selected JavaScript tag.
HTML Form:
<form action="/signup">
<div>
<label for="username">User Name</label>
<input type="text" name="username" required/>
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div>
<label for="r_password">Retype Password</label>
<input type="password" name="r_password" />
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" />
</div>
<input type="submit" value="Signup" disabled="disabled" />
</form>
JavaScript:
var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
var disabled = false
inputs.forEach(function(input, index) {
if (input.value === '' || !input.value.replace(/\s/g, '').length) {
disabled = true
}
})
if (disabled) {
register.setAttribute('disabled', 'disabled')
} else {
register.removeAttribute('disabled')
}
})
Some explanation:
In this code we add keyup event on html form and on every keypress check all input fields. If at least one input field we have are empty or contains only space characters then we assign the true value to disabled variable and disable submit button.
If you need to disable submit button until all required input fields are filled in - replace:
inputs.forEach(function(input, index) {
with:
required_inputs.forEach(function(input, index) {
where required_inputs is already declared array containing only required input fields.
JSFiddle Demo: https://jsfiddle.net/ydo7L3m7/

You could try using jQuery Validate
http://jqueryvalidation.org/
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
And then do something like the following:
$('#YourFormName').validate({
rules: {
InputName1: {
required: true
},
InputName2: { //etc..
required: true
}
}
});

Refer to the sample here.
In this only input of type="text" has been considered as described in your question.
HTML:
<div>
<form>
<div>
<label>
Name:
<input type="text" name="name">
</label>
</div>
<br>
<div>
<label>
Age:
<input type="text" name="age">
</label>
</div>
<br>
<div>
<input type="submit" value="Submit">
</div>
</form>
</div>
JS:
$(document).ready(function () {
validate();
$('input').on('keyup check', validate);
});
function validate() {
var input = $('input');
var isValid = false;
$.each(input, function (k, v) {
if (v.type != "submit") {
isValid = (k == 0) ?
v.value ? true : false : isValid && v.value ? true : false;
}
if (isValid) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
});
}

Try to modify your function like this :
function validate(){
if ($('input').val() != '') {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
and place some event trigger or something like onkeyup in jquery.But for plain js, it looks like this :
<input type = "text" name = "test" id = "test" onkeyup = "validate();">
Not so sure of this but it might help.

Here is a dynamic code that check all inputs to have data when wants to submit it:
$("form").submit(function(e) {
var error = 0;
$('input').removeClass('error');
$('.require').each(function(index) {
if ($(this).val() == '' || $(this).val() == ' ') {
$(this).addClass('error');
error++;
}
});
if (error > 0) {
//Means if has error:
e.preventDefault();
return false;
} else {
return true;
}
});
.error {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<form action="google.com">
<input type="text" placeholder="This is input #1" class="require" />
<input type="text" placeholder="This is input #2" class="require" />
<input type="submit" value="submit" />
</form>
</form>
Now you see there is a class called require, you just need to give this class to inputs that have to have value then this function will check if that input has value or not, and if those required inputs are empty Jquery will prevent to submit the form!

Modify your code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">
<script>
$(document).ready(function (){
validate();
$('input').on('keyup', validate);
});
function validate(){
$("input[type=text]").each(function(){
if($(this).val().length > 0)
{
$("input[type=submit]").prop("disabled", false);
}
else
{
$("input[type=submit]").prop("disabled", true);
}
});
}
</script>

function disabledBtn(_className,_btnName) {
var inputsWithValues = 0;
var _f = document.getElementsByClassName(_className);
for(var i=0; i < _f.length; i++) {
if (_f[i].value) {
inputsWithValues += 1;
}
}
if (inputsWithValues == _f.length) {
document.getElementsByName(_btnName)[0].disabled = false;
} else {
document.getElementsByName(_btnName)[0].disabled = true;
}
}
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="submit" value="Join" id="yyyyy" disabled name="fruit">