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>
Related
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'm having a difficult time getting this to work. I pretty much have the HTML able to display. I'm new to Javascript, I don't know how to make it work. Specifically the quantity multiplier, adding the total column, and getting the results of these functions to display in the elements. Please help!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" oninupt="multiplyQuantity('1')"></td>
<td><input type="text" name="calculated1" id="calculated1" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" oninupt="multiplyQuantity('2')"></td>
<td><input type="text" name="calculated2" id="calculated2" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" oninupt="multiplyQuantity('3')"></td>
<td><input type="text" name="calculated3" id="calculated3" disabled></td>
<td><input onblur="findTotal()" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+i).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
document.getElementById("price"+i).value = price;
}
function multiplyQuantity(){
var "calculated"+y = price * document.getElementById("quantity"+y).value;
document.getElementById("total"+y).value = calculated;
}
function findTotal(){
var arr = document.getElementsByName('pretotal')
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
There are a some bugs in your code (naming of variables and functions that don't match) and there is a much better way to do this then what you're doing now but as to not complicate matters more I just fixed the bugs.
Here is your working code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td>
<select name="merch1" id="merch1" oninput="calcPrice('1')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity1" id="quantity1" onchange="calcPrice('1')">
</td>
<td>
<input type="text" name="calculated1" id="calculated1" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total1">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch2" id="merch2" oninput="calcPrice('2')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity2" id="quantity2" onchange="calcPrice('2')">
</td>
<td>
<input type="text" name="calculated2" id="calculated2" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total2">
</td>
</tr>
<br>
<tr>
<td>
<select name="merch3" id="merch3" oninput="calcPrice('3')">
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td>
<input type="number" min="0" value="0" name="quantity3" id="quantity3" onchange="calcPrice('3')">
</td>
<td>
<input type="text" name="calculated3" id="calculated3" disabled>
</td>
<td>
<input type="text" name="pretotal" id="total3">
</td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right">
<strong>Total:</strong>
</td>
<td>
<input type="text" name="total" id="total" disabled>
</td>
</tr>
</table>
<br>
<b>
Comment:
</b>
<br>
<textarea rows="4" cols="50"></textarea>
<br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calcPrice(x){
var item = document.getElementById("merch"+x).value;
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
}
multiplyQuantity(price,x);
findTotal();
}
function multiplyQuantity(price,index){
var calculated = price * document.getElementById("quantity"+index).value;
document.getElementById("total"+index).value = calculated;
document.getElementById("calculated"+index).value = price;
}
function findTotal(){
var total = [1,2,3]
//get total values
.map(x=>document.getElementById("total"+x).value||"0")
//convert to number
.map(x=>x*1)
//sum of numbers
.reduce(
(acc,item)=>acc+item
,0
);
document.getElementById('total').value = total;
}
</script>
</body>
</html>
I made a few changes. I changed 'oninput' to 'onchange' on all the elements. Also changed variable names.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<strong>Invoice #</strong>
<input class="countit">
<table>
<th>Item</th><th>Quantity</th><th>Price</th><th>Total</th>
<tr>
<td><select name="merch1" id="merch1" onchange="calPrice('1');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select>
</td>
<td><input type="number" min="0" name="quantity1" id="quantity1" onchange="multiplyQuantity('1');"></td>
<td><input type="text" name="price1" id="price1" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total1"></td>
</tr>
<br>
<tr>
<td><select name="merch2" id="merch2" oninput="calPrice('2');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity2" id="quantity2" onchange="multiplyQuantity('2');"></td>
<td><input type="text" name="price2" id="price2" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total2"></td>
</tr>
<br>
<tr>
<td><select name="merch3" id="merch3" oninput="calPrice('3');">
<option value="">Please select</option>
<option value="tshirt">T-Shirt</option>
<option value="longsleeve">Longsleeve</option>
<option value="hoodie">Hoodie</option>
<option value="cd">CD</option>
<option value="tape">Tape</option>
<option value="lp">LP</option>
</select></td>
<td><input type="number" min="0" name="quantity3" id="quantity3" onchange="multiplyQuantity('3');"></td>
<td><input type="text" name="price3" id="price3" disabled></td>
<td><input onblur="findTotal();" type="text" name="pretotal" id="total3"></td>
</tr>
<br>
<tr>
<td></td>
<td></td>
<td style="text-align:right"><strong>Total:</strong></td>
<td><input type="text" name="total" id="total" disabled></td></tr>
</table>
<br>
<b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
<script language="javascript" type="text/javascript">
function calPrice(x){
var item = document.getElementById("merch"+x).value;
console.log(item);
var price;
switch(item){
case("tshirt"):
price = 10;
break;
case("longsleeve"):
price = 20;
break;
case("hoodie"):
price = 26;
break;
case("cd"):
price = 10;
break;
case("tape"):
price = 7;
break;
case("lp"):
price = 17;
break;
default:
price = 0;
break;
}
console.log(price);
document.getElementById("price"+x).value = price;
var qty = document.getElementById("quantity"+x).value;
if(!qty) {
document.getElementById("quantity"+x).value = 1;
}
multiplyQuantity(x);
}
function multiplyQuantity(x){
var price = document.getElementById("price"+x).value;
var qty = document.getElementById("quantity"+x).value;
document.getElementById("total"+x).value = price * qty;
findTotal();
}
function findTotal(){
var arr = document.getElementsByName('pretotal');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
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>
Here I have two radio buttons,what I want is if i select radio button student then class row should be visible else profession row is visible. but at a time only one row is visible.
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td></tr>
<tr><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr><td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
I tried to use this java script
function select_mem()
{
var stu= $('input:radio[name=member]:checked').val();
document.write(stu);
}
Here I was trying to get stu value to see what i will get and then i can put if condition.
Please help me how to do it
This should help
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem(this.value)">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem(this.value)">Parent<br></td></tr>
<tr id="cls"><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr id="pro"><td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
function select_mem(val)
{
if ( val == "student" ){
document.getElementById("cls").style.display = "table-row";
document.getElementById("pro").style.display = "none";
} else {
document.getElementById("cls").style.display = "none";
document.getElementById("pro").style.display = "table-row";
}
}
Try this
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" >Student<br></td>
<td><input type="radio" name="member" value="parent" >Parent<br></td></tr>
<tr><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr><td class="Prof">Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
$(function() {
$(".class").hide();
$(".Prof").hide();
$('input[type="radio"]').bind('click',function() {
if($(this).val()=="student")
{
$(".class").show();
}
else
{
$(".Prof").show();
}
});
});
Keep ID for two sections..
<tr class="hideclass" id="student"><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr class="hideclass" id="parent">
<td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td>
</tr>
JQuery:
function select_mem()
{
var stu= $('input[type="radio"]:checked').val();
$('.hideclass').css({"display":"none"});
$('#'+stu).css({"display":"block"});
}
Working JSFiddle
Working code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function select_mem() {
if ($("input[name='member']:checked").val() == "student") {
$('.studentrow').hide();
$('.parentrow').show();
}
else if ($("input[name='member']:checked").val() == "parent") {
$('.parentrow').hide();
$('.studentrow').show();
}
}
</script>
<title></title>
</head>
<body>
<table>
<tr>
<td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td>
</tr>
<tr class="studentrow">
<td>Class</td>
<td>
<select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
</select>
</td>
</tr>
<tr class="parentrow">
<td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td>
</tr>
</table>
</body>
</html>
What all I have done is
Do if() on the value of checked radio button
hide / show rows inside if() body
to hide\show rows, I specified class for each row and called .show() and .hide() method on them.
Instead of click use .on('change') event handler.
$(document).ready(function () {
$('input[name=member]').on('change', function () {
var value = $(this).val(); //get the selected option
if(value === 'student'){ //show or hide based on condition
$('.student').show();
$('.parent').hide();
}
else {
$('.parent').show();
$('.student').hide();
}
});
});
You can remove the onclick from the HTML bit, and add an ID for each row to show/hide:
<tr>
<td>Member</td>
<td>
<input type="radio" name="member" value="student">Student<br>
</td>
<td>
<input type="radio" name="member" value="parent">Parent<br>
</td>
</tr>
<tr id="class" style="display:none">
<td>Class</td>
...
</tr>
<tr id="profession" style="display:none">
<td>Profession</td>
...
</tr>
And change your JS, to bind the click event handler:
// Add this piece of script to the page header. Inline, or add to your JS file (preferably).
// On page load, it will attach the handler to the click event. Which means, the code will be executed every time the radio buttons are clicked.
$(function () {
$("input:radio[name=member]").on("click", function () {
$("#class").toggle($(this).val() == "student");
$("#profession").toggle($(this).val() == "parent");
});
});
See it working: http://jsfiddle.net/R4gej/
UPDATE
As you seem to be having problems using this solution, below you can find the whole code as it should be placed in the page, including the jQuery library link:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("input:radio[name=member]").on("click", function () {
$("#class").toggle($(this).val() == "student");
$("#profession").toggle($(this).val() == "parent");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Member</td>
<td>
<input type="radio" name="member" value="student">Student<br>
</td>
<td>
<input type="radio" name="member" value="parent">Parent<br>
</td>
</tr>
<tr id="class" style="display:none">
<td>Class</td>
</tr>
<tr id="profession" style="display:none">
<td>Profession</td>
</tr>
</table>
</body>
UPDATE #2
You've posted in the comments that this solution doesn't work. I've tested it a dozen times and can't find a single problem. Are you sure you know what you're doing? Do you know how to debug a piece of Javascript code? Are you adding the jQuery library properly? Are you loading the piece of script in the right place?
It's all more than explained here. Sorry, but I don't see any other way to help you.
Check the following images to see that it works:
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>