I am looking to fill 2 fields based on the selection of a dropdown. This is the code I am using now (which works but not work in my case):
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var catSelected = e.options[e.selectedIndex].value;
document.getElementById("minLvl").value=catSelected;
}
</script>
and the relevant HTML:
<table>
<tr>
<td>Event:</td>
<td>
<select name="Event" id="event" onChange="updateinput();">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
<option value="option6">option6</option>
<option value="option7">option7</option>
</select>
</td>
</tr>
<tr>
<td>Starting Time:</td>
<td><input type="text" name="dateTime"/></td>
</tr>
<tr>
<td>Level Range:</td>
<td><input type="text" size="3" maxlength="3" id="minLvl"> - <input type="text" size="3" maxlength="3" id="maxLvl"></td>
</tr>
<tr>
<td>Notes:</td>
<td><textarea></textarea></td>
</tr>
<tr>
<td>Create Event:</td>
<td><input type="button" value="Create event!"></td>
</tr>
</table>
I know I can use e.options[e.selectedIndex].text to get the text and place it in the input, but is there a way I could add attributes to each option so its like <option value="option1" minLvl="1" maxLvl="10">Option1</option> and then pull the data from minLvl and maxLvl and then populate the values into the inputs?
function updateinput(){
var e = document.getElementById("event");
var catSelected = this.value;
document.getElementById("minLvl").value=catSelected;
}
<select name="Event" id="event" onChange="updateinput(this);">
I was able to get it to work with this code:
<script type="text/javascript">
function updateinput(){
var e = document.getElementById("event");
var minLvl = e.options[e.selectedIndex].getAttribute("minLvl");
var maxLvl = e.options[e.selectedIndex].getAttribute("maxLvl");
document.getElementById("minLvl").value=minLvl;
document.getElementById("maxLvl").value=maxLvl;
}
</script>
<option value="option" minLvl="1" maxLvl="3">option</option>
Related
I am trying to create a form in which would show and hide a specific field of a form when certain elements of a drop-down list is selected.
I currently have found a way to hide it using CSS but I am not sure on how you would use CSS or JavaScript to unhide them when specific values in the drop down list are selected.
This is what I have got at the moment:
HTML:
<td><label for="ageRange">Age: </label><font color="red">*</font></td>
<td><select name="ageRange" id="ageRange">
<option value="0">Select</option>
<option value="0-16">0-16</option>
<option value="17-25">17-25</option>
<option value="26-40">26-40</option>
<option value="41-60">41-60</option>
<option value="60+">61+</option>
</select>
</td>
</tr>
<tr>
<td><label for="license" class="hidden">Driver's License: </label></td>
<td><input type="test" name="license" id="license" class="hidden"><br></td>
CSS:
input.hidden {
display: none
}
label.hidden {
display: none
}
What I want to happen is for the field "Driver's License" to stay hidden unless in the drop-down list (ageRange) you select any values except for "Select" and "0-16."
Here is how you can do so . Just check the selected value by dropdown and compare with value. If selectedValue found 0-16 just add hidden class on tr remove otherwise.
document.getElementById("toHide").classList.add("hidden");
function myFunction(){
var selectedVal = document.getElementById("ageRange").value;
if(selectedVal == "0-16" || selectedVal=="0" ){
document.getElementById("toHide").classList.add("hidden");
document.getElementById("license").value='';
} else{
document.getElementById("toHide").classList.remove("hidden");
document.getElementById("license").value=selectedVal;
}
}
.hidden {
display: none
}
<table border="2">
<td><label for="ageRange">Age: </label><font color="red">*</font></td>
<td><select name="ageRange" id="ageRange" onchange="myFunction()">
<option value="0">Select</option>
<option value="0-16">0-16</option>
<option value="17-25">17-25</option>
<option value="26-40">26-40</option>
<option value="41-60">41-60</option>
<option value="60+">61+</option>
</select>
</td>
</tr>
<tr id="toHide">
<td ><label for="license" >Driver's License: </label></td>
<td ><input type="test" name="license" value="" id="license" ><br></td>
</tr>
</table>
Try onchange and get the value and add or remove class using the below code.
function check(e){
if(e.value != '0' && e.value != '0-16'){
var lab = document.getElementById("licLab");
lab.classList.remove("hidden");
var txt = document.getElementById("license");
txt.classList.remove("hidden");
} else {
var lab = document.getElementById("licLab");
lab.classList.add("hidden");
var txt = document.getElementById("license");
txt.classList.add("hidden");
}
}
input.hidden {
display: none
}
label.hidden {
display: none
}
<td><label for="ageRange">Age: </label><font color="red">*</font></td>
<td><select name="ageRange" id="ageRange" onchange="check(this)">
<option value="0">Select</option>
<option value="0-16">0-16</option>
<option value="17-25">17-25</option>
<option value="26-40">26-40</option>
<option value="41-60">41-60</option>
<option value="60+">61+</option>
</select>
</td>
</tr>
<tr>
<td><label for="license" class="hidden" id="licLab">Driver's License: </label></td>
<td><input type="test" name="license" id="license" class="hidden"><br></td>
try this
$(document).ready( function(){
$('.hidden').hide()
})
$('select').on('change',function(){
if ((this.value == '0') || (this.value == '0-16')) {
$('.hidden').hide()
}
else{
$('.hidden').show()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><label for="ageRange">Age: </label><font color="red">*</font></td>
<td><select name="ageRange" id="ageRange">
<option value="0">Select</option>
<option value="0-16">0-16</option>
<option value="17-25">17-25</option>
<option value="26-40">26-40</option>
<option value="41-60">41-60</option>
<option value="60+">61+</option>
</select>
</td>
</tr>
<tr>
<td><label for="license" class="hidden">Driver's License: </label></td>
<td><input type="test" name="license" id="license" class="hidden"><br></td>
User can enter values in some or all the rows present in the html table and click on the submit button. If a value is present in the row (if at least one column field value is entered) and the submit button is clicked, I want to get all the details as a json array.
Working sample demo : http://jsfiddle.net/Crw2C/173/
In the working demo above, when the user clicks on the convert button, the data from the html table is shown as a json array. I tried a similar implementation in my demo as shown in the code below but it is not working as expected.
My sample demo code which is not working as expected: http://plnkr.co/edit/FODEJ1BnhPLGHoH9kjO5?p=preview
Sample html code:
<table id="productTable" border="1">
<tr>
<th>Order ID</th>
<th>Product1</th>
<th>Description</th>
<th>Product2</th>
<th>Comments</th>
</tr>
<tr>
<td><input type="text" name="orderNum" value=""></td>
<td>
<select class="product1" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
.......
Sample js code:
$('#productTable th').each(function(index, item) {
headers[index] = $(item).html();
});
$('#productTable tr').has('td').each(function() {
var arrayItem = {};
$('td', $(this)).each(function(index, item) {
arrayItem[headers[index]] = $(item).html();
});
array.push(arrayItem);
});
Note: With my code above, the entire html element is retrieved and stored as json array but I only want the value. Any sample code would be appreciated as I tried to search and tried in different ways but was unable to succeed. The sample code I tried I also shared in the demo link above, which is not working. Thanks.
You are selecting the whole <td>...</td> instead of this select html input or select elements.
$('#productTable tr').has('td').each(function() {
var arrayItem = {};
$('td input, td select', $(this)).each(function(index) {
arrayItem[headers[index]] = $(this).val();
});
array.push(arrayItem);
});
Check below snippet.
function populateSelect() {
var ids = [{"pid":"laptop","des":"laptop"},{"pid":"Mobile","des":"Mobile"},{"pid":"IPAD mini.","des":"IPAD mini."}]
var productDropdown1 = $(".product1");
var productDropdown2 = $(".product2");
$.each(ids, function(index,value) {
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown1);
$("<option />").text(value.des).val(value.pid).appendTo(productDropdown2);
});
$("select").change(function() {
var row = $(this).closest("tr");
var product1_drop = $('.product1',row).val();
var product2_drop = $('.product2',row).val();
var descValue = $('input[name="description"]',row).val();
if( product1_drop && product2_drop)
validate(product1_drop,product2_drop, descValue);
});
$('input[name="description"]').on('input', function(e){
var row = $(this).closest("tr");
var product1_drop = $('.product1',row).val();
var product2_drop = $('.product2',row).val();
console.log("-inut -product1_drop----- " + product1_drop);
if( product1_drop && product2_drop)
validate(product1_drop,product2_drop, $(this).val());
});
}
function validate(prod1, prod2, desc){
if(desc && prod1 === prod2 ){
alert('Product1 and Product2 cannot have same value');
}
}
function submitData(){
alert("submit");
var array = [];
var headers = [];
$('#productTable th').each(function(index, item) {
headers[index] = $(item).html();
});
$('#productTable tr').has('td').each(function() {
var arrayItem = {};
$('td input, td select', $(this)).each(function(index) {
arrayItem[headers[index]] = $(this).val();
});
array.push(arrayItem);
});
alert(JSON.stringify(array));
}
$(document).ready(function(){
populateSelect();
// $('#productTable tbody tr:gt(0) :input').prop('disabled',true)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productTable" border="1">
<tr>
<th>Order ID</th>
<th>Product1</th>
<th>Description</th>
<th>Product2</th>
<th>Comments</th>
</tr>
<tr>
<td><input type="text" name="orderNum" value=""></td>
<td>
<select class="product1" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value=""></td>
<td>
<select class="product1" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value=""></td>
<td>
<select class="product1" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
<tr>
<td><input type="text" name="orderNum" value=""></td>
<td>
<select class="product1" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="description" value="">
</td>
<td>
<select class="product2" >
<option value=""></option>
</select>
</td>
<td>
<input type="text" name="Comments" value="">
</td>
</tr>
</table> <br>
<input type="submit" value="submit" onclick="submitData()">
In your column loop, you don't want to assign the entire html of the cell. Rather, you need just the value of the select box that is contained in the cell.
In other words: change $(item).html() in your loop on the 'td's to $(item).find('select').val().
You should change this part of code
$('#productTable tr').has('td').each(function() {
var arrayItem = {};
$('td input, td select', $(this)).each(function(index, item) {
arrayItem[headers[index]] = $(item).val();
});
array.push(arrayItem);
});
You are selecting the <td> html, but what you really want is the input and select values.
I am trying to get the values of inputs in a dynamically generated tr in to an array. How can I get the combined td values in an array?
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
alert($(el).val());
}
};
$('#button').click(onClick);
I can pull input values using .find('.myInpCls'). How can I get the combined values here? Something like the array of input1##value 1, input2##value 2 etc.
UPDATE:
I have a select box in the next td. I have to combine these 2 items. ie,the input value+corresponding select item.
Fiddle
To create an array of the input values you can use map():
var onClick = function() {
var values = $('#sub1 .myInpCls').map(function() {
return this.value;
}).get();
//use the values array here...
console.log(values);
};
$('#button').click(onClick);
Working example
I would loop the tr and search for the input and select. Than you can do whatever you want to.
Your updated example.
$('#button').click(function() {
$("#sub1 tr").each(function() {
var input = $(this).find(".myInpCls").val() || 0,
select = $(this).find(".mySelCls").val() || 0,
value = parseInt(input) + parseInt(select);
alert(value);
});
});
I cleaned up your code a bit. Note that my answer takes into account the case where a user doesn't fill up all fields.
$("#button").click(function(){
var append_array = [];
$("tr").each(function(){
var input = $(this).find("input").val();
var select = $(this).find("select").val();
(input != '' ? append_array.push(input) : '');
append_array.push(select);
});
console.log(append_array);
return append_array;
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
</body>
</html>
var onClick = function() {
var result= [];
var inputs = $("#sub1").find('.myInpCls');
for(var i=0; i < inputs.length;i++){
var el = inputs[i];
result.push($(el).val());
}
alert(result.join(","));
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width: 100%" id="sub1">
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select></td>
</tr>
<tr>
<td><input class="myInpCls" type="text" /></td>
<td><select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select></td>
</tr>
</table>
This will give you comma separated values for the text boxes , I hope this is what you are looking for.
Please mark the answer if it works for you
Try this snippet.
var onClick = function() {
var inputs = $("#sub1").find('.myInpCls');
var arr = [];
for (var i = 0; i < inputs.length; i++) {
var el = inputs[i];
arr.push("input #" + i + ' : ' + $(el).val());
}
var selects = $("#sub1").find('.mySelCls');
for (var j = 0; j < selects.length; j++) {
var sel = selects[j];
arr.push("select #" + j + ' : ' + $(sel).val());
}
alert(arr);
};
$('#button').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<table style="width:100%" id="sub1">
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="myInpCls" type="text" />
</td>
<td>
<select class="mySelCls">
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
</td>
</tr>
</table>
So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.
I have a select list containing variables from a query
<tr>
<td>County Name:</td>
<td>
<select name="countyName" onchange="countyID.value = countyName.value">
<option>Select a County</option>
<cfloop query = "getCounties">
<option value="#countyName#" >#countyName# #countyID#</option>
</cfloop>
</select>
</td>
</tr>
How can I populate the County ID field?
<tr>
<td>County ID:</td>
<td><input type="Text" name="countyID">
</td>
</tr>
I've never used jQuery. Is there a way to use just JavaScript? As you can see I've attempted JavaScript, however I can only populate countyID with the countyName and I need it populated with countyID.
Just out of curiousity, why are you using #countyName# as the values for your options? What if the county (erroneously or not) has a quotaton mark or something else that will screw with your HTML.
Why wouldn't you do:
<select name="countyName" onchange="countyID.value = this.value">
<option value="#countyID#">#countyName#</option>
</select>
Breaking it out into a function this should work for you: Live Example
<table>
<tbody>
<tr> <td>County ID:</td> <td><input id="countyId" type="Text" name="countyID"> </td> </tr>
<tr> <td>County Name:</td>
<td>
<select name="countyName" onchange="update(this)">
<option>Select a County</option>
<option value="1234">asdf</option>
<option value="4321">asdf2</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
function update( elem ) {
document.getElementById('countyID').value = elem.value;
}
</script>
Or in short just change
this:
<select name="countyName" onchange="countyID.value = countyName.value">
to this, and it should work
<select name="countyName" onchange="document.getElementById('countyId').value = this.value">
You need to reference your DOM elements via document.getElementById() and not just their id alone
Another example here