Hey all I want to be able to hit the enter when I am on either a dropdown box (select box) or a normal text field box.
My current HTML code looks like:
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
I've tried doing the following:
$('.jsgrid-edit-row > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
Using .jsgrid-edit-row > input I figured it would find that class and then move to its child and look for any input element that I was currently on?
So what am I doing incorrectly?
Here you go with one more solution https://jsfiddle.net/q7r4ccb4/1/
$('.jsgrid-edit-row > td > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
</table>
Use this instead
$('.jsgrid-edit-row input').keypress(function (e) {
This syntax searches for all input tags present inside the jsgrid-edit-row class
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've got some issues with data-toggle bootstrap in the code that i'm using.
When i want to hit the checkbox, the data-toggle is also triggered.
Is there any way to prevent the data-toggle function when checkbox is clicked ?
Or any solution
When i want to hit the checkbox, the data-toggle is also triggered.
Is there any way to prevent the data-toggle function when checkbox is clicked ?
Or any solution
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center">No. Kegiatan</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Nama</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Pagu</th>
<th colspan="2" style="vertical-align: middle; text-align: center">Aksi</th>
<th rowspan="2" style="width:20%;vertical-align: middle; text-align: center">PPTK</th>
</tr>
</thead>
<tbody>
<tr id="5" data-toggle="collapse" data-target=".collapse-2">
<td style="width: 150px;">5</td>
<td>BELANJA</td>
<td>426,132,000
</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk1" value="BELANJA">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang1" value="BELANJA">
</td>
<td>
<select class="form-control pkts1 akay show_only" name="pkt_pptk[]" style="display: none;">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs1 akay show_only" name="angg_pptk[]" style="display: none;">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
<tr id="52" data-parent="#5" class="collapse-2 collapse in" data-toggle="collapse" data-target=".collapse-3-52" aria-expanded="true" style="">
<td style="width: 150px;">5 . 2</td>
<td>BELANJA LANGSUNG</td>
<td>426,132,000</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk2" value="BELANJA LANGSUNG">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang2" value="BELANJA LANGSUNG">
</td>
<td>
<select class="form-control pkts2 akay show_only" name="pkt_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs2 akay show_only" name="angg_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
<tr id="521" data-parent="#52" class="collapse-3-52 collapse in" data-toggle="collapse" data-target=".collapse-4-521" aria-expanded="true" style="">
<td style="width: 150px;">5 . 2 . 1</td>
<td>Belanja Pegawai</td>
<td>8,652,000</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk3" value="Belanja Pegawai">
<input type="checkbox" name="d_namacpk[]" class="cpk3" value="Belanja Pegawai" style="display: none">
<input type="checkbox" name="d_pagucpk[]" class="cpk3" value="8652000" style="display: none">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang3" value="Belanja Pegawai">
</td>
<td> <select class="form-control pkts3 akay show_only" name="pkt_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs3 akay show_only" name="angg_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
</tbody>
</table>
There is many way to do it but here is one simple method that stop Propagation
$('input[type="checkbox"]').click(function(e){
e.stopPropagation()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<thead>
<tr>
<th rowspan="2" style="vertical-align: middle; text-align: center">No. Kegiatan</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Nama</th>
<th rowspan="2" style="vertical-align: middle; text-align: center">Pagu</th>
<th colspan="2" style="vertical-align: middle; text-align: center">Aksi</th>
<th rowspan="2" style="width:20%;vertical-align: middle; text-align: center">PPTK</th>
</tr>
</thead>
<tbody>
<tr id="5" data-toggle="collapse" data-target=".collapse-2">
<td style="width: 150px;">5</td>
<td>BELANJA</td>
<td>426,132,000
</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk1" value="BELANJA">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang1" value="BELANJA">
</td>
<td>
<select class="form-control pkts1 akay show_only" name="pkt_pptk[]" style="display: none;">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs1 akay show_only" name="angg_pptk[]" style="display: none;">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
<tr id="52" data-parent="#5" class="collapse-2 collapse in" data-toggle="collapse" data-target=".collapse-3-52" aria-expanded="true" style="">
<td style="width: 150px;">5 . 2</td>
<td>BELANJA LANGSUNG</td>
<td>426,132,000</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk2" value="BELANJA LANGSUNG">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang2" value="BELANJA LANGSUNG">
</td>
<td>
<select class="form-control pkts2 akay show_only" name="pkt_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs2 akay show_only" name="angg_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
<tr id="521" data-parent="#52" class="collapse-3-52 collapse in" data-toggle="collapse" data-target=".collapse-4-521" aria-expanded="true" style="">
<td style="width: 150px;">5 . 2 . 1</td>
<td>Belanja Pegawai</td>
<td>8,652,000</td>
<td class="text-center">
<input type="checkbox" name="cpaket[]" class="checkleng cpk3" value="Belanja Pegawai">
<input type="checkbox" name="d_namacpk[]" class="cpk3" value="Belanja Pegawai" style="display: none">
<input type="checkbox" name="d_pagucpk[]" class="cpk3" value="8652000" style="display: none">
</td>
<td class="text-center">
<input type="checkbox" name="canggaran[]" class="checkleng cang3" value="Belanja Pegawai">
</td>
<td> <select class="form-control pkts3 akay show_only" name="pkt_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
<select class="form-control anggs3 akay show_only" name="angg_pptk[]" style="display: none">
<option value="">-- Pilih PPK --</option>
</select>
</td>
</tr>
</tbody>
</table>
Iam trying to make the select dropdown be responsive to the input box
So when there's sth being enter in the input box (can be anything), the select will change to closed, If nothing is being enter in the input box, the select will be open. Any idea what's wrong with the code.Thanks in advance
$('.input').change(function() {
if ($(this).val() === '') {
$('.msg').text('open');}
else {
$('.msg').text('closed');}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
I would suggest three changes:
Change the event binding to $('.input').on("input",function() { - it will ensure that the dropdown changes with every keypress rather than on blur. So the user will be able to see the changes as they type in.
Change $(".msg") to $(this).parents("tr").find('.msg'). The former selects all elements in DOM that have .msg class, while the latter only affects the .msg elements belonging to the current tr.
Change .text('open') to .val("open") - this sets the value of the select element.
$('.input').on("input",function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
} else {
$(this).parents("tr").find('.msg').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
</table>
Use val() to change the value of the select and use keyup to trigger it if something is being pressed because if you use change it will only trigger if the focus is not already in the input.
$('.input').on('keyup',function() {
if ($(this).val() === '' ) {
$(this).parent().next().children('select').val('open');
}else {
$(this).parent().next().children('select').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>
As I commented on the question, use .val() function and introduce the same name as the value to select the value you want.
Take in mind that the code you provided, if there are many .msg dropdowns, it will change it for all of them.
Here is the snippet code.
$('.input').change(function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
}
else {
$(this).parents("tr").find('.msg').val('closed');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
</table>
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>
<table id="tbl1" width="650" border="0" cellspacing="5" cellpadding="0" class="normal-text">
<tr>
<td width="200" align="left" valign="top" class="singleCheckbox">
<input id="rptService_ctl01_rptSubService_ctl01_chkSubService" type="checkbox" name="rptService$ctl01$rptSubService$ctl01$chkSubService" checked="checked" /><label for="rptService_ctl01_rptSubService_ctl01_chkSubService">Energyquote Customer Agreements</label>
</td>
<td width="20" align="left" valign="middle">
<input type="hidden" name="rptService$ctl01$rptSubService$ctl01$hdnServiceid" id="rptService_ctl01_rptSubService_ctl01_hdnServiceid" value="536" />
</td>
<td width="40" align="right" valign="middle">
<select name="rptService$ctl01$rptSubService$ctl01$ddlFrequency" id="rptService_ctl01_rptSubService_ctl01_ddlFrequency">
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
<option value="4">Quarterly</option>
<option value="5">Half Yearly</option>
<option value="6">Yearly</option>
<option selected="selected" value="7">One Time</option>
</select>
</td>
<td width="40" align="right" valign="middle">
<input name="rptService$ctl01$rptSubService$ctl01$txtExpireDate" type="text" id="rptService_ctl01_rptSubService_ctl01_txtExpireDate" class="from" size="8" onKeyDown="preventBackspace();" />
</div>
</td>
<td width="150" align="right" valign="middle">
</td>
</tr>
</table>
$('.normal-text td ').each(function () {
var cellText = $(this).html();
});
The above code will get all the elements which are inside a td tag. But i need to get the checkbox id and hidden field value which is inside a td tag. I tried but its not able to fetch
I have a table as above have a class as normal-text for this table. I had used the below code to fetch elements which are inside a td
$('.normal-text td ').each(function () {
var cellText = $(this).html();
});
Here am getting the whole element value which is inside a td tag but i want to get the value of checkbox id and hidden value which is inside a td tag. Please suggest me
This is how to get it:
alert("Checkbox is checked: " + $(".normal-text td").find("input[type='checkbox']").prop('checked'));
alert("Hidden field value: " + $(".normal-text td").find("input[type='hidden']").val());
Here is the JSFiddle demo
If you have multipl eor single you can write logic for that. Check the snippet
var checkbox = $('.normal-text td > input[type=checkbox]');
var hidden = $('.normal-text td > input[type=hidden]');
if(checkbox.length>1){
//if you have multiple
checkbox.each(function(){
console.log($(this).is(':checked'));
});
}else {
//if you just have one
console.log(checkbox.val());
}
//similarly ...
hidden.each(function(){
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" width="650" border="0" cellspacing="5" cellpadding="0" class="normal-text">
<tr>
<td width="200" align="left" valign="top" class="singleCheckbox">
<input id="rptService_ctl01_rptSubService_ctl01_chkSubService" type="checkbox" name="rptService$ctl01$rptSubService$ctl01$chkSubService" checked="checked" />
<label for="rptService_ctl01_rptSubService_ctl01_chkSubService">Energyquote Customer Agreements</label>
</td>
<td width="20" align="left" valign="middle">
<input type="hidden" name="rptService$ctl01$rptSubService$ctl01$hdnServiceid" id="rptService_ctl01_rptSubService_ctl01_hdnServiceid" value="536" />
</td>
<td width="40" align="right" valign="middle">
<select name="rptService$ctl01$rptSubService$ctl01$ddlFrequency" id="rptService_ctl01_rptSubService_ctl01_ddlFrequency">
<option value="1">Daily</option>
<option value="2">Weekly</option>
<option value="3">Monthly</option>
<option value="4">Quarterly</option>
<option value="5">Half Yearly</option>
<option value="6">Yearly</option>
<option selected="selected" value="7">One Time</option>
</select>
</td>
<td width="40" align="right" valign="middle">
<input name="rptService$ctl01$rptSubService$ctl01$txtExpireDate" type="text" id="rptService_ctl01_rptSubService_ctl01_txtExpireDate" class="from" size="8" onKeyDown="preventBackspace();" />
</div>
</td>
<td width="150" align="right" valign="middle"></td>
</tr>undefined</table>