I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>
Related
I have table with default amount and pre-number select option on top. When select a new price will change in each row's input. Here I want the new number from select calculate the total price into the next row automatically.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
var i_pay = $(this).closest('tr').find('#pay').text();
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('#pay').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">900</p>
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">800</p>
</td>
</tr>
</table>
What I expect is when I select 5. The #1 row's total would be 5*900=4500 and the #2 would be 5*800=4000. Please find the fiddle here : https://jsfiddle.net/w56940ez/
First change $('.price').keyup(function(){}); to $('.price').change(function(){}); or you won't be able to change total value using arrows. If you don't want to use arrows you can keep keyup event.
To automatically change the value of the total column you just need to use trigger("change") on your ìnput elements.
If you want the base values to always be 800 and 900, you should use a data-attributes (data-first-value) which will keep this value and which will be used during the calculation.
Identifiers must be unique like #j08691 said. So you have basically two solutions:
use a pay class instead of a pay id. You juste need to replace id="pay" with class="pay" and #pay with .pay
use two identifiers. You need to add another data-attributes (data-id) and use it to get the input you want.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
input_elements = $('td.' + pset).find('input.price');
input_elements.val($(this).val());
input_elements.trigger("change");
});
//calc
$('.price').change(function() {
/*
USING A CLASS FOR BOTH
var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('.pay').html(total);
*/
var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$("#"+$(this).attr("data-id")).html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi">
<input type="number" class="form-control price" name="price1" value="1" data-id="pay_1" />
</td>
<td class="align-middle text-center">
<p id="pay_1" data-first-val="900">900</p>
<!--<p class="pay" data-first-val="900">900</p>-->
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" data-id="pay_2"/></td>
<td class="align-middle text-center">
<p id="pay_2" data-first-val="800">800</p>
<!--<p class="pay" data-first-val="800">800</p>-->
</td>
</tr>
</table>
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 use this HTML code:
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide" id="srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
As soon as the value of "type_new" == 3 I would like to show the hidden th & hidden td elements.
To use this I've already tried to use jquerys toogle function:
Here is the working sample
$( "#type_new" ).change(function () {
console.log("changed");
if (this.value == 3) {
$("#srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$("#srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
Any idea why it only makes the first TH element visible?
$("#type_new").change(function() {
console.log("changed");
if (this.value == 3) {
$("#srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
} else {
$("#srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Jquery library for bootstrap-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide" id="srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
You are giving same id to all tds instead you should make it a class. One id should be for one element. I have made changes to your code and see below if this is what you are looking for:
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide srv_new">new th1</th>
<th class="hide srv_new">new th2</th>
<th class="hide srv_new">new th3</th>
<th class="hide srv_new">new th4</th>
<th class="hide srv_new">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text 1</option>
<option value="2">sampe text 2</option>
<option value="3">sample text 3</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide srv_new">
<select class="form-control" name="srv_type" id="srv_type">
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide srv_new">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide srv_new">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
</table>
JS:
$( "#type_new" ).change(function () {
console.log("changed", this.value);
if (this.value == 3) {
$(".srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$(".srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
Demo fiddle:
https://jsfiddle.net/bxkgmwhy/1/
Ids are meant to be unique though your html document. Since you make use of ids, $('#srv_new) will only return you the first element and henc eyou see the result on only th elements
Make use of class
<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>TTL</th>
<th class="hide srv_new">new th1</th>
<th class="hide" id="Th1">new th2</th>
<th class="hide" id="Th2">new th3</th>
<th class="hide" id="Th3">new th4</th>
<th class="hide" id="Th4">new th5</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="host_new" placeholder="subdomain">
</td>
<td>
<input type="numeric" name="ttl_new" value="3600">
</td>
<td>
<select name="type_new" id="type_new">
<option value="1">sample text</option>
<option value="2">sampe text</option>
<option value="3">sample text</option>
</select>
</td>
<td>
<input type="text" name="destination_new" placeholder="1.3.3.7">
</td>
<td class="hide" id="Td1">
<select class="form-control srv_new" name="srv_type" >
<option value="0">Minecraft</option>
</select>
</td>
<td class="hide" id="Td2">
<select class="form-control" name="srv_protocol" id="srv_protocol">
<option value="0">UDP</option>
<option value="1">TCP</option>
</select>
</td>
<td class="hide" id="Td3">
<input class="form-control" type="numeric" name="srv_priority" value="0">
</td>
<td class="hide" id="Td4">
<input class="form-control" type="numeric" name="srv_weight" value="0">
</td>
<td class="hide" id="Td5">
<input class="form-control" type="numeric" name="srv_port" placeholder="1234">
</td>
</tr>
</tbody>
JS
$( "#type_new" ).change(function () {
console.log("changed");
if (this.value == 3) {
$(".srv_new").removeClass('hide');
$('#destination_new').attr("disabled", true);
}
else{
$(".srv_new").addClass('hide');
$('#destination_new').removeAttr('disabled');
}
});
First add an ID to the <tr> head and remove the .hide class. This is not neccesary, but you don't need it if you use jQuery's build in .hide() and .show() functions.
<thead>
<tr id="table-head">
<th>Host</th>
<th>TTL</th>
<th id="srv_new">new th1</th>
<th id="Th1">new th2</th>
<th id="Th2">new th3</th>
<th id="Th3">new th4</th>
<th id="Th4">new th5</th>
</tr>
</thead>
Then in the jQuery function, loop through the elements in the <tr> and find elements that have the .hide class. Again, I suggest you use the default .hide() and .show() functions.
The .find() function searches for elements that match what you put into it (I believe only to the first child, but don't quote me on that). So it's going to search for every <th> that is a child of <tr id="table-head">.
Then we need to check if those <th> are visible or not, because if they already are, then don't bother. So we add the .not(":visible") which tells jQuery to look for items that are invisible (make sure this works by display: none; and make sure the element is shown as block/inline-block. visibility: none; won't affect the visibility, but you will be able to do some own google searc on that).
After that we use the .each(function(index, element) to create a loop through those elements we found, in which element is the <th> which we need to perform edits on. In the function we can then simply select that element using jQuery by doing $(element) where element is the variable passed in the function. After that we call the .show() method to show the element.
Then using the .prop("disabled", true) function we set the disabled property of the selected element. In our case the $("#destination_new).
In the else statement we do the same thing, but then the other way around. I'm sure you'll understand if you take a brief look at it.
$("#type_new").change(function() {
console.log("changed");
if(this.value == 3) {
$("#table-head").find("th").not(":visible").each(function(index, element) {
$(element).show();
});
$("#destination_new").prop("disabled", true);
} else {
$("#table-head").find("th").is(":visible").each(function(index, element) {
$(element).hide();
$("#destination_new").prop("disabled", false);
});
}
});
Remember, using jQuery's selector $("element") you only pick one element. So by telling the selector to grab something with an id, it will only grab a single element. Use the .each() function to do multiple. Good luck, hope this helped!
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've below HTML,
<table id="_GroupsTable">
<thead>
<tr>
<th style="width: 90%;">
City
</th>
<th style="width: 10%;">
Del
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="_SkillsDropDownList0" name="_SkillsDropDownList0">
<option value="1">All Skills</option>
<option value="2"> Web App</option>
<option selected="selected" value="5"> MVC</option>
<option value="3"> jQuery</option>
<option value="16"> HTML</option>
<option value="4"> CSS</option>
</select>
</td>
<td style="text-align: center;">
<input id="_GroupsRolesCheckbox0" type="checkbox">
</td>
</tr>
</tbody>
<table>
When I tried to read value with below code I'm not getting the values in proper order.
var jdata = $("#_GroupsTable")[0];
var kvpGroups = $.data(jdata, "groupsKvp");
I'm expecting the values in 1 = All Skills, 2 = Web App, 3= jQuery.. basically the same order where values are appearing in the dropdown, however, I'm NOT getting in the same order. Any pointer at the right directions will be appreciated.