Develop Reference

Validation input if using show hide jQuery

How do i validate if there is a div that uses display:none
$("input[name$='test']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#test" + test).show();
});
$(".check").click(function(){
var name = $("#name").val();
var add = $("#add").val();
var hobby = $("#hobby").val();
if( name == "" ){
$("#name").css('border', '1px solid red');
return false
} else if ( add == "" ){
$("#add").css('border', '1px solid red')
} else if ( hobby == "" ){
$("#hobby").css('border', '1px solid red')
} else {
alert('success');
return true
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
<div class="condition">
<input type="radio" name="test" checked="checked" value="Y" id="first" />
<label for="first">First</label>
</div>
<div class="condition">
<input type="radio" name="test" value="N" id="second" />
<label for="second">Second</label>
</div>
<div class="condition">
<input type="radio" name="test" value="YN" id="third" />
<label for="third">Third</label>
</div>
</div>
<div id="testY" class="desc">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div id="testN" class="desc" style="display:none">
<label for="add">Add</label>
<input type="text" id="add" />
</div>
<div id="testYN" class="desc" style="display:none">
<label for="hobby">Hobby</label>
<input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>
When I fill in the first content and click validation, it should issue a success alert because my goal is to validate the div is showing.
Any idea?
Thank you

You can find the input need to check by checked radio value first then validate this input:
$("input[name$='test']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#test" + test).show();
});
$(".check").click(function(){
let checked = $("input[name$='test']:checked").val();
let input = $("#test" + checked).find('input');
let val = input.val();
if(!val){
$(input).css('border', '1px solid red');
return false
}
alert('success');
return true
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myRadio">
<div class="condition">
<input type="radio" name="test" checked="checked" value="Y" id="first" />
<label for="first">First</label>
</div>
<div class="condition">
<input type="radio" name="test" value="N" id="second" />
<label for="second">Second</label>
</div>
<div class="condition">
<input type="radio" name="test" value="YN" id="third" />
<label for="third">Third</label>
</div>
</div>
<div id="testY" class="desc">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div id="testN" class="desc" style="display:none">
<label for="add">Add</label>
<input type="text" id="add" />
</div>
<div id="testYN" class="desc" style="display:none">
<label for="hobby">Hobby</label>
<input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

Checkbox checked works only once

Message sending form, the customer has to select at least one of the alternatives (mail, SMS).
Send button would be disabled if none is selected and activate if one or both selected
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", "disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The issue is because your current logic does not deal with checkboxes being re-checked.
You can solve the problem by inverting the logic so that the disabled property is updated on every checkbox change, and is determined by the length of the checked boxes:
var $checkboxes = $('.form-check-input').change(function() {
$('#send').prop('disabled', function() {
return $checkboxes.filter(':checked').length == 0;
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can do it like this:
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
This will disable the button if none of the checkbox are checked.
Demo
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">
E-post
</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">
SMS
</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>

You never enable the button again. There is just a disable instruction.
I would disable it by default at beginning and then enable it if any of the checkboxes is checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").attr("disabled", "disabled");
$(this).each(function() {
if ($(this).is(':checked')) {
$("#send").removeAttr("disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
$('.form-check-input').change(function() {
let hasChecked = false;
$('.form-check-input').each(function() {
if ($(this).is(':checked')) {
hasChecked = true;
}
});
$("#send").attr("disabled", !hasChecked);
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Correct your logic. Once disabled you are not enabling again when checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", true);
}else{
$("#send").attr("disabled", false);
}
});
});
});
Blockquote

Passing certain form values over with a POST

What i am trying to do is, once my form is submitted, it will pass certain values from a form to PayPal.
This is my form code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" action="<?php echo whichPPUrl(); ?>" method="post" id="paypal_form" target="_blank">
<div class="form-group">
<label class="control-label col-xs-4" for="text">URL:</label>
<div class="col-xs-8">
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="checkbox"> </label>
<div class="col-xs-8">
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_1" value="1.00">
<strong>Moz</strong> - DA/PA/MozRank/Links In/Equity
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_2" value="1.00">
<strong>SEMRush</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_3" value="1.00">
<strong>Majestic</strong> - Rank/Keywords Number/Traffic/Costs/URL Links Number/Hostname Links Number/Domain Links Number
</label>
</div>
<div class="checkbox">
<label class="checkbox">
<input type="checkbox" class="sum" name="metrics_4" value="1.00">
<strong>Backlinks</strong> - Get any backlinks found for your domain plus anchor text (250 max.)
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4">Cost ($):</label>
<div class="col-xs-8">
<input id="total" name="cost" type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="total" class="control-label col-xs-4"> </label>
<div class="col-xs-8">
<input type="hidden" name="cmd" value="_xclick" />
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="custom" value="getTheFormValues()">
<input type="hidden" name="amount" value="getAndPassTheCost()">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<input type="image" src="images/purchase.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</div>
</div>
</div>
</form>
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
<script>
$(document).ready(function() {
// updates / adds the checkbox values
function updateSum() {
var total = "0.00";
$(".sum:checked").each(function(i, n) {
let sum = parseFloat(total) + parseFloat($(n).val());
total = sum.toFixed(2);
});
$("#total").val(total);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
updateSum();
});
</script>
I am not the greatest with Ajax, i have done a basic example of what i think is the right way to go:
This function:
<script>
// pass the total value over to the form: <input type="hidden" name="amount" value="getTheCost()">
function getAndPassTheCost() {
return $("#total").val();
}
</script>
Would get the value from the input text box and pass it through to the post form.
This function:
<script>
// pass the form values over and deal with them on the backend: <input type="hidden" name="custom" value="getTheFormValues()">
function getTheFormValues() {
return $("form").serialize();
}
</script>
Would just serialize all the form data which i can then validate and process on the backend.
Have i over complicated the process? my issue is i'm not able to pass this data to the form whcih is then sent via POST to a PayPal script, any help in the right direction would be appreciated.

The inputs can only store strings they cannot store functions. Assign values to form controls by the .val() method. The functions getAndPassTheCost() and getTheFormValues() are useless. If you need to serialize the form, do it during the submit event. As for collecting all of the form values, that is done at submit event -- just ensure that whatever values you want sent has a [name] attribute.
Demo will send to a live test server -- the response will be displayed in the iframe below.
function updateSum() {
var total = 0;
$(".sum:checked").each(function(i) {
let sum = parseFloat($(this).val());
total += sum;
});
$("#total, .total").val(total.toFixed(2));
}
$("input.sum").on('change', updateSum);
$('paypal_form').on('submit', function(e) {
$(this).serialize();
});
.line.line.line {
margin: -5px auto 5px
}
.img.img.img {
margin: -40px auto 0 -70px;
}
.img.img.img:focus {
outline: none
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<form class="form-horizontal" action="https://httpbin.org/post" method="post" id="paypal_form" target="response">
<section class='form-row'>
<fieldset class='form-group col'>
<legend>Wraith SEO</legend>
<input id="text" name="url" placeholder="site.com" type="text" class="form-control" required pattern='[a-z0-9]+?[.][a-z]{3,}'>
</fieldset>
</section>
<hr class='line'>
<section class='form-row'>
<div class='form-group col'>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_1" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_2" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_3" value="1.00"> 1.00</label></div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="sum form-check-input" name="metrics_4" value="1.00"> 1.00</label></div>
<label for='total' class="label-control">Total: $
<output id='total' value='0.00'> </output></label>
<input class='total' name='total' type='hidden' value=''>
</div>
</section>
<section class='form-row'>
<fieldset class='form-group mb-4'>
<input type="image" src="https://www.shareicon.net/data/128x128/2017/06/22/887585_logo_512x512.png" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" class='float-right img'>
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="contact#site.co.uk">
<input type="hidden" name="item_name" value="Wraith Metrics">
<input type="hidden" name="item_number" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="return" value="https://www.wraithseo.com/custom-metrics-builder.php?paid=1">
<input type="hidden" name="notify_url" value="https://www.wraithseo.com/gateway/ipn.php">
<iframe name='response' width='70%' class='float-left'></iframe>
</fieldset>
</section>
</form>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to show input box when each checkbox is clicked?

I have following 32 checkbox with 32 input field. Initially each input field is hidden. I want to show each input field when the corresponding checkbox is clicked. If the checkbox is unchecked then input field will be hidden.
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
I can hide the input field when page is load but can't get the idea what is the jQuery code to show/hide input field when checkbox is checked / unchecked.
jQuery Code :
$(document).ready(function () {
$('.ch_for').hide();
)};

You could use on click event with .toggle() to show/hide related input like :
$('.ch_for').hide();
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
To avoid the use of $('.ch_for').hide(); you could assign a class to all the input to hide them by default (hide for example), then toggle this class on click :
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggleClass('hide');
})
Hope this helps.
$(document).ready(function () {
$('.checkbox input:checkbox').on('click', function(){
$(this).closest('.checkbox').find('.ch_for').toggle();
})
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch01">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch03">CH03</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[]" value="ch04">CH04</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for hide">
</div>

HTML:
<div class="container">
<input type="checkbox" id="100" value="100" />
<div class='area100 hidden'>
<input></input>
</div>
<br />
<input type="checkbox" id="101" value="101" />
<div class='area101 hidden'>
<input></input>
</div>
<br />
</div>
JavaScript:
$(".container :checkbox").click(function () {
var testVar = ".area" + this.value;
if (this.checked) $(testVar).show();
else $(testVar).hide();
});
Here is a working JSFiddle example.

You can use:
change event
closest to get the related label
next to get the text box
toggle
trigger to initialize
The snippet:
$('.checkbox :checkbox').on('change', function(e) {
$(this).closest('label').next(':text').toggle(this.checked);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch01">CH01</label>
<input type="text" name="ch_for[1]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[1]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch03">CH02</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch04">CH04</label>
<input type="text" name="ch_for[4]" value="" placeholder="Channel details" class="form-control ch_for">
</div>

Try this :
<div class="checkbox form-inline">
<label><input type="checkbox" id = "CB1" name="ch_name[]"
value="ch02">CH02</label>
<input id = "IP1"type="text" name="ch_for[]" value="" placeholder="Channel
details" class="form-control ch_for">
</div>
$('#CB1').click(function() {
$('#IP1')[this.checked ? "show" : "hide"]();
});
Working Demo:
http://jsfiddle.net/GBSZ8/678/

$(document).ready(function() {
$('.ch_for').hide();
$('.checkbox').each(function() {
var $checkbox = $(this);
$checkbox.find('input[type="checkbox"]').change(function() {
var $input = $checkbox.find('input[type="text"]');
$(this).is(":checked") ? $input.show() : $input.hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH01</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label>
<input type="checkbox" name="ch_name[]" value="ch02">CH02</label>
<input type="text" name="ch_for[]" value="" placeholder="Channel details" class="form-control ch_for">
</div>

Assuming your HTML is like the following with other checkboxes:
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[2]" value="ch02">CH02</label>
<input type="text" name="ch_for[2]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
<div class="checkbox form-inline">
<label><input type="checkbox" name="ch_name[3]" value="ch03">CH03</label>
<input type="text" name="ch_for[3]" value="" placeholder="Channel details" class="form-control ch_for">
</div>
......
jQuery: We can use toggle();
jQuery(document).ready(function($){
$('.ch_for').hide(); //Also we can initially hide it using CSS;
$('div.checkbox input[type="checkbox"]').change(function(){
$('.ch_for',this.parentNode.parentNode).toggle( $(this).is(':checked') );
}).trigger('change');
});
Here is the working sample: http://jsfiddle.net/kkpu0s5r/

$('input[type="checkbox"]').click(function(){
if($(this).is(':checked')){
$('.ch_for').hide();
}else{
$('.ch_for').show();
}
});

jQuery can only read select option once?

I think I may have found a bug I can't work around.
JSfiddle
I have an HTML dropdown with some html5 data. On change the jquery should find the selected option and pull the data from that option, then check some boxes.
I don't know how else to explain it except goto the jsfiddle and try it. The first option should check the first half of boxes and the second option should select all the checkboxes.
I hope someone here can tell me what I'm doing wrong. Be sure to change the select box 3-4 for interesting behavior.
Best,
Ryan
HTML
<h2>Features</h2>
<div class="form-group">
<div class="col-md-12 required">
<label for="feature_groups">Feature Group(Quick Select)</label>
<select name="feature_groups" class="form-control" id="feature_groups">
<option value="">Select One</option>
<option data-group='3,4,7,8'>2reg</option>
<option data-group='1,2,3,4,5,6,7,8'>fg1</option>
</select>
</div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
<label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
<label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
<label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
<label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
<label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
<label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
<label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
<label for="Feature5FeatureId">Premium Rims</label>
</div>
JS
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').attr('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
}
}
});
});

It is the same old attr() vs prop() issue....
Use .prop() to set the checked state instead of .attr()
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').prop('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
}
}
});
});
Demo: Fiddle