show multi select id by js - javascript

I need show selection id by js, by this code only show 1 and first select id
my code is this html and javascript
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="" >
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
</tr>
<script>
$(document).ready(function(){
$('#jens_id').change(function(){
statteId = $("#jens_id").val()
alert(statteId);
});
});
</script>
can help for edit script

The id attribute should be unique within the page otherwise only the first one gets selected(using id selector), for a group of elements use a common class instead and within the change event handler use this to refer the clicked element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
</td>
<td></td>
</tr>
</table>
<script>
$(document).ready(function() {
// or use attribute equals selector
// $('[name="jens_id[]"]')
$('.jens_id').change(function() {
statteId = $(this).val(); // or this.value
console.log(statteId);
// get the td and update with value
$(this).parent().next().text(statteId);
});
});
</script>

Try with each() function of jquery .And change the selector with Tagname or ClassName instead of id .Id is a unique for full document
$(document).ready(function() {
$('select').each(function(){
console.log($(this).val())
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option selected>1</option>
<option >2</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option selected>2</option>
</select>
</td>
</tr>

$(document).ready(function() {
$('.jens_id').change(function() {
statteId = $('option:selected', this).text()
alert(statteId);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" class="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
ID should be unique, use class and use this context to tell the current changed select

You are already aware now that id of the element on page should be unique.
When you have multiple elements with same id then id(#) selector returns the first matched element. So as mentioned in other answers you should use class if possible.
By any reason if you can't use the class and want to find with id then you can use it like $('select#jens_id') or $('[id="jens_id"]') and to get the selected option use context to this which will find the selected option for changed select element.
$(document).ready(function() {
$('select#jens_id').change(function() {
alert($(this).find('option:selected').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >1</option>
<option >2</option>
</select>
<select name="jens_id[]" id="jens_id" required="">
<option ></option>
<option >3</option>
<option >4</option>
</select>
Add multiple attribute to select if multiple values needs to be selected.

Related

How to select only one row in table with checkbox

I have a table with x numbers of rows and 4 columns, one column is checkbox and other three are readonly selectboxs. I want the user to select just 1 row to be editable by checking checkbox in first column then if he check another checkbox in another row, the checkbox he previously checked get unchecked and row get readonly again.
So I want the user to select 1 row only to edit and others be readonly.
here is my code but it is not working.
$(document).ready(function(){
$('.col1, .col2, .col3').attr('disabled', true)
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function () {
$(this).find('.selectRow').each(function () {
var checkedRow = $(this).closest('tr').find('input:checkbox:checked'),
col1 = $(this).closest('tr').find('.col1'),
col2 = $(this).closest('tr').find('.col2'),
col3 = $(this).closest('tr').find('col3');
if (checkedRow){
$('.col1, .col2, .col3').removeAttr('disabled')
checkedRow.siblings().prop('checked', false);
}else{
$('.col1, .col2, .col3').attr('disabled', true)
checkedRow.siblings().prop('checked', false);
}
});
});
}
});
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
this is my code:
Without jQuery and using event delegation things may be somewhat simpler:
document.addEventListener(`click`, handle);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
function handle(evt) {
// only do something if a checkbox was clicked
if (evt.target.type === `checkbox`) {
const isChecked = evt.target.checked;
const selectedRow = evt.target.closest(`tr`);
// reset checkboxes, row coloring and disabled state
document.querySelectorAll(`input[type='checkbox']`)
.forEach(cb => {
cb.checked = cb !== evt.target ? false : isChecked;
const row = cb.closest(`tr`);
row.classList[isChecked && row === selectedRow ?
`add` : `remove`](`selected`);
[...row.querySelectorAll(`select`)].filter(r => r !== selectedRow)
.forEach(s => s.setAttribute(`disabled`, true));
selectedRow.querySelectorAll(`select`)
.forEach(s => s[isChecked ?
`removeAttribute` : `setAttribute`](`disabled`, true));
});
}
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
Here's an even more simplified version, acting on the table rows
document.addEventListener(`click`, handle);
// create the table dynamically to keep demo lean
createTable();
function handle(evt) {
if (evt.target.type === `checkbox`) {
const selectedRow = evt.target.closest(`tr`);
document.querySelectorAll(`tr`)
.forEach( row => {
// not selected
if (row !== selectedRow) {
row.querySelector(`[type=checkbox]`).checked = false;
row.classList.remove(`selected`);
return row.querySelectorAll(`select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
// selected
row.classList[[`remove`, `add`][+evt.target.checked]](`selected`);
row.querySelectorAll(`select`).forEach(s =>
s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true));
});
}
}
function createTable() {
const table = document.createElement(`table`);
const repeat = (str, n) => Array(n + 1).join(str);
const select = `<td><select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>E</option></select></td>`;
const row = `<tr>
<td><input type="checkbox" /></td>
${repeat(select, 3)}</tr>`;
table.insertAdjacentHTML(`beforeend`, repeat(row, 3));
document.body.appendChild(table);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
tr td:nth-child(1) {
padding-right: 6px;
}
The issue is because checkedRow holds a jQuery object. When you use that in an if condition it will always equate to true. You instead need to get the checked property from that element and use that in the condition instead.
Also note that the logic can be made much more succinct and extensible through the use of common selectors instead of incremental ones. In addition, you should look to add the disabled attribute to the HTML directly. Adding it via JS means that there will be a visible flash where the element is loaded as enabled, then when the DOM loads it will be disabled which is not good for your UX.
jQuery($ => {
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function() {
let $row = $(this);
let $checkbox = $row.find('.selectRow');
$row.find('select').prop('disabled', !$checkbox.prop('checked'));
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1" disabled="disabled">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled="disabled">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled="disabled">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
This works great! uncheck all checkboxes except the one having current focus '.tbl [type="checkbox"]:not(:focus)' then manipulate the select boxes
$(document).ready(function(){
$('.tbl [type="checkbox"]').on('click', function() {
$('.tbl [type="checkbox"]:not(:focus)').prop('checked', false);
$('.tbl select').attr('disabled', true);
$(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1" disabled>
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled>
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled>
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

Only one select tag is required to POST form

Title basically says it all.
I have 3 select tags and I want to make it proceedable if any of the selects is filled.
It can proceed if one is filled.
It can proceed if two are filled.
It can proceed if three are filled.
It cannot proceed if none are filled.
Right now it can only proceed if all three are filled because I added "required" attribute in each select. What should I do?
<table>
<tr>
<td>Option 1</td>
<td>
<select id="first" name="q4_op1" required>
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td>Option 2</td>
<td>
<select id="second" name="q4_op2" required>
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td>Option 3</td>
<td>
<select id="terceiro" name="q4_op3" required>
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
</table>
Try this:
var any = (
document.getElementById('first').selectedIndex ||
document.getElementById('second').selectedIndex ||
document.getElementById('terceiro').selectedIndex
)
if (any !== 0) {
// proceed
}
The || operator will do exaclty what you want.
Check the fiddle.
One approach is as follows:
// here we declare the function, and pass in the 'event' argument,
// this is the Event Object passed automagically from
// EventTarget.addEventListener(), later. We're using Arrow function
// syntax since we don't need to reference 'this':
const submissionCheck = (event) => {
// here we use the preventDefault() method of the Event Object
// in order to prevent the <button> automatically submitting
// the form:
event.preventDefault();
// here we retrieve the relevant <form> within which the
// submit button is placed, first we access the 'target'
// property of the Event Object to retrieve the element on
// which this function is bound (the <button> in this example)
// and from there we navigate to the 'form' property of that
// element:
const form = event.target.form;
// here we use Element.querySelector() to look for:
// an <option> element found within a <select> element,
// which does not have a 'value' attribute with an empty
// attribute-value and we check that the <option> is checked
// (which applies to <option> elements that are selected/activated,
// because Element.querySelector() returns either the first
// element matching the selector (if any exist) or null (if no
// element exists) we then test that the result is not-equal to null:
if (form.querySelector('select option:not([value=""]):checked') !== null) {
// So, if an <option> exists with a non-empty value attribute-value
// which is also checked/selected, we then submit the <form>:
form.submit();
}
}
// here we find the <button> element in the document, and use
// EventTarget.addEventListener() to bind the submissionCheck()
// function (note the deliberate lack of parentheses) as the
// 'click' event-handler:
document.querySelector('button').addEventListener('click', submissionCheck);
const submissionCheck = (event) => {
event.preventDefault();
const form = event.target.form;
if (form.querySelector('select option:not([value=""]):checked') !== null) {
form.submit();
}
}
document.querySelector('button').addEventListener('click', submissionCheck);
<form action="#" method="post">
<table>
<tfoot>
<tr>
<td colspan="2">
<button type="submit">Submit</button>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<!-- I also added <label> elements so that clicking the
relevant text activates and focuses the <select>
element: -->
<td><label for="first">Option 1</label></td>
<td>
<select id="first" name="q4_op1">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td><label for="second">Option 2</label></td>
<td>
<select id="second" name="q4_op2">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td><label for="terceiro">Option 3</label></td>
<td>
<select id="terceiro" name="q4_op3">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
JS Fiddle demo.
References:
CSS:
Attribute selectors (attribute="AttributeValue"]).
:checked.
:not().
HTML:
<label>.
JavaScript:
Arrow Functions.
document.querySelector().
document.querySelectorAll().
Element.querySelector().
Event.
Event.preventDefault().
EventTarget.addEventListener().
HTMLFormElement.
HTMLOptionElement.
Try this:
<form id="myForm">
<table>
<tr>
<td>Option 1</td>
<td>
<select id="first" name="q4_op1">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td>Option 2</td>
<td>
<select id="second" name="q4_op2">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
<tr>
<td>Opção 3</td>
<td>
<select id="terceiro" name="q4_op3">
<option value="" selected>Select an option</option>
<option value="Chrome">Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Microsoft Edge">Microsoft Edge</option>
<option value="Safari">Safari</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Opera">Opera</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Save data!" />
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
var any = (
document.getElementById('first').selectedIndex ||
document.getElementById('second').selectedIndex ||
document.getElementById('terceiro').selectedIndex
)
if (any !== 0) {
return true
}
alert('Please select at least one option.');
return false
})
</script>
Here's what I changed:
added a <form> with an ID of myForm
added a input that users can click to submit myForm
wrote a JavaScript function that gets called every time the user submits the form
this function
checks to see if any of the 3 fields were filled out
if at least one was filled out the form is allowed to submit
if no fields are filled out the form submission gets cancelled and we tell the user they must fill at least one field

multiple checkbox change function with class name, but same class name in javascript

My html and javascript (with jQuery) code is here.
I made a snippet to better visualization, so please take a look. I describe my problem below the snippet.
$(document).ready(function(){
$('.move_to_choice2Checkbox').click(function (){
var cca_item_id = $(this).closest('tr').find('td option:selected').eq(0).val();
console.log(cca_item_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE ID="qfdetails">
<TBODY>
<TR>
<TD CLASS="col-lg-3">CCA Items</TD>
<TD CLASS="col-lg-3">Year Groups</TD>
<TD CLASS="col-lg-4">CCA Teacher</TD>
<TD CLASS="col-lg-3" />
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails"
MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
</TBODY>
</TABLE>
But, this code is worked for first checkbox only. When I clicked on the second and third checkbox it returns nothing or not entered in click function. What's wrong on this, these 3 checkboxes having same class name.
Please help me.
If the subsequent checkboxes are added dynamically, after your "click" handler is declared, then the event will not get bound to them, because they did not exist when that code was executed.
One solution to this is to use the "delegated events" pattern provided by jQuery. Simply you bind the event to an element higher up the DOM which is guaranteed to exist when the click handler executes, but then pass it the selector of the (potentially dynamically created) elements you actually want to respond to the event. Then when anything within the higher-level element is clicked on, jQuery takes care of checking for new elements matching the selector and triggering a click event for them specifically instead.
You write it like this:
$("#qfdetails").on("click", ".move_to_choice2Checkbox", function () {
In this case the nearest logical higher-level element to use is the table, but you can use document if there's no other common ancestor for your elements. Ideally you should use the closest common ancestor as this is better for performance.
For more details see http://api.jquery.com/on/, specifically the section entitled "Direct and delegated events".
I feel compelled to point out that you might get the td siblings instead. You may also consider if you wish to honor the checked/unchecked state as in my example. You may also consider using the change instead of click event since values MIGHT be altered by code or other ways.
Also, you have an ids there that MIGHT have been used for faster access than traversing using the closest, siblings etc. BUT it is invalid as there are duplicates of ID="cca_item_id" which makes your HTML invalid.
Note I left the OTHER invalid HTML in place (other duplicate id's) - consider classes instead and use those to select.
$(function() {
$('#qfdetails').on('change', '.move_to_choice2Checkbox', function() {
if (this.checked) {
var cca_item_id = $(this).closest('td')
.siblings().first()
.find('option:selected').eq(0).val();
console.log(cca_item_id);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE ID="qfdetails">
<TBODY>
<TR>
<TD CLASS="col-lg-3">CCA Items</TD>
<TD CLASS="col-lg-3">Year Groups</TD>
<TD CLASS="col-lg-4">CCA Teacher</TD>
<TD CLASS="col-lg-3" />
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id1" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id2" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
<TR>
<TD DATA-ID="0">
<SELECT CLASS="form-control" ID="cca_item_id3" NAME="choice1[]">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="4">Drawing</OPTION>
<OPTION VALUE="5">Swimming</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="year_groups" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="1">STD I - A</OPTION>
<OPTION VALUE="2">STD II - B</OPTION>
</SELECT>
</TD>
<TD>
<SELECT CLASS="form-control tokenize-demo" ID="teacher_emails" MULTIPLE="" NAME="choice1[]" STYLE="display: none;">
<OPTION VALUE="">Please Select</OPTION>
<OPTION VALUE="xx.s#example.com">xyz</OPTION>
</SELECT>
</TD>
<TD>
<INPUT CLASS="move_to_choice2Checkbox" TYPE="checkbox">
</TD>
</TR>
</TBODY>
</TABLE>

Hide dropdown box while entering value in the textarea

I am trying to hide a Dropdown Box with JavaScript once someone is entering text inside a textarea.
This is what I did so far:
HTML
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'>
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86" style='display:none'></textarea>
</td>
</tr>
</table>
JavaScript
function CheckColors86(val)
{
var element=document.getElementById('color86');
if(val=='Others')
element.style.display='block';
else
element.style.display='none';
}
function CheckColors86(val)
{
var element=document.getElementById('color86');
if(val=='Others')
element.style.display='block';
else
element.style.display='none';
}
function hideDropDown(){
var element=document.getElementById('travel_arriveVia');
element.style.display='none';
}
function showDropDown(){
var element=document.getElementById('travel_arriveVia');
element.style.display='block';
}
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia" onchange='CheckColors86(this.value);'>
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td><td></td><td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86" onfocus='hideDropDown()'></textarea>
</td>
</table>
Hope this helps you out.
If you can use jQuery you can do it like that:
$('#color86').keyup(function() {
$('#travel_arriveVia').css('display', 'none');
});
Here the jsfiddle:
https://jsfiddle.net/ezd5ajmf/
Or as Snippet:
$('#color86').keyup(function() {
$('#travel_arriveVia').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
NOTES OF A POST MORTEM EXAMINATION ON THE BODY OF A<br>
<select name="select86" id="travel_arriveVia">
<option>Select</option>
<option value="Cattle">Cattle</option>
<option value="Buffalo">Buffalo</option>
<option value="Horse">Horse</option>
<option value="Camel">Camel</option>
<option value="Dog">Dog</option>
<option value="Sheep">Sheep</option>
<option value="Pig">Pig</option>
<option value="Goat">Goat</option>
<option value="Deer">Deer</option>
<option value="Others">Others</option>
</select>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<textarea rows="3" cols="25" name="div86" id="color86"></textarea>
</td>
</table>
Add the following function in java script and call it on keyup event as below
<textarea rows="3" cols="25" name="div86" id="color86" style='display:none' onkeyup="toggleListOption();"></textarea>
function toggleListOption(){
var el=document.getElementById('color86');
if(el.value===""){
document.getElementById('travel_arriveVia').style.display='block';
}else{
document.getElementById('travel_arriveVia').style.display='none';
}
}

Fade-In & Out a <tbody> element on <select> change

I have a <select> drop-down menu which displays different input fields depending on what is selected using JavaScript.
<select name="country" onchange="SelectCheck(this);" id="country">
<option value="United States of America" id="USA">United States of America</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua & Barbuda">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
...
</select>
The input tags are wrapped in <tbody> tags though. I had to do it this way because it's inside of a table and the <div> tag does not work.
<tbody id="USDLdiv" style="display:none;">
<tr>
<td><input type="text" placeholder="USA License No."></td>
</tr>
</tbody>
I would like to add a fade in & fade out effect when you switch between options.
All I got is:
$selectoption = $("#country");
$("select", $selectoption).change(function() {
$("tbody > tr", $selectoption).fadeOut();
});
But it's not working.
The code shown is looking for a <select> that is a descendant of #country but #country is a <select> and has no such descendent.
Similarly inside the event handler you are looking for a <tr> that is a descendant of the <select> and a has no such descendant
Try:
$("#country").change(function() {
$("tbody > tr").fadeOut();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select name="country" id="country">
<option value="usa">United States of America</option>
<option value="afg">Afghanistan</option>
<option value="alb">Albania</option>
<option value="alg">Algeria</option>
</select>
<table>
<tbody>
<tr id="usa">
<td><input type="text" placeholder="USA License No."></td>
</tr>
<tr id="afg">
<td><input type="text" placeholder="Afghanistan License No."></td>
</tr>
<tr id="alb">
<td><input type="text" placeholder="Albania License No."></td>
</tr>
<tr id="alg">
<td><input type="text" placeholder="Algeria License No."></td>
</tr>
</tbody>
</table>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('tr').hide();
$(document).on('change','#country', function(){
var send = $(this).val();
$('tr').fadeOut();
$('#'+send).fadeIn();
});
});
</script>
</html>
Hope it can help you!

Categories