I have a form that uses checkboxes similar to the one below
<Form>
<table>
<tr>
<td align="left" width="15"><input name="switch" title="0" id="radio17" value="Free Shipping" checked="checked" type="radio" />
</td>
<td>Free Shipping</td>
</tr>
<tr>
<td align="left" width="15"><input name="switch" title="38" id="radio18" value="Standard Shipping" type="radio" />
</td>
<td>Standard Shipping
</td>
</tr>
</table>
and what i need is the difference in price, which is denoted by the title, to be displayed next to the name.So if Free Shipping is selected the output should look like "Free Shipping [+0]" and Standard shipping will look like "Standard Shipping [+38]"
I am just learning javascript, so that would be prefered, but anything will do if it works.
Do you mean something like this?
<form>
<label><input type="radio" name="switch" title="Free Shipping" id="freeshipping" value="0" checked="checked" type="radio" />Free Shipping</label>
<label><input type="radio" name="switch" title="Standard Shipping" id="standardshipping" value="38" />Standard Shipping</label>
<div>Selected shipping method: <span id="shippingtitle"> </span> [+<span id="shippingcost"> </span>]</div>
</form>
window.onload = function(){
var i;
for(i = 0; i < document.getElementsByName('switch').length; ++i){
document.getElementsByName('switch')[i].onclick = function(){
document.getElementById('shippingtitle').firstChild.data = this.title;
document.getElementById('shippingcost').firstChild.data = this.value;
}
}
};
label{
display:block;
float:left;
clear:left;
width:30%;
}
form{
max-width:500px;
}
It seems that you're just learning JavaScript. That's great, but don't use a helicopter if you're trying to steer a car (learn basic JavaScript and read a little bit about the DOM before you use jQuery).
I would access the radio elements by id and then update their parent element's sibling element's text to include the value of the "title" attribute of the radio button. For example:
function showPriceDifference(id) {
var el = document.getElementById(id)
, price = el.getAttribute('title');
el.parentElement.nextElementSibling.innerHTML += ' [+' + price + ']';
}
showPriceDifference('radio17');
showPriceDifference('radio18');
Related
I have a web page with multiple checkboxes and the relative input values
with the following code:
<tr><td><input type=\"checkbox\" id=\"second_checkbox\" name=\"second_checkbox\" value=\"" + Sample_ID + "\"><label for=\""+ Sample_ID + "\">"+ Sample_ID +"</label><br></td><td><select name=\"option\" id=\"option\"><option value=\"\" selected=\"selected\"></option><option value=\"=\">=</option><option value=\"!=\">!=</option><option value=\">\">></option><option value=\">=\">>=</option><option value=\"<\"><</option><option value=\"<=\"><=</option><option value=\"ilike\">contains</option></select></td><td><input type=\"text\" name=\"valore\" placeholder=\"value\"></td></tr>"
and I get the different values by using this functions:
filtri = request.form.getlist('second_checkbox')
simbolo = request.form.getlist('option')
valori = request.form.getlist('valore')
but the array "valori" takes all the empty values on the page and I want to take only the ones that are checked on the first checkbox.
How can I do that?
Thanks
First, remove the duplicate id's and names in the html. An id in html should be unique. Using the right selection mechanism you don't need them either.
For the client side (so, within the browser) you can select all checked checkboxes using the selector [type=checkbox]:checked. Here's a minimal reproducable example.
document.addEventListener(`click`, evt => {
console.clear();
const allChecked = document.querySelectorAll(`[type='checkbox']:checked`);
// ^ only checked
if (allChecked.length) {
return allChecked
.forEach(cb => {
const theRow = cb.closest(`tr`);
console.log(`checked row (#${theRow.rowIndex + 1}) text input value: ${
theRow.querySelector(`input[type='text']`).value || `no value`}`);
});
}
return console.log(`none checked (yet)`);
});
<table>
<tr>
<td>
<input type="checkbox" value="123"> 123
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="456"> 456
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 2">
</td>
</tr>
<tr>
<td><input type="checkbox" value="789"> 789
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 3">
</td>
</tr>
</table>
I'm new to javascript and kind of stuck with the problem.
I want to create some checkboxes and when I select and submit some of them, I want to get the associated output from an array. In my case, I can only send some data by hard coding in the "value" attribute of the "input" element. But, I want to send the data from the array "names".
Can anyone please help me out?
function submit() {
var names = ["zihan", "zihan", "zihan", "masud", "masud", "shakil"];
var arrayNAME = [];
var tblName = document.getElementById("tblName");
var check = tblName.getElementsByTagName("input");
for (var i = 0; i < check.length; i++) {
if (check[i].checked) {
arrayNAME.push(check[i].value);
}
}
if (arrayNAME.length > 0) {
alert(`Selected value: ${arrayNAME.join(",")}`);
}
}
<table id="tblName">
<tr>
<td>
<input type="checkbox" id="zahid" value="zahid">
<label for="zahid"> Zahid </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="masud" value="masud">
<label for="masud"> Masud </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="jihan" value="jihan jihan jihan">
<label for="jihan"> Jihan </label>
</td>
</tr>
</table>
<br>
<button onclick="submit()"> Submit </button>
You may select all the checkboxes and then depending on their index in the page and if a checkbox is checked append the desired value to the final array from "names" array.
function submit() {
// dummy values to facilate the recognition of the checked input(s)
const names = ['checkbox one', 'checkbox two', 'checkbox three'],
arrayNAME = [],
tblName = document.getElementById("tblName"),
check = tblName.querySelectorAll("input[type=checkbox]");
// push the "names" values to "arrayNAME" of the checked inputs
check.forEach((el, idx) => el.checked && arrayNAME.push(names[idx]));
// for a better UX on the site (SO), I'd use "console.log" instead of "alert"
arrayNAME.length && console.log(`Selected value: ${arrayNAME.join(",")}`);
}
<table id="tblName">
<tr>
<td>
<input type="checkbox" id="zahid" value="zahid">
<label for="zahid"> Zahid </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="masud" value="masud">
<label for="masud"> Masud </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="jihan" value="jihan jihan jihan">
<label for="jihan"> Jihan </label>
</td>
</tr>
</table>
<br>
<button onclick="submit()"> Submit </button>
How can I get the checked checkboxes using JavaScript for the following HTML.
All my check boxes will have id's as follows as shown in the HTML
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1
// ... and so on, up to
SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_n
I tried with the following code
var IDtoFind="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_"
var txts = document.getElementsByTagName('input');
for (var i = 0; i < txts.length; ++i) {
if (txts[i].name.indexOf(IDtoFind)!=-1) {
if(txts[i].checked){ alert(txts[i].id); }
// targetId = txts[i].id;
}
}
But its not working . Ineed to get the text of the checkbox labels
<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>
<span class="ms-RadioText" title="NO SECURITY ISSUE Observed">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Staff NOT wearing identification / name badge">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification / name badge</label>
</span>
</td>
</tr>
</tbody>
</table>
You can use the nextelementsibling property like
function get() {
var inputs = document.querySelectorAll('input[type="checkbox"][id^="SECURITY_"]'),
labels = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
labels.push(inputs[i].nextElementSibling.innerHTML.trim())
}
}
alert(labels)
}
<table id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceTable" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>
<span class="ms-RadioText" title="NO SECURITY ISSUE Observed">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0">NO SECURITY ISSUE Observed</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Staff NOT wearing identification / name badge">
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1" type="checkbox">
<label for="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_1">Staff NOT wearing identification / name badge</label>
</span>
</td>
</tr>
</tbody>
</table>
<button onclick="get()">Get</button>
Note: You can simplify the checkbox selector, if you can add a class to those checkboxes
<input id="SECURITY_6ab5ce28-f328-4096-91c1-db49a5007d0c_MultiChoiceOption_0" type="checkbox" checked="checked" class="security-multichoiceoption"/>
then
inputs = document.getElementsByClassName('security-multichoiceoption')
here
i made a demo which returns an array of maching objects you can simply reach elements by using those function there it returns an array so those()[0].id will simply return the id of first selected element
All I want is filter the table with radio inputs.
This is my jsfiddle
I am using this inputs and table:
<div style="border:1px solid;">
<input type="radio" id="Bob" name="name" />Bob
<input type="radio" id="Jay" name="name" />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Position</th>
</tr>
<tr>
<td>Bob</td><td>Developer</td>
</tr>
<tr>
<td>Jay</td><td>Manager</td>
</tr>
<tr>
<td>Bob</td><td>Manager</td>
</tr>
<tr>
<td>Jay</td><td>Developer</td>
</tr>
</table>
and this js:
$('#Bob').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Bob"))').hide();
});
$('#Jay').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Jay"))').hide();
});
$('#developer').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Developer"))').hide();
});
$('#itManager').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Manager"))').hide();
});
All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.
I know js code is wrong but I wanted you make understand what I want to do.
Try this, more simple:
$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="position"]:checked').prop('id') || '';
$('tr').hide();
$('tr:contains(' + name + ')').show();
$('tr').not(':contains(' + position + ')').hide();
});
Demo here
The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:
<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager
I have a set of four radio buttons that represent four different conditions (Good, Improving, Worsening, Poor). Selecting "worsening" or "poor" should unhide a table row with a textarea to explain why the condition is not good. Selecting "good" or "improving" should hide the table row. I've tried adding a class to the two that unhide the table row, but only one of the buttons is working (worsening). I have a feeling I need an or clause in there somewhere to pickup both buttons, but I've tried many variations and I'm just not coming up with it. Appreciate any help for this noob.
Here is what I have:
<tr>
<td>
Customer Sentiment:
</td>
<td colspan="3">
<div id="sentiment">
<input class="xhide" type="radio" id="Good" value="1" name="sentimentID" <cfif sentimentID eq 1>checked</cfif> /><label for="Good">Good</label>
<input class="xhide" type="radio" id="Improving" value="2" name="sentimentID" <cfif sentimentID eq 2>checked</cfif> /><label for="Improving">Improving</label>
<input class="xshow" type="radio" id="Worsening" value="3" name="sentimentID" <cfif sentimentID eq 3>checked</cfif> /><label for="Worsening">Worsening</label>
<input class="xshow" type="radio" id="Poor" value="4" name="sentimentID" <cfif sentimentID eq 4>checked</cfif> /><label for="Poor">Poor</label>
</div>
</td>
</tr>
<tr class="rnotes"">
<td valign="top">Sentiment Notes:</td>
<td colspan="3">
<cfoutput>
<textarea name="sentimentNotes"
cols="100"
rows="4">#sentimentNotes#</textarea>
</cfoutput>
</td>
</tr>
Script:
$(document).ready(function()
{
$(".rnotes").hide();
$(':radio').change(function(){
var isChecked=$('.xshow').prop('checked');
$('.rnotes').toggle(isChecked);
});
});
========================================================================
Here is the script:
$(document).ready(function()
{
$(".rnotes").hide();
$('input[type=radio]').change(function(){
var isChecked = $(this).prop('checked');
var isShow = $(this).hasClass('xshow');
$(".rnotes").toggle(isChecked && isShow);
});
});
Working fiddle: http://jsfiddle.net/LnyJZ/5/