I have 2 List (inputgol & inputmskrj).
Wanna show 2nd list (inputmskrj) based on 1st list. After that, wanna get and display value ("prices") when 2nd list selected.
The problem : 2nd list and value haven't displayed.
I tried this code, but fail. So, let me know how i missed.
Thanks.
this is my bin
jsbin.com/wuxoxorija/edit?html,js,output
<html>
<head>
<script>
function nlaskes() {
var price = document.priceCalc.inputmskrj.value;
document.getElementById("prices").innerHTML = price;
}
$(document).ready(function() {
$('.menu-link').bigSlide();
$('#inputgol').on('change', function() {
if ( this.value == '1a')
{
$("#1a").show();
$("#1b").hide();
$("#1c").hide();
$("#1d").hide();
}
else if ( this.value == '1b')
{
$("#1b").show();
$("#1a").hide();
$("#1c").hide();
$("#1d").hide();
}
else if ( this.value == '1c')
{
$("#1c").show();
$("#1b").hide();
$("#1a").hide();
$("#1d").hide();
}
else
{
$("#areagol").hide();
}
});
});
</script>
</head>
<body>
Pilih golongan :
<select text-align="center" name="inputgol" id="inputgol">
<option text-align="center" value="0">--Pilih golongan--</option>
<option text-align="center" value="1a">I/A</option>
<option text-align="center" value="1b">I/B</option>
<option text-align="center" value="1c">I/C</option>
</select>
<div id="areagol">
<div id="1a" name="1a" class="gol" style="display: none;" >
<form name="priceCalc" action="">
<table>
<tr valign="middle">
<td valign="middle"><h5><b> Masa kerja golongan :</b></h5><td>
<td>
<select text-align="center" name="inputmskrj" id="inputmskrj" class="form-control" onchange="nlaskes();" >
<option text-align="center" value="0">--Pilih Masa Kerja--</option>
<option text-align="center" value="76.693">0-5</option>
<option text-align="center" value="83.647">6-10</option>
<option text-align="center" value="90.107">11-15</option>
</select></td>
</tr >
<tr valign="middle">
<td align="center" valign="middle"><b> Nilai (Rp.) </b></td>
<td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
</tr>
</table>
</form>
</div>
<div id="1b" name="1b" class="gol" style="display: none;" >
<form name="priceCalc" action="">
<table>
<tr valign="middle">
<td valign="middle"><h5><b> Masa kerja golongan :</b></h5></td>
<td>
<select text-align="center" name="inputmskrj" id="inputmskrj" class="form-control" onchange="nlaskes();">
<option text-align="center" value="0">--Pilih Masa Kerja--</option>
<option text-align="center" value="76.693">0-5</option>
<option text-align="center" value="83.647">6-10</option>
<option text-align="center" value="90.107">11-15</option>
</select></td>
</tr >
<tr valign="middle">
<td align="center" valign="middle"><b> Nilai (Rp.) </b></td>
<td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
</tr>
</table>
</form>
</div>
<div id="1c" name="1c" class="gol" style="display: none;">
<form name="priceCalc" action="">
<table>
<tr valign="middle">
<td valign="middle"><h5><b> Masa kerja golongan :</b></h5></td>
<td>
<select text-align="center" name="inputmskrj" id="inputmskrj" class="form-control" onchange="nlaskes();">
<option text-align="center" value="0">--Pilih Masa Kerja--</option>
<option text-align="center" value="76.693">0-5</option>
<option text-align="center" value="83.647">6-10</option>
</select></td>
</tr >
<tr valign="middle">
<td align="center" valign="middle"><b> Nilai (Rp.) </b></td>
<td align="center" ><b><h4><U><div id="prices"></div></u></h4></b></td>
</tr>
</table>
</form>
</div>
</div>
Related
Below is the HTML and the JavaScript being used to display the dropdown only if one of the options from the preceding dropdown is selected. When I select the one that is linked the following dropdown it works while when I select the second option not linked to the following dropdown and click submit, it throws the error "An invalid form control with name='AdjustmentBuyerPrice' is not focusable". Please point out the mistake that I did in my code.
`{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required>
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
});
</script>
{/literal}
{include file="footer.tpl"}
This is happening because you have AdjustmentBuyerPrice as required so when you have not selected value ItemPriceAdjustments its hidden and when you click on submit button that error shows .Instead you can remove required attribute when that select box is hidden else add required attribute .
Demo Code :
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function() {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
</form>
I have some JavaScript code in an HTML page with a button. I have two functions called 'total()' and 'con()' that handles the onClick event of the 2 buttons. i have tried putting the script tag on top of the form, buttons and i also tried putting it in the head tag. The code for the button is as follows
The problem is that when the button is clicked, the function is not called. What am I doing wrong here?
thanks for not criticizing me, i'm just a begginer.
function con() {
var conf = confirm('Are you finished?');
if (conf) {
return true
} else {
return false
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
</div>
The code is working for me. Whatever you are using, perhaps it doesn't support confirm(). Try if this works:
function con() {
var sentence = document.getElementById("sentence");
sentence.innerHTML = "Are you finished?";
document.getElementById("conf1").style.visibility = "visible";
document.getElementById("conf2").style.visibility = "visible";
}
function isDone(bool) {
if (bool) {
// do something
} else {
// do something
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
<p id="sentence"></p>
<button id="conf1" style="visibility: hidden" onclick="isDone(true)">Yes</button>
<button id="conf2" style="visibility: hidden" onclick="isDone(false)">No</button>
</div>
Note: This is just an example. You don't have to use this.
How do I send the value of first html code to another html file (like table format) using JavaScript?
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body bgcolor="#FFFFFF">
<form action="empDataEntryDisplay.html" method="GET">
<table align="center" width="50%" cellspacing="5" cellpadding="5" border="5">
<tr>
<td colspan="2" align="center"><b>Employee Registration Form</b></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Number<span style="color:red">*</span></td>
<td width="57%"><input type="text" value="" id="emp_num" size="41"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Name<span style="color:red">*</span></td>
<td width="57%"><input type="text" value="" id="emp_name" size="41"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Employee Age</td>
<td width="57%"><input type="text" value="" id="emp_age" size="41"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Date of Birth</td>
<td width="57%"><input type="date" value="" id="emp_dob" style="width:98.5%"></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Address</td>
<td width="57%"><textarea rows="4" maxlen="200" id="emp_address" cols="38"></textarea></td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Contact Number</td>
<td width="57%"><input type="text" value="" onkeypress="return isNumberKey(event)" id="emp_con_num" size="41"></td>
</tr>
<tr >
<td align="left" valign="top" width="41%">Job Location</td>
<td width="57%">
<select name="mydropdown" id="emp_job_place" style="width:100%">
<option value="Chennai">Chennai</option>
<option value="Arrupukottai">Arrupukottai</option>
<option value="Kurunthancode">Kurunthancode</option>
<option value="Thirunelveli">Thirunelveli</option>
<option value="Valliore">Valliore</option>
</select>
</td>
</tr>
<tr >
<td align="left" valign="top" width="41%">Designation</td>
<td width="57%">
<select name="mydropdown" id="emp_designaion" style="width:100%">
<option value="Trainee">Trainee</option>
<option value="Proof Reader">Proof Reader</option>
<option value="Senior Proof Reader">Senior Proof Reader</option>
<option value="Layout Expert">Layout Expert</option>
<option value="Senior Layout Expert">Senior Layout Expert</option>
<option value="Template Developer">Template Developer</option>
<option value="Senior Template Developer">Senior Template Developer</option>
<option value="Designer">Designer</option>
<option value="Senior Designer">Senior Designer</option>
<option value="Image Developer">Image Developer</option>
<option value="SeniorImage Developer">Senior Image Developer</option>
<option value="Team Leader">Team Leader</option>
<option value="Assistant Team Leader">Assistant Team Leader</option>
<option value="Production Manager">Production Manager</option>
<option value="Assistant Production Manager">Assistant Production Manager</option>
<option value="Senior Production Manager">Senior Production Manager</option>
<option value="Project Manager">Project Manager</option>
<option value="Project Manager">Assistant Project Manager</option>
<option value="Project Manager">Senior Project Manager</option>
<option value="Project Manager">Copy Editor</option>
<option value="System Administrator">System Administrator</option>
<option value="Senior System Administrator">Senior System Administrator</option>
<option value="Operations Head">Operations Head</option>
<option value="Vice President">Vice President</option>
</select>
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Email<span style="color:red">*</span></td>
<td width="57%"><input type="text" value="" id="emp_email" size="41"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
</tr>
</table>
</form>
</body>
</html>
Here is my another html code
<!DOCTYPE html>
<html>
<head>
<title>Registration Data Storage</title>
</head>
<body bgcolor="#FFFFFF">
<table id="myTableData" border="1" cellpadding="5" cellspacing="3">
<tr>
<td><b>ID Number</b></td>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Date of Birth</b></td>
<td><b>Address</b></td>
<td><b>Contact Number</b></td>
<td><b>Job Location</b></td>
<td><b>Designation</b></td>
<td><b>e-Mail</b></td>
<td> </td>
</tr>
</table>
</body>
</html>
My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});
I need a little help here. I am trying to show / hide div content on select of a jump menu. I can't seem to get the code to work. Here is my code:
JS:
function toggleOther(chosen){
if (chosen == 'cat') {
document.getElementById('categories').style.visibility = 'visible';
} else {
document.getElementById('categories').style.visibility = 'hidden';
document.myform.other.value = '';
}
And my page:
<td class="formlabel" nowrap="nowrap"><form name="Users">Users:</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" onchange="toggleOther( document.myform.values.options[document.myform.values.selectedIndex ].value );" class="select" >
<option selected="selected">Choose</option>
<option>All Users</option>
<option value="cat">User 1</option>
<option value="cat">User 2</option>
<option value="cat">User 3</option>
<option value="cat">User 4</option>
<option value="cat">User 5</option>
</select></td>
<div style="opacity: 0.3; background: #fff; display:none">
<td width="380" valign="top" class="center">
<table width="360" class="imagetable" cellpadding="0" cellspacing="0" id="categories">
<tr>
<th colspan="2" nowrap="nowrap" class="reportname">Categories</th>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap"><form name="Exams">Exams</td>
<td nowrap="nowrap" class="formlabel"><select name="fieldname" size="1" class="select">
<option value="#" selected="selected" target="_blank">Choose</option>
<option value="">All Exams</option>
<option value="">Exam 1</option>
<option value="">Exam 2</option>
<option value="">Exam 3</option>
<option value="">Exam 4</option>
<option value="">Exam 5</option>
</select></td>
</tr>
</form>
<tr>
<td nowrap="nowrap" class="formlabel">Include Categories</td>
<td nowrap="nowrap" class="formlabel"><input type="text" name="textfield2" id="textfield2" class="fields" size="4" />or more items assigned</td>
</tr>
<tr>
<td class="formlabel" nowrap="nowrap">Display Categories</td>
<td nowrap="nowrap" class="formlabel">that appear
<input type="text" name="textfield3" id="textfield3" class="fields" size="4" />or more exams</td>
</tr>
</table>
Any help here? I cannot seem to get it to work...
To hide:
document.getElementById('categories').style.display="none"
To show:
document.getElementById('categories').style.display=""
It is better to use the jquery's .toggle() method. You save time and it is nicer since you can do effects
http://api.jquery.com/toggle/
you could just do
$(#categories).toggle(); //to show or hide the id = "categories"