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>
Related
i have diferent select options with the same values in a table.
how do i make that when all selects get the same value ("2") do something (add disabled atributte to an input)?
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">
Read the values into an array values. If all of the values are 2 the disable the checkbox using .prop('disabled', true):
$('.class1').on('change', function() {
let values = $('.class1').map(function() {
return +this.value;
}).get();
values.some(checkValue) || $('#x').prop('disabled', true);
});
function checkValue( value ) {
return value !== 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">
You can do it as follows: Push the value of each select in an array and use unique() to only keep unique values. In case you want to disable the input if the values of the selects are the same (either 1 or 2), disable the input if the length of this array is 1.
$("select").on("change", function() {
let a = [];
$("select").each(function() {
a.push($(this).val());
$.unique(a);
});
if (a.length === 1) {
$(".checkbox").attr("disabled", true);
}
else {
$(".checkbox").removeAttr("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">
In case you only want to disable the input when the values of all selects are 2, you can do it as follows:
$("select").on("change", function() {
let a = [];
$("select").each(function() {
a.push($(this).val());
$.unique(a);
});
if (a.length === 1 && $.inArray("2", a !== -1)) {
$(".checkbox").attr("disabled", true);
}
else {
$(".checkbox").removeAttr("disabled");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
<td>
<select class="class1">
<option value="1">SI</option>
<option value="2">NO</option>
</select>
</td>
</table>
<input type="checkbox" class="checkbox" id="x">
The code is copied from jsfiddle, but not working in my webpage. I tried to include the script at bottom and added document.ready function
code in JSfiddle
enter link description here
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<table border = "1" id = "engagements">
<tr>
<th><input type="checkbox" onclick="checkAll(this)"></th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)"></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<!--
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
<td><input type = "text"/></td>
-->
</tr>
</table>
<select name = "mode" id = "mode" onchange="addrow('engagements')">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
</body>
</html>
Error in webpage
newhtml.html:43 Uncaught ReferenceError: addrow is not defined
at HTMLSelectElement.onchange (newhtml.html:43)
<script src="jquery-3.3.1.min.js">
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
}
</script>
any help will be highly appreciated
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
});
</script>
May be you didn't import jquery properly and you have added in same script tag as comment suggested
$("#mode").on('change', function () {
var rows = parseInt(this.value);
console.log(rows);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" id="engagements">
<tr>
<th>
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th>Organization</th>
<th>Project</th>
<th>Product</th>
<th>Activity</th>
</tr>
<tr>
<td>
<input type="checkbox" onclick="checkAll(this)" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
<select name="mode" id="mode">
<option value="">Add More Rows with Same Data as Above</option>
<option value="1">1 More</option>
<option value="2">2 More</option>
<option value="3">3 More</option>
<option value="4">4 More</option>
<option value="5">5 More</option>
</select>
</form>
When 'combo box' option is changed, you just declared to invoke function 'addrow' without definition.
You must reference jquery in a separate script tag before you use it like this. Then add your code below it in an another script tag
<script>
$(document).ready(function() {
$("#mode").on('change', function () {
var rows = parseInt(this.value);
var lastRow;
for (var i = 0; i < rows; i++) {
lastRow = $('#engagements tr').last().clone();
$('#engagements tr').last().after(lastRow);
}
});
}
</script>
I have been trying to use a function in a javascript file inside another html file. Essentially, it's not working and I think it has to do with my trying to make the javascript accessible on the html file. The function is supposed to add the values taken from the form and then output that sum. The first bit of code is my .js file and the second is my html.
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate(form)
{
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<html>
<header>
<script language="Javascript" src="tmdcalculation.js" type="text/javascript"></script>
</header>
<body>
<form name="worksheet1" id="worksheet1" onsubmit="calculate">
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td>Feeling</td>
<td>How I have felt</td>
</tr>
<tr>
<td>Question 1?</td>
<td><select name="Q1" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 2?</td>
<td><select name="Q2" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 3?</td>
<td><select name="Q3" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 4?</td>
<td><select name="Q4" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
<tr>
<td>Question 5?</td>
<td><select name="Q5" size="1">
<option value="0" selected="selected">Not at all</option>
<option value="1">A Little</option>
<option value="2">Moderately</option>
<option value="3">Quite a Bit</option>
<option value="4">Extremely</option>
</select></td>
</tr>
</table></td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td><table>
<tr>
<td align="right"><input name="button" type="button" onclick="calculate(this.form)" value="Analyse" /></td>
<td>Total Mood Calc:
<input name="totals" type="text" size="3" /></td>
<td><input name="reset" type="reset" onclick="initial()" value="Reset" /></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
P.s Some extra questions. I had borrowed some of the code from a website because I am still quite new to both javascript and html. Why does the reset function have the array values all turned to 100? And, why doesn't the calculate function just call the reset function instead of doing the same thing?
I'm only a newbie to jscript and this may not work but can give this a go
function reset()
{
var q = new Array(5);
for(var i = 0; i < 5; i++)
{
q[i] = 100;
}
}
function calculate() {
var q = new Array(5);
for(var i = 0; i < 5; i++) {
q[i] = 100;
}
q[1] = document.worksheet1.Q1.options[document.worksheet1.Q1.selectedIndex].value;
q[2] = document.worksheet1.Q2.options[document.worksheet1.Q2.selectedIndex].value;
q[3] = document.worksheet1.Q3.options[document.worksheet1.Q3.selectedIndex].value;
q[4] = document.worksheet1.Q4.options[document.worksheet1.Q4.selectedIndex].value;
q[5] = document.worksheet1.Q5.options[document.worksheet1.Q5.selectedIndex].value;
var total = (q[1]*1.0)+(q[2]*1.0)+(q[3]*1.0)+(q[4]*1.0)+(q[5]*1.0);
document.worksheet1.totals.value = total;
}
<form name="worksheet1" id="worksheet1" onsubmit="return calculate()">
I have created some code in JavaScript that allows the user to add values to a dropdown menu and three arrays which the dropdown menu pulls and displays values from. I was wondering if there is a way to create a cookie or something that will keep the values that a user adds. Below is my code an here is the link to the working JSfiddle.
<html>
<head>
<title>Selected Index Design</title>
<script >
var arr1 = ["",0,6,0,15,4,0,1,0,0,17];
var arr2 = ["",0,5,19,3,26,3,25,0,0,24];
var arr3= ["",0,15,0,9,0,5,0,0,0,7];
function fill() {
var si = document.getElementById('dd').selectedIndex;
if (si !==0)
{
var a = arr1[si];
var b= arr2[si];
var c= arr3[si];
var x = document.getElementById("factor").value;
var d= a*x;
var e= b*x;
var f=c*x;
var g = d*4 + e*4 + f*9;
document.getElementById("val1").innerHTML=d;
document.getElementById('val2').innerHTML=e;
document.getElementById('val3').innerHTML=f;
document.getElementById('val4').innerHTML=g;
}
}
function addoption(){
var mySelect = document.getElementById('dd'),
newOption = document.createElement('option');
newOption.value = document.getElementById('addopt').value;
if (typeof newOption.innerText === 'undefined')
{
newOption.textContent = document.getElementById('addopt').value;
}
else
{
newOption.innerText = document.getElementById('addopt').value;
}
mySelect.appendChild(newOption);
var newone= document.getElementById('addone').value;
var newtwo= document.getElementById('addtwo').value;
var newthree= document.getElementById('addthree').value;
arr1.push(newone);
arr2.push(newtwo);
arr3.push(newthree);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<th>dd</th>
<th>factor</th>
<th>v1</th>
<th>v2</th>
<th>v3</th>
<th>v4</th>
</tr>
<tr class="odd">
<td>
<form name = "dd">
<select name = "dd" id="dd" onchange = "fill()">
<option > a </option>
<option > b </option>
<option > c </option>
<option > d </option>
<option > e </option>
<option > f </option>
<option > g </option>
<option > h </option>
<option > i </option>
<option > j </option>
<option > k </option>
</select>
</form>
</td>
<td id="fac">
<form name="factor">
<select id="factor" onChange="fill();">
<option value=""></option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
<option value=6>6</option>
<option value=7>7</option>
<option value=8>8</option>
<option value=9>9</option>
</select>
</form>
</td>
<td id="val1"></td>
<td id="val2"></td>
<td id="val3"></td>
<td id="val4"></td>
</tr>
<tr class="even">
<td></td>
<td></td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<br><br>
<h3>Insert New data</h3>
<b>option<b>
<input type='text' value='' id='addopt'><br><br>
<b>array one</b>
<input type='text' value='' id='addone'><br><br>
<b>array 2</b>
<input type='text' value="" id='addtwo'><br><br>
<b>array 3</b>
<input type='text' value='' id='addthree'><br><br>
<button id="button" onclick="addoption()">add</button>
<div id='result'></div>
</body>
</html>
You might be interested by something like HTML5 Offline Storage: http://www.html5rocks.com/en/tutorials/offline/storage/
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>