Develop Reference

jQuery form, check if radio is checked

Im having trouble getting values from the checked radio:
<form id="addform" /*action="catch.php" method="POST"*/>
<div class="form-group input-container">
<label class="col-sm-7"> *Href looks like "/vacacy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="0" type="radio" required>
<label class="col-sm-7"> *Href looks like "https://www.test.com/vacancy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="1" type="radio" required>
</div>
</form>
This is the JavaScript code:
$( "#check" ).click(function()
{
var $inputs = $('#addform :input');
var values = {};
$inputs.each(function()
{
if (this.name === "vacancy_full_URL")
{
if (/* check if radiobutton is checked */)
{
values[this.name] = $(this).val();
}
}
else
{
values[this.name] = $(this).val();
}
});
});
I'm having trouble finding the right functions to check this with. My earlier attempt if (this.checked() === true) did not work. Can you please help me?

Use is(":checked") to find if a radio button is checked. Also there are few mistakes in html form like a you have make the form self closing. Secondly there was no item with id check
$("#check").click(function(e) {
e.preventDefault()
var $inputs = $('#addform :input');
var values = {};
$inputs.each(function() {
if (this.name === "vacancy_full_URL" && $(this).is(":checked")) {
values[this.name] = $(this).val();
} else {
values[this.name] = $(this).val();
}
});
console.log(values)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="addform" action="catch.php" method="POST">
<div class="form-group input-container">
<label class="col-sm-7"> *Href looks like "/vacacy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="0" type="radio" required>
<label class="col-sm-7"> *Href looks like "https://www.test.com/vacancy/12": </label>
<input class="col-sm-3" name="vacancy_full_URL" value="1" type="radio" required>
</div>
<button type='submit' id='check'>Click</button>
</form>

You can handle click event on button and check radion click name with :checked
$(document).ready(function(){
$("#check").click(function(){
var radioValue = $("input[name='vacancy_full_URL']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});

Please try this.
$(document).ready(function () {
$("#check").click(function () {
var values = {};
var other_data = $('input[type=radio]', $('#addform'));;
$.each(other_data, function (key, input) {
if (input.checked) {
values[input.name + "_checked"] = input.value;
} else {
values[input.name+ "_unchecked"] = input.value;
}
});
});
})

how to get the text value from selected li and pass it to input in another li using js

$(document).ready(function () {
function create_custom_dropdowns() {
$('select').each(function (i, select) {
if (!$(this).next().hasClass('dropdown')) {
$(this).after('<div class="dropdown ' + ($(this).attr('class') || '') + '" tabindex="0"><span class="current"></span><div class="list"><ul></ul></div></div>');
var dropdown = $(this).next();
var options = $(select).find('option');
var selected = $(this).find('option:selected');
dropdown.find('.current').html(selected.data('display-text') || selected.text());
if ($(this).hasClass('area')) {
dropdown.find('ul').append('<li class="option"><input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min"> <input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>')
}
options.each(function (j, o) {
var display = $(o).data('display-text') || '';
dropdown.find('ul').append('<li class="option ' + ($(o).is(':selected') ? 'selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '">' + $(o).text() + '</li>');
});
}
});
}
$('.area').on('change', function () {
document.getElementById('displayValue').value = this.options[this.selectedIndex].text;
document.getElementById('idValue').value = this.options[this.selectedIndex].text;
})
$(".box1").change(function () {
var selected = $(this).find("option:selected").text();
$(".area-ft").val(selected);
if (selected === "0") {
$(".area-ft").show();
} else {
$(".area-ft").hide();
}
});
// Open/close
$(document).on('click', '.dropdown', function (event) {
$('.dropdown').not($(this)).removeClass('open');
$(this).toggleClass('open');
if ($(this).hasClass('open')) {
$(this).find('.option').attr('tabindex', 0);
$(this).find('.selected').focus();
} else {
$(this).find('.option').removeAttr('tabindex');
$(this).focus();
}
});
// Close when clicking outside
$(document).on('click', function (event) {
if ($(event.target).closest('.dropdown').length === 0) {
$('.dropdown').removeClass('open');
$('.dropdown .option').removeAttr('tabindex');
}
event.stopPropagation();
});
// Option click
$(document).on('click', '.dropdown .option', function (event) {
$(this).closest('.list').find('.selected').removeClass('selected');
$(this).addClass('selected');
var text = $(this).data('display-text') || $(this).text();
$(this).closest('.dropdown').find('.current').text(text);
$(this).closest('.dropdown').prev('select').val($(this).data('value')).trigger('change');
});
// Keyboard events
$(document).on('keydown', '.dropdown', function (event) {
var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
// Space or Enter
if (event.keyCode == 32 || event.keyCode == 13) {
if ($(this).hasClass('open')) {
focused_option.trigger('click');
} else {
$(this).trigger('click');
}
return false;
// Down
} else if (event.keyCode == 40) {
if (!$(this).hasClass('open')) {
$(this).trigger('click');
} else {
focused_option.next().focus();
}
return false;
// Up
} else if (event.keyCode == 38) {
if (!$(this).hasClass('open')) {
$(this).trigger('click');
} else {
var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
focused_option.prev().focus();
}
return false;
// Esc
} else if (event.keyCode == 27) {
if ($(this).hasClass('open')) {
$(this).trigger('click');
}
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b-drop listing-drops">
<form class="serc">
<select name="zone" class="zone ">
<option value="volvo">Bangalore East</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<select name="zone" class="locality">
<option value="volvo">All Localities</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<select name="zone" class="area box1">
<option value="volvo">Area</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<button type="button" class="search button button--aylen">Find Properties</button>
<button type="button" class="clear-filter">Clear Filters</button>
</form>
</div>
This below code is for dropdown. I need to pass the text value to input which is in li from the another selected li. Both input should have different selection. and both selected value need to pass to the main div span which have class current
<div class="dropdown area" tabindex="0">
<span class="current">East</span>
<div class="list">
<ul>
<li class="option">
<input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min">
<input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>
<li class="option" data-value="volvo" data-display-text="">Area</li>
<li class="option selected" data-value="saab" data-display-text="">East</li>
<li class="option " data-value="fiat" data-display-text="">West</li>
<li class="option " data-value="audi" data-display-text="">South</li>
</ul>
</div>
</div>
I tried using this
$('.area').on('change', function () {
document.getElementById('displayValue').value = this.options[this.selectedIndex].text;
document.getElementById('idValue').value = this.options[this.selectedIndex].text;
})

on change event will not work,because when you click on li tag that doesn't change any input
check -> definition
try ->
$('.area li').on('click', function () {
document.getElementById('displayValue').value =
this.options[this.selectedIndex].text;
document.getElementById('idValue').value = this.options[this.selectedIndex].text;
})

You could use an click event on your li elements and then you have to write the text from your clicked li element into your input fields.
$(".option").on("click", function(){
if($("#displayValue").val() === ""){ //If first input empty...
$("#displayValue").val($(this).text()); //...write into first input
}else{
if($("#displayValue").val() !== $(this).text()){ //if value from first input not equal selected value
$("#idValue").val($(this).text()); //...write into second input
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="dropdown area" tabindex="0">
<span class="current">East</span>
<div class="list">
<ul>
<li class="option">
<input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min">
<input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>
<li class="option" data-value="volvo" data-display-text="">Area</li>
<li class="option selected" data-value="saab" data-display-text="">East</li>
<li class="option " data-value="fiat" data-display-text="">West</li>
<li class="option " data-value="audi" data-display-text="">South</li>
</ul>
</div>

onchange event means using select DOM with option
$('.area').on('change', function () {
$('#displayValue').val($("select option:selected").text());
$('#idValue').val($("select option:selected").text());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="area">
<option value="Area">Area</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="South">South</option>
</select>
<input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min">
<input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>

Multiple Checkboxes with Select All

I modified an existing fiddle to get a comprehensive solution for multiple checkboxes with select/unselect functionality. Now, it counts how many checkboxes checked and also gives which the checkboxes checked. It looks like it works fine but there are some points to fix and needs to improve it a bit more:
When you first check the option A and then click the "Select All" checkbox, the system does not work well.
The whole code looks like it's a bit long. I think we can shorten the code someway but I don't know how.
When we check all options manually, the firstgroup checkbox should automatically be checked or otherwise when any of the options are unchecked, the firstgroup checkbox should automatically unchecked. And accordingly, the div contents should change.
Thanks for any contribution.
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
x = document.getElementById("result");
y = document.getElementById("form");
x.innerHTML = '';
y.innerHTML = '';
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});
$("input[type='checkbox'].order").change(function() {
var check = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
var classes = $("input[type='checkbox'].order:checked").map(function() {
return this.id;
}).get().join(", ");
if(check > 0) {
if(check == 1) {
x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
} else if(check == tnocb) {
x.innerHTML = 'all of them are checked';
} else {
x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
}
y.style.display = 'block';
} else {
x.innerHTML = '';
y.style.display = 'none';
}
return false;
});

$("#firstgroup").click(function() {
$('#form').text('');
$('#result').text('');
$('input:checkbox').not(this).prop('checked', this.checked);
if ($(".order:checked").length == 3) {
$('#form').text('all of them are checked');
}
});
$(".order").on('click', function() {
var selectedItems = '';
$('#result').text('');
$('#form').text('');
if ($(".order:checked").length == 3) {
$('#form').text('all of them are checked');
$("#firstgroup").prop('checked','checked');
} else if ($(".order:checked").length > 0) {
$("#firstgroup").prop('checked','');
$(".order:checked").each(function(i, d) {
selectedItems += d.id + ',';
});
$('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
$('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
}
});
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

The first issue
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", $("#firstgroup").prop("checked"));
});
The second issue I can not fix.

$("#firstgroup").click(function () {
if ($("#firstgroup[type='checkbox']:checked"));
{
$("#firstgroup").siblings("input[type='checkbox']").prop('checked', true);
}
});
maybe it helps you.

<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
<script type="text/javascript">
x = document.getElementById("result");
y = document.getElementById("form");
x.innerHTML = '';
y.innerHTML = '';
$("#firstgroup").click(function() {
var checkBoxes = $("input[type='checkbox'].order");
checkBoxes.prop("checked", !checkBoxes.prop("checked"));
$('.order').not(this).prop('checked', this.checked); //it will check and uncheck all checkbox
});
$("input[type='checkbox'].order").change(function() {
var check = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
var classes = $("input[type='checkbox'].order:checked").map(function() {
return this.id;
}).get().join(", ");
if(check > 0) {
if(check == 1) {
x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
} else if(check == tnocb) {
x.innerHTML = 'all of them are checked';
} else {
x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
}
y.style.display = 'block';
} else {
x.innerHTML = '';
y.style.display = 'none';
}
return false;
});
</script>

I updated the multiple checkboxes with Select All's code: http://jsfiddle.net/LUtJF/42/
Now, you can
Get the number of checked checkboxes
Get the labels of the checked checkboxes
Get a message when all the checkboxes are checked
When you select all the checkboxes, the "Select All" checkbox is also checked automatically, or vice versa.
The system is responsive. Whenever you add a new option, no need to change any code.
Thanks for all your contribution and hope you'll find this last version useful.
Ahmet Arduc
www.ahmath.com
<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C<br>
<input type="checkbox" class="order" id="forth" /> D
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
$("#firstgroup").click(function() {
$('#form').text('');
$('#result').text('');
$('input:checkbox').not(this).prop('checked', this.checked);
if($(".order:checked").length == $(".order").length) {
$('#form').text('all of them are checked');
}
});
$(".order").on('click', function() {
var selectedItems = '';
$('#result').text('');
$('#form').text('');
if ($(".order:checked").length == $(".order").length) {
$('#firstgroup').prop('checked', true);
$('#form').text('all of them are checked');
} else if ($(".order:checked").length > 0) {
$('#firstgroup').prop('checked', false);
$(".order:checked").each(function(i, d) {
selectedItems += d.id + ',';
});
$('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
$('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
}
});

Not working select option dynamic field in jquery

jQuery(function() {
var currentCount = 0;
jQuery('#addMoreEmail').click(function() {
currentCount = cloning('#MoreEmailDetails', '#MoreEmails', currentCount);
return false;
});
function cloning(from, to, counter) {
var clone = $(from).clone();
//console.log(clone);
counter++;
// Replace the input attributes:
clone.find(':input').each(function() {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val();
});
// Replace the label for attribute:
clone.find('label').each(function() {
var newFor = jQuery(this).attr('for').replace(0, counter);
jQuery(this).attr('for', newFor);
});
// Replace the text between html tags:
clone = clone.html().replace(1, counter);
jQuery(to).before(clone);
return counter;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MoreEmailDetails">
<div class="form-group users">
<input type="text" required="required" id="LeadEmailDetail0FirstName" value="" name="data[LeadEmailDetail][0][first_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<input type="text" id="LeadEmailDetail0LastName" value="" name="data[LeadEmailDetail][0][last_name]">
<label for="LeadEmailDetail0FirstName">First Name</label>
<select id="LeadEmailDetail0CountryId" class="select-replace select2-offscreen" name="data[LeadEmailDetail][0][country_id]" tabindex="-1" title="Country">
<option value="">Choose a country</option>
<option value="2">SOUTHEASTERN EUROPE</option>
</select>
<label for="LeadEmailDetail0CountryId">Country</label>
<input type="checkbox" id="LeadEmailDetail0PrimaryEmail" value="1" name="data[LeadEmailDetail][0][primary_email]">
<label for="LeadEmailDetail0PrimaryEmail">Primary Email</label>
</div ">
</div">
<div id="MoreEmails"></div>
<input type="submit" value="Add More" id="addMoreEmail">
In above code input type text and checkbox working fine (adding dynamic fields after click add more) but i m getting below error in case select option
TypeError: jQuery(...).attr(...) is undefined

You need to add a null check for jQuery(this).attr('name')) . JSFIDDLE
Following is the modified JS code block.
clone.find(':input').each(function() {
if(jQuery(this).attr('name')) {
var name = jQuery(this).attr('name').replace(0, counter);
var id = jQuery(this).attr('id').replace(0, counter);
jQuery(this).attr({
'name': name,
'id': id
}).val(); }
});

Enable/Disable Dynamically added row in jquery

Basically I created a jsp page . Here is the demo. When there was only 1 identifier type and identifier number, I can easily enable or disable the input field. But i happen to mess up with multiple field. How can i change classname of input type checkbox so that when i check individual identifier number, input field will be enabled/disabled?
My Code Here
JS
$('<div/>', {
'class' : 'extraPerson', html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
$('<div/>', {
'class' : 'extraPerson'+counter, 'id': 'extraPerson'+counter,html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
counter++;
});
$('#removeRow').click(function () {
if(counter==0){
alert("No more textbox to remove");
return false;
}
counter--;
$("#extraPerson"+counter).remove();
//$("#Identification-Type"+counter).remove();
//$("#Identification-Number"+counter).remove();
});
function GetHtml()
{
// var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[id=Identification-Number]')[0].name="Identification-Number" + counter;
$html.find('[name=Identification-Type]')[0].name="Identification-Type" + counter;
// $html.find('[id=Identification-Type]')[0].id="Identification-Type" + counter;
return $html.html();
}
HTML
<form name="pancettaForm" method="post"
action="demor" id="pancettaForm">
<ul>
<li><label for="PartyChoose">Choose Appropriate Party:</label></li>
<br>
<input id="person" name="PartyChoose" type="radio"
value="update-person" class="required" /> Person
<br />
<input id="organization" name="PartyChoose" type="radio"
value="update-organization" class="required" /> Organization
<br />
<li id="Family-Name" style="display: none;">
<input type="checkbox" class="Family-Name" value="Family-name" name="Family-name">
<label for="Family-Name"><em>*</em>Family Name:</label> <input type="text" name="Family-Name" class="required"></li>
<li id="Organization-Name" style="display: none;">
<input type="checkbox" class="Organization-Name" value="Organization-name" name="Organization-name">
<label for="Organization-Name"><em>*</em>Organization Name:</label> <input type="text" name="Organization-Name" class="required"></li>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<li id="Identification-Type" style="display: none;">Identification Type:
<select name="Identification-Type" class="Identification-Type"><label for="Identification-Type">Identification Type:</label>
<option value="0">--Select--</option>
</select>
<li id="Identification-Number" style="display: none;"><input type="checkbox" class="Identification-Number" value="Identification-Number"
name="Identification-number" id="Identification-Number"><label for="Identification-Number"><em>*</em>Identification Number:</label>
<input type="text" name="Identification-Number" >
</li></li>
</div>
<a href="#" id="addRow" style="display: none;"><i class="icon-plus-sign icon-white">
Add Identifier
Remove IdentifierAdmin System Type:
Admin Type:--Select--
*Admin System Value:

To change an attribute of a jQuery object :
$('.selector').attr('name', value);
So, in your case :
$html.find('[name=Identification-Number]').attr('name', 'Identification-Number' + counter);
You will have another issue in the identification number's checkbox event, change this :
$('.Identification-Number').click(function() {
if ($('.Identification-Number').is(':checked')) {
// ...
}
// ...
});
to this :
$('#pancettaForm').on('change', '.Identification-Number', function () {
var $this = $(this);
var $input = $this.siblings('input[type=text]');
if ($this.is(':checked')) {
$input.val('').attr('disabled', false);
}
else {
$input.attr('disabled', true);
}
});
You won't need to change the name attribute or something else with this code, because it looks for input[type=text] on the same level.
See http://api.jquery.com/siblings/ for more infos.
jsfiddle : http://jsfiddle.net/FyRy8/2/