I want to make the disappear when Other Countries is selected.
This is my HTML
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
And this is my script (which I found here on stackoverflow)
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "inline");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
And I don't know why but it isn't working, it just stays there.
try
your html is invalid, wrap the tr inside table
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
Working demo
JS
$("select").on('change', function () {
if (this.value == 'Portugal') {
$("#this").show();
} else {
$("#this").hide();
}
});
$("select").on('change', function () {
$("#this").toggle(this.value != "OtherCountries");
});
DEMO
Use this code
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$(".country").change(function() {
var sel = $(this).val();
if (sel=='Portugal') {
$("#this").show();
}
if (sel=='OtherCountries') {
$("#this").hide();
}
});
</script>
You can use show/hide instead of using css() method.
Try this:
$(".country").on('change', function() {
if($(this).val()=="OtherCountries"){
$("#this").hide();
}else{
$("#this").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table id="this">
<tr>
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
First change the ID to another one more explicit like "vat" or something, and try this:
$('.country').change(function(){
if($(this).val() == "OtherCountries"){
$("#vat").hide();
}else{
$("#vat").show();
}
});
Table tag was missing in your HTML due to which it was not identifying table row with ID. I have corrected the code. Please take a look at the code given below.
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "block");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
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 a simple form in HTML. There are 3 sections (Section A, B and C). As the user fills out the form each section is calculated by displaying total points and percentage. I would like to rank the scores and display it in the ranking column but cannot seem to figure how to do it. For example if Section A has 4 points and Section B has 3 points and Section C has 0 points then section A would have the rank of 1, section B would have the rank of 2 and section C would have the rank of 3. Also having the ranking change as the form is being filled out would be ideal.
I am new to JavaScript and am having trouble on how to logically implement this. This is just a sample of my form. I really have a much larger form with more sections and questions. Please run my code so you can see a better visual. Any code snippets and advice that would help me will be appreciated. Also if you can keep my code as it is because I have alot more code depending on how my code is structured. I understand my code is not the best.
I've tried using if statements in JavaScript but like I said I can't wrap my mind around how to logically do it.
function calcA1R() {
var Aa1 = document.getElementById('Aa1');
var Ab1 = document.getElementById('Ab1');
var Ac1 = document.getElementById('Ac1');
var Aa1Val = Aa1.options[Aa1.selectedIndex].value;
var Ab1Val = Ab1.options[Ab1.selectedIndex].value;
var Ac1Val = Ac1.options[Ac1.selectedIndex].value;
// returning the sum of the values
return [parseInt(Aa1Val), parseInt(Ab1Val), parseInt(Ac1Val)].reduce((a, c) => a + c, 0)
}
function calcA1() {
displaySumA()
}
function displaySumA() {
document.getElementById('totalA').textContent = calcSumA()
document.getElementById('TotalASummary').textContent = calcSumA()
document.getElementById('TotalAPercent').textContent = Math.ceil(calcSumA() / 4 * 100) + '%'
}
function calcSumA() {
return calcA1R()
}
function calcB1R() {
var Ba1 = document.getElementById('Ba1');
var Bb1 = document.getElementById('Bb1');
var Bc1 = document.getElementById('Bc1');
var Ba1Val = Ba1.options[Ba1.selectedIndex].value;
var Bb1Val = Bb1.options[Bb1.selectedIndex].value;
var Bc1Val = Bc1.options[Bc1.selectedIndex].value;
// returning the sum of the values
return [parseInt(Ba1Val), parseInt(Bb1Val), parseInt(Bc1Val)].reduce((a, c) => a + c, 0)
}
function calcB1() {
displaySumB()
}
function displaySumB() {
document.getElementById('totalB').textContent = calcSumB()
document.getElementById('TotalBSummary').textContent = calcSumB()
document.getElementById('TotalBPercent').textContent = Math.ceil(calcSumB() / 4 * 100) + '%'
}
function calcSumB() {
return calcB1R()
}
function calcC1R() {
var Ba1 = document.getElementById('Ca1');
var Bb1 = document.getElementById('Cb1');
var Bc1 = document.getElementById('Cc1');
var Ca1Val = Ca1.options[Ca1.selectedIndex].value;
var Cb1Val = Cb1.options[Cb1.selectedIndex].value;
var Cc1Val = Cc1.options[Cc1.selectedIndex].value;
// returning the sum of the values
return [parseInt(Ca1Val), parseInt(Cb1Val), parseInt(Cc1Val)].reduce((a, c) => a + c, 0)
}
function calcC1() {
displaySumC()
}
function displaySumC() {
document.getElementById('totalC').textContent = calcSumC()
document.getElementById('TotalCSummary').textContent = calcSumC()
document.getElementById('TotalCPercent').textContent = Math.ceil(calcSumC() / 4 * 100) + '%'
}
function calcSumC() {
return calcC1R()
}
<table>
<tr>
<th>Category |</th>
<th>Points Possible |</th>
<th>Points Awarded |</th>
<th>Percent Achieved |</th>
<th>Ranking</th>
</tr>
<tr>
<td align="center">A</td>
<td align="center">4</td>
<td align="center"><b><div><span id="TotalASummary"></span></div></b></td>
<td align="center"><b><div><span id="TotalAPercent"></span></div></b></td>
<td bgcolor="#92d050" align="center"></td>
</tr>
<tr>
<td align="center">B</td>
<td align="center">4</td>
<td align="center"><b><div><span id="TotalBSummary"></span></div></td>
<td align="center"><b><div><span id="TotalBPercent"></span></div></td>
<td bgcolor="#92d050" align="center"></td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">4</td>
<td align="center"><b><div><span id="TotalCSummary"></span></div></td>
<td align="center"><b><div><span id="TotalCPercent"></span></div></td>
<td bgcolor="#92d050" align="center"></td>
</tr>
</table>
<table>
<tr>
<th>Section A.</th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><b>A.1</b></td>
<td><b>Value</b></td>
<td><b>Awarded</b></td>
</tr>
<tr>
<td>a)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcA1();" id="Aa1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>b)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcA1();" id="Ab1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>c)</td>
<td align="center">2</td>
<td align="center">
<select class="select" onChange="calcA1();" id="Ac1">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td class="subtotal">Section A. Total</td>
<td align="center"><b>4</b></td>
<td align="center"><b><div><span id="totalA"></span></div></b></td>
</tr>
<tr>
<th>Section B.</th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><b>B.1</b></td>
<td><b>Value</b></td>
<td><b>Awarded</b></td>
</tr>
<tr>
<td>a)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcB1();" id="Ba1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>b)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcB1();" id="Bb1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>c)</td>
<td align="center">2</td>
<td align="center">
<select class="select" onChange="calcB1();" id="Bc1">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td class="subtotal">Section B. Total</td>
<td align="center"><b>4</b></td>
<td align="center"><b><div><span id="totalB"></span></div></b></td>
</tr>
<tr>
<th>Section C.</th>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><b>C.1</b></td>
<td><b>Value</b></td>
<td><b>Awarded</b></td>
</tr>
<tr>
<td>a)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcC1();" id="Ca1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>b)</td>
<td align="center">1</td>
<td align="center">
<select class="select" onChange="calcC1();" id="Cb1">
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>c)</td>
<td align="center">2</td>
<td align="center">
<select class="select" onChange="calcC1();" id="Cc1">
<option value="0">0</option>
<option value="2">2</option>
</select>
</td>
</tr>
<tr>
<td class="subtotal">Section C. Total</td>
<td align="center"><b>4</b></td>
<td align="center"><b><div><span id="totalC"></span></div></b></td>
</tr>
</table>
If I'm understanding your question correctly, you just want to place a number in these three sections' "Rank" column based on how well the user performed in each?
You should be able to just compare the text content of the "Percent Achieved" columns (I assume that's what you want to compare).
Here's what I would do (after giving the top table an ID of 'results'):
function calculateRankings() {
// grab all the spans that hold the percentages
const spans = document.querySelectorAll('#results td:nth-child(4) span');
// make a list of objects, making up a percentage and its corresponding rank column
const percentages = [];
for (const span of spans) {
percentages.push({
//some way to select the neighboring rankings column:
e: span.parentElement.nextSibling, // <<---- YOU'LL HAVE TO CHANGE THIS!!
p: Number(span.innerText.replace('%', ''))
});
}
// sort based on the percentage field of each object
percentages.sort((a, b) => a.p - b.p);
// place an index based on the order of the list
for (let i = 0; i < percentages.length; i++) {
percentages[i].e.innerText = i + 1;
}
}
I didn't test this but it should be a good place to start.
I'm trying to select multiple options on the select box by clicking on different divs or table row.
I have a multiple select named #events.
I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.
$("td.eventID").on("click", function(e) {
var $select = $("select#events");
$select.val($(this).data("value"));
// simulate click:
$select.find(":selected").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.
NOTE: To update the view after selecting the options programmatically you could use .change()
$(".eventID").on("click", function(e) {
$("#events").val($(this).data("value").split(',')).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="events" multiple>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<button class="eventID" data-value="css">css</button>
<button class="eventID" data-value="php">php</button>
<button class="eventID" data-value="books,html">Books + html</button>
I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.
I added a hidden input which will recieve all values I want to select.
After that I changed a little bit the JS code and add a new one.
// This code add values to the hidden input with "," and then, selecting every value on multiple select
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
// This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="groupingEvents" value="">
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
I have this working code which updates attributes based on the selection from a drop down box. I have it so the input fields and drop down save but currently the attributes do not. So when I refresh the page all of the data is still their but the input fields are no longer set to disabled. What would be the best way to go about that?
$(document).ready(function() {
$('.my_option').on('change', change_attribute);
});
function change_attribute() {
var version_val = $(this).val();
var parent_row = $(this).closest('tr');
if (version_val == 10) {
parent_row.find('.1').find('input').attr("disabled", "disabled");
parent_row.find('.2').find('input').removeAttr("disabled");
} else if (version_val == 20) {
parent_row.find('.2').find('input').attr("disabled", "disabled");
parent_row.find('.1').find('input').removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
</tbody>
</table>
I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.
jsp code:
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<%while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}%>
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>
JQuery Javascript:
$(document).ready(function(){
$("#btn_AddTruck").click(function(){
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
});
The expected output i would like is for the duplicated table row
where id in id1 is the orignal tables td id and 1 is appended to it.
and that if i was to add another row to the table
where id in id2 is the orignal tables td id and 2 is appended to it.
Try next one:
$(document).ready(function () {
$("#btn_AddTruck").click(function () {
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
// Find by attribute 'id'
$trNew.find('[id]').each(function () {
var num = this.id.replace(/\D/g, '');
if (!num) {
num = 0;
}
// Remove numbers by first regexp
this.id = this.id.replace(/\d/g, '')
// increment number
+ (1 + parseInt(num, 10));
});
$trLast.after($trNew);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<!-- %while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}% -->
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>