We Keep Coding

An invalid form control with name='AdjustmentBuyerPrice' is not focusable

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>

How to assign input value to checkbox value, then calculate checked total?

How to assign a <input type="text" value=""> to a <input type="checkbox" value="">, without hardcoding a numerical value to the checkbox? Then calculating the value total based on what is checked?
For example, I have a form that is asking for the name of an item and its cost. Then when I click submit it adds the data into a table. I want to be able to check the checkbox and have it call on the value from the cost I entered. Is it possible to do something like <input type="checkbox" value="cost"> rather than assigning <input type="checkbox" value="10">?
The form is purely for visualization only. My actual code can post data and is more detailed with modals and what not.
$(document).on("change", ".check", function() {
var checked = $('.check:checked'),
sum = checked.get().reduce(function(prev, item) {
return prev + parseFloat(item.getAttribute('value'));
}, 0);
$('.addTotal').text(sum.toFixed(2));
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td>$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>

You can do this using jQuery's .parent() method.
jQuery Documentation
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector. The .parent() method is similar to the .parents() method.
Running Code
var total = 0;
$(document).on("change", ".check", function() {
var cost = parseFloat($(this).parent().parent().find(".cost").text().replace("$", ""));
if ($(this).is(":checked")) {
total += cost;
} else {
total += -cost;
}
$(".addTotal").text(total);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<form action="">
<div class="form-group">
<label for="name">Item name: </label>
<input class="form-control" type="text" name="itemname" placeholder="Item Name" />
</div>
<div class="form-group">
<label for="name">Cost: </label>
<input class="form-control" name="cost" placeholder="Cost (insert number only)" />
</div>
<button type="submit">Submit</button>
<button type="submit">Edit</button>
</form>
<br>
<br>
<table class="table table-hover table-sm bookstable">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check" name="" value="cost" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="10"/></td> -->
<td>Item1</td>
<td class="cost">$10</td>
</tr>
<tr>
<td><input type="checkbox" class="check" name="" value="" /></td>
<!-- <td><input type="checkbox" class="check" name="" value="30"/></td> -->
<td>Item2</td>
<td class="cost">$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div>Total $: <span class="addTotal"></span></div>
</td>
</tr>
</tfoot>
</table>

Calculate load based on value return 0 or NaN

User will enter three values quantity, load, duration and then click on total button to show the multiplication in the watt hour textbox. But I always ended up getting a 0 or NaN.I tried with input type="number" but always getting the same result. Here is the code:
$(document).ready(function() {
var quantityval = parseInt($("#quantity").text(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").text(), 10);
$("#total").click(function() {
var totalval = (quantityval * wattsval) * duration;
$("#watt-hour").val(totalval);
console.log($("#watt_hour").val(totalval));
});
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>

Multiple issues here,
use val instead of text
directly take the value of select instead of its option
Put the fetch of values in the click event
use watt_hour instead of watt-hour while setting value.
Make it
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
Note
parseInt is fine, I am simply putting unary + for keeping it short.
Demo
$(document).ready(function() {
$("#total").click(function() {
var quantityval = +$("#quantity").val();
var wattsval = +$("#wattage").val();
var duration = +$("#duration_use").val();
console.log(quantityval, wattsval, duration);
var totalval = (quantityval * wattsval) * duration;
console.log(quantityval, wattsval, duration, totalval);
$("#watt_hour").val(totalval);
console.log($("#watt_hour").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>

Replace .text() with .val() and retrive all the values inside the click event handle
$(document).ready(function() {
$("#total").click(function() {
var quantityval = parseInt($("#quantity").val(), 10);
var wattsval = $("#wattage option:selected").val();
var duration = parseInt($("#duration_use").val(), 10);
var totalval = (quantityval * wattsval) * duration;
console.log(totalval)
$("#watt_hour").val(totalval);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-bordered table table-md text-center table-responsive table-lg" id="table">
<thead class="bg-primary">
<tr>
<th colspan="2">Load Type</th>
<th>Quantity</th>
<th>Wattage (W)</th>
<th>Duration Use</th>
<th>Watt Hour</th>
<th>Total</th>
</tr>
</thead>
<tbody class="bg-success">
<tr>
<td colspan="2">
<select class="form-control" id="type">
<option>Fan</option>
<option>Iron</option>
<option>Blub</option>
<option>Motor</option>
<option>AC</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="quantity" /></td>
<td>
<!-- <input type="text" name="wattage" id="wattage" placeholder="Enter Consumption in Watts" class="form-control"> -->
<select class="form-control" id="wattage">
<option>25</option>
<option>30</option>
<option>45</option>
<option>80</option>
<option>100</option>
<option>120</option>
<option>1000</option>
<option>1500</option>
<option>2000</option>
<option>2500</option>
</select>
</td>
<td><input type="text" size="10px" class="form-control" id="duration_use" /></td>
<td><textarea size="10px" class="form-control" id="watt_hour" style="height: 38px;overflow: hidden;resize: none;"></textarea></td>
<td><button id="total" class="btn-success btn" style="padding: 5px">Total</button></td>
</tr>
</tbody>
</table>

How to hide table elements using jquery and hide class of bootstrap

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!

How to get the data from text boxes of checked rows on Alert box in Jquery?

I want to view all the rows which are checked on m alert box whenever i press the button but i am doing something wrong here
Javascript for Adding rows
$("#add").click(function () {
$("#myTable").last().append("<tr><td width='5%'><input type='checkbox'>
</td><td><input type='text' id='1stid'>
</td><td><input type='text' id='2ndid'></td><td><input type='text'id='3rdid'></td></tr>");
});
I also did this but now the alert box is empty
$("#view").click(function () {
$('input[type="checkbox"]:checked');
var n=$(this).closest('tr').text();
alert(n);
});
My HTML
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="stylesheet" href="Project.css">
</head>
<body>
<div class="container">
<button id="add">Add</button> <button id="deleteLast">Remove </button> <button id="delete"> Remove All</button> <button id="view">View</button>
<table class="table table-bordered" id="myTable">
<tr>
<th width="5%"></th>
<th>First name</th>
<th>Last name</th>
<th>Profession</th>
</tr>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="Project.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Since the $("input[type='checkbox']:checked") will return an array/list of elements, use jQuery's each method, $("input[type='checkbox']:checked").each(...) to iterate through the result
$("#view").click(function() {
$("input[type='checkbox']:checked").each(function(index) {
$('td input[type=text]', $(this).closest('tr')).each(function(index2) {
alert( $(this).val() );
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="test">
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='11stid' value="1 first">
</td>
<td>
<input type='text' id='12ndid' value="1 second">
</td>
<td>
<input type='text' id='13rdid' value="1 third">
</td>
</tr>
<tr>
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='21stid' value="2 first">
</td>
<td>
<input type='text' id='22ndid' value="2 second">
</td>
<td>
<input type='text' id='23rdid' value="2 third">
</td>
</tr>
<tr>
<td width='5%'>
<input type='checkbox'>
</td>
<td>
<input type='text' id='31stid' value="3 first">
</td>
<td>
<input type='text' id='32ndid' value="3 second">
</td>
<td>
<input type='text' id='33rdid' value="3 third">
</td>
</tr>
</table>
<button id="view">Checked</button>