Hi I have the following html code
<td>
Question1
<input type="radio" value="1" name="1" id="1_1">Agree
<input type="radio" value="2" name="1" id="1_2">Dis-Agree
<input type="text" size="30" name="1[answer]" id="1_answer" class="answer">
</td>
<td>
Question2
<input type="radio" value="1" name="2" id="2_1">Agree
<input type="radio" value="2" name="2" id="2_2">Dis-Agree
<input type="text" size="30" name="2[answer]" id="2_answer" class="answer">
</td>
<input type="text" size="30" name="feedback[answers]" id="feedback_answers">
What I want to do is
When user clicks on the radio button it gets the selected value and
set in text box along with the question (Ex: 1_answer)
Meanwhile I want to append the same value to the 'feedback_answers'
text box
I was manage to the first steps, but I cannot get the values from Ex: 1_answer text box to 'feedback_answers' text box, following is my JQuery code
$(document).ready(function() {
$("input:radio[type=radio]").click(function() {
id = $(this).attr('id');
ids = id.split("_")
question_id = ids[0]
answer_id = ids[1]
$('#' + question_id + '_answer').val(answer_id);
$(".answer").each(function(index, value){
alert(this.val)
});
});
can someone help me, I want to loop through all the 'asnwer' text boxes (Ex: 1_answer) and get all of them to 'feedback_answers' text box.
thanks in advance
Try This
$(document).ready(function() {
var feedback_answers = $("#feedback_answers");
$("input[type=radio]").click(function() {
var id = $(this).attr('id');
var ids = id.split("_")
var question_id = ids[0]
var answer_id = ids[1];
var answers = [];
$('#' + question_id + '_answer').val(answer_id);
$(".answer").each(function(index, value){
//alert($(this).val())
answers.push($(this).val());
});
feedback_answers.val(answers.join());
});
Related
<form name="formname">
<input type="text" maxlength="100" name="user_name" id="user_input"></input>
<input type="checkbox" name="website_response[]" value="I really like your site" id="checkbox">I like your site</input>
<input type="checkbox" name="website_response[]" value="One of the best site">One of the best site</input>
<input type="checkbox" name="website_response[]" value="good site">Good Site</input>
<input type="checkbox" name="website_response[]" value="I wish my site were good">I wish my site were good</input>
</form>
The above code conatins name attribute as an array. How do I access it in Javascript?
You can access the name attribute of the checkboxes using the following :
var checkboxes = document.querySelectorAll("input[type=checkbox]");
var names = [];
checkboxes.forEach(elem => {
names.push(elem.name);
});
If you only want the name attribute of the checkbox which is checked you can use :
var checkboxes = document.querySelectorAll("input[type=checkbox]");
var names = [];
checkboxes.forEach(elem => {
if(elem.checked) {
names.push(elem.name);
}
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a search box and many checkbox elements.
Once a user types any text in the search box it should search the checkbox text and show only those checkboxes -- others should be hidden.
Here is the HTML:
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<input type="checkbox" value="column1">column1
<input type="checkbox" value="column2">column2
<input type="checkbox" value="column3">column3
<input type="checkbox" value="column4">column4
<input type="checkbox" value="column5 test">column5 test
<input type="checkbox" value="(column6)">(column6)
Now if the user types the text "col" in the search box all checkboxes should appear as "col" is present in all checkboxes.
If the user types "abc" in the search box, no checkboxes should appear as "abc" is not present in any checkboxes.
If user types text "column1" in search box only one checkbox should appear as "column1" matches only one checkbox.
Just to add another scenario if checkbox name has "column5 test". So if user types string "test" it should show "columnn5 test" checkbox and like to highlight matched text in yellow background.
If user types a special character "(" in search box then "(column6)" checkbox should be shown
Try this :
Html:
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
jQuery:
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
Final code :
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div><input type="checkbox" value="column1">column1</div>
<div><input type="checkbox" value="column2">column2</div>
<div><input type="checkbox" value="column3">column3</div>
<div><input type="checkbox" value="column4">column4</div>
<div><input type="checkbox" value="(column5)">(column5)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#searchColumn").on("input",function(){
var searchTxt = $(this).val();
searchTxt = searchTxt.replace(/[.()+]/g,"\\$&");
var patt = new RegExp("^" + searchTxt,"i");
$(":checkbox").each(function(){
if(patt.test($(this).val()))
$(this).closest("div").show(500);
else
$(this).closest("div").hide(500);
})
})
})
</script>
</body>
</html>
Simple Jquery solution using Attribute contains selector to match any elements that contains the given string value,
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( "input[value*='"+ v +"']" );
if(elem.val() ){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Here is the fiddle - https://jsfiddle.net/sq9eknfj/2/
For Case Insensitive search -
$(document).on("input", "#searchColumn", function(){
var v = $(this).val();
var elem = $( ":checkbox" ).filter(function() {
return (new RegExp(v, 'i')).test(this.value);
});
if(elem.val()){
elem.show();
$(":checkbox").not(elem).hide();
}else{
$(":checkbox").hide()
}
});
Please try with below code I think it will help you to
$('.my-textbox').keyup(function() {
var value = $(this).val();
var exp = new RegExp('^' + value, 'i');
$("input[type='checkbox']").each(function() {
var isMatch = exp.test($(this).val());
$(this).parent().toggle(isMatch);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="" class="my-textbox" name="searchColumn" id="searchColumn"/>
<label><input type="checkbox" class="name" value="column1">column1</label>
<label><input type="checkbox" class="name" value="column2">column2</label>
<label><input type="checkbox" class="name" value="column3">column3</label>
<label><input type="checkbox" class="name" value="column4">column4</label>
First you need to change the HTML so as to be able to hide the text and the checkbox.
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<p>
<input type="checkbox" class="filter" value="column1">column1
</p>
<p>
<input type="checkbox" class="filter" value="column2">column2
</p>
<p>
<input type="checkbox" class="filter" value="column3">column3
</p>
<p>
<input type="checkbox" class="filter" value="column4">column4
</p>
Then you need a class in your CSS called hidden
.hidden {
display: none;
}
And here is some jQuery (be sure to include the jQuery library in order to use jQuery):
$(document).ready(function(){
$('#searchColumn').keyup(function(){
$('.filter').each(function(){
if($(this).val() == $('#searchColumn').val()){
$('.filter').parent().addClass('hidden');
$(this).parent().removeClass('hidden');
}
});
});
});
Here's a working Plunker.
https://embed.plnkr.co/fDzATotA41o9tuxY6vEE/
UPDATED to answer the actual question!
Here a vanilla JavaScript solution - no jQuery needed:
HTML (you need a wrapper in order to hide the label):
<input type="text" value="" name="searchColumn" id="searchColumn"/>
<div class="checkbox"><input type="checkbox" value="column1">column1</div>
<div class="checkbox"><input type="checkbox" value="column2">column2</div>
<div class="checkbox"><input type="checkbox" value="column3">column3</div>
<div class="checkbox"><input type="checkbox" value="column4">column4</div>
CSS (hiding the checkboxes by default):
.checkbox {
display:none;
}
JavaScript (listen for input and compare the input value with the values of all the checkboxes):
var checkboxDivs = document.querySelectorAll('.checkbox');
document.querySelector('#searchColumn').addEventListener("input", function(e) {
var inputValue = e.srcElement.value;
for (var i = 0; i < checkboxDivs.length; i++) {
var checkbox = checkboxDivs[i].children[0];
if (checkbox.value.includes(inputValue) && inputValue.length != 0) {
checkboxDivs[i].style.display = 'block';
} else {
checkboxDivs[i].style.display = 'none';
}
}
});
JSFiddle: https://jsfiddle.net/a32nvnka/
<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
I have 3 checkboxes and a textbox. I want that when all checkboxes are checked the textbox value would be like "123" and if one of them is not checked the value should go like "12" or "13" or "23". I dont need comma for this, I just need these to use as conditional values.
To be specific here I want that they would still be in order though they are not checked consecutively in order. I need the java script function for this
and also when they will be unchecked the textbox should not contain the value they have. like when all are checked then u uncheck #1 the value should be "23". "1" should be removed on the text. coz right now the code i have that:
var one = document.getelementbyID('one');
var textbox = document.getelementbyID('tbtb').value;
if (one.checked)
{
textbox = textbox + "1";
}
so what's happening here is everytime a checkbox is checked and unchecked simultaneously the value of textbox keep adding another "1" it goes like "2311111". PLEASE HELP :)
This will work:
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var textbox = document.getElementById('tbtb');
function updatebox(){
var str = "";
if(one.checked)
str+="1";
if(two.checked)
str+="2";
if(three.checked)
str+="3";
textbox.value = str;
}
<input type="checkbox" class="chk" id="one" onclick="updatebox()"/>1
<input type="checkbox" class="chk" id="two" onclick="updatebox()"/>2
<input type="checkbox" class="chk" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
Please try this:
function updatebox()
{
var textbox = $('#tbtb').val();;
if($('#one').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
if($('#two').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
if($('#three').prop('checked')) {
$("#tbtb").val(textbox + "1");
}
}
and HTML part is:
<input type="checkbox" id="one" onclick="updatebox()"/>1
<input type="checkbox" id="two" onclick="updatebox()"/>2
<input type="checkbox" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
Try this one.
JS:
function updatebox() {
var arrCheckbox = document.querySelectorAll('input[name=common-check]:checked');
var textBox = document.getElementById("tbtb");
var strCheck = "";
for(var i=0;i < arrCheckbox.length;i++){
strCheck+=arrCheckbox[i].getAttribute('check');
}
textBox.value = strCheck
}
HTML :
<input type="checkbox" name="common-check" id="one" onclick="updatebox()" check="1"/>1
<input type="checkbox" name="common-check" id="two" onclick="updatebox()" check="2"/>2
<input type="checkbox" name="common-check" id="three" onclick="updatebox()" check="3"/>3
<input type="text" id="tbtb"/>
Here is the Plunker
try this
javascript
function updatebox()
{
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var textbox = document.getElementById('tbtb');
var str = "";
if(one.checked)
str+=one.value;
if(two.checked)
str+=two.value;
if(three.checked)
str+=three.value;
textbox.value = str;
}
HTML
<input type="checkbox" value="1" id="one" onclick="updatebox()"/>1
<input type="checkbox" value="2" id="two" onclick="updatebox()"/>2
<input type="checkbox" value="3" id="three" onclick="updatebox()"/>3
<input type="text" id="tbtb"/>
This question already has answers here:
How do I get the label of the selected radio button using javascript
(3 answers)
Closed 8 years ago.
I have a group of radio buttons and want to get the checked radio button, then alert the text, not only the value of it. To explain more, when the user clicks the first radio button, and then submits the form, I want the browser to alert "Desktop Case." And I want to achieve this without jQuery.
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
The following works for your example. It uses CSS selectors to target the checked input. Based on its id, the appropriate label is found:
function update_order_onclick() {
var value= 'Nothing selected',
selected= document.querySelector('input[name="rad_case"]:checked'),
selection= document.querySelector('#selection');
if(selected) {
value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
}
selection.innerHTML= value;
}
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<br>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<br>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<br>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
<div id="selection"></div>
First, we create a function to loop through the radio buttons group we have, and checks if it is checked or not.
function get_radio_val(form, name)
{
var val;
var radios = form.elements[name];
for (var i =0; i < radios.length; i++)
{
if (radios[i].checked)
{
val = radios[i];
break;
}
}
return val;
}
Then we write the function that will be executed on onclick event.
function update_order_onclick()
{
var val = get_radio_val(document.form1, 'rad_case');
var val_id = val.id;
var selector = 'label[for=' + val_id + ']';
var label = document.querySelector(selector);
var label_text = label.innerHTML;
alert(label_text);
}
The thing that helped us here, is that the label for attribute has to be the same value as the radio button id and that's how we selected it in the function above.
simply do the following:
var checked = document.querySelector('input:checked');
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';
I'm trying to add the values of any checked checkbox to an input text field.
Here's my fiddle: http://jsfiddle.net/Lf6ky/
$(document).ready(function() {
$(":checkbox").on('click', function() {
if ($(':checkbox:checked')) {
var fields = $(":checkbox").val();
jQuery.each(fields, function(i, field) {
$('#field_results').val($('#field_results').val() + field.value + " ");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
In this example, I have 3 checkboxes, with the values 1,2,3. If I click on all these checkboxes, then the input field should look like this: 1 2 3
If I uncheck any of these checkboxes, then that corresponding value should disappear in the input field.
How do I do this?
I've stored the collection of check-boxes in a variable $checks, then attach the handler to this collection. Inside the event handler, I take the collection once again and filter (return) only the check-boxes that are checked.
map() returns a jQuery object containing the values of the checked check-boxes, get() converts it to a standard array. Join those values with a space and put 'em in the input.
$(document).ready(function(){
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i,v){
return this.value;
}).get().join(" ");
$('#field_results').val(string);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
On click of a checkbox, loop through the checked inputs, append to a string then assign that to your text box:
$(document).ready(function() {
$("input:checkbox").click(function() {
var output = "";
$("input:checked").each(function() {
output += $(this).val() + " ";
});
$("#field_results").val(output.trim());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" /><br>
<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3
First issue is
if($(':checkbox:checked')) {
will always be true since it returns a jQuery object and an object is a truthy value. If you were to use the if, you want to check the length. aka if($(':checkbox:checked').length) {
Secondly
var fields = $(":checkbox").val();
returns only the first element's value and it returns any checkbox, not just the checked ones. You want to loop through $(':checkbox:checked')
One way to attack it is to use an each and an array.
$(":checkbox").on('change', function() {
var total = [];
$(':checkbox:checked').each( function(){ //find the checked checkboxes and loop through them
total.push(this.value); //add the values to the array
});
$('#field_results').val(total.join(" ")); //join the array
});
Problem
if($(':checkbox:checked')) will always be true
var fields = $(":checkbox").val(); Will give first checkbox value
You can try this.
$(document).ready(function() {
$(":checkbox").on('click', function() {
var fields = '';
$(":checkbox").each(function() {
if (this.checked) {
fields += $(this).val() + ' ';
}
});
$('#field_results').val($.trim(fields))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" />
<br>
<input type="checkbox" value="1">1
<br>
<input type="checkbox" value="2">2
<br>
<input type="checkbox" value="3">3