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 get value of input from next()

I need to retrieve data from an input but the id is dynamic. I only know the previous name of the field, in my snippet is Login and Password.
Here is what I tried :
console.log($( "td:contains('Login')").next('input').val());
console.log($( "td:contains('Login')").next('td > input').val());
console.log($( "td:contains('Login')").next('tr > td > input').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control">
</td>
</tr>
How can I get the values of the both input ?
EDIT
I have a new question related to this topic.
I now have a second input field (Password and Login). How can I get the second input value. In my situation it's the first input I get.
var password_user = $( "tr:nth-child(2) > td:contains('Password')").next('td').find('input').val();
console.log(password_user);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="form" width="100%" border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td class="fieldlabel" width="20%">Order #</td>
<td class="fieldarea" width="30%">1 - View Order</td>
<td class="fieldlabel" width="20%">Registration Date</td>
<td class="fieldarea" width="30%"><input type="text" name="regdate" value="22/01/2011" size="12" class="form-control date-picker hasDatepicker" id="dp1540302344931"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Product/Service</td>
<td class="fieldarea" width="30%">
<input type="hidden" name="oldpackageid" value="70">
<select name="packageid" class="form-control select-inline-long">
<optgroup label="lbl">
<option value="86">TEST1</option>
<option value="87">TEST2</option>
</optgroup>
</select>
</td>
<td class="fieldlabel" width="20%">First Payment Amount</td>
<td class="fieldarea" width="30%"><input type="text" name="firstpaymentamount" value="10" size="10" class="form-control input-100"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Server</td>
<td class="fieldarea" width="30%">
<select name="server" class="form-control select-inline">
<option value="232">TEST2</option>
<option value="234">TEST1</option>
</select>
</td>
<td class="fieldlabel" width="20%">Recurring Amount</td>
<td class="fieldarea" width="30%"><input type="text" name="amount" value="10" size="10" class="form-control input-100 input-inline"> <label class="checkbox-inline"><input type="checkbox" name="autorecalcrecurringprice" value="1"> Auto Recalculate on Save</label></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Domain</td>
<td class="fieldarea" width="30%">
<div class="input-group input-300">
<input type="text" name="domain" value="test" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left:-3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>www</li>
<li>whois</li>
<li>intoDNS</li>
</ul>
</div>
</div>
</td>
<td class="fieldlabel" width="20%">Next Due Date</td>
<td class="fieldarea" width="30%"><input type="hidden" name="oldnextduedate" value="22/07/2019"><input type="text" name="nextduedate" value="22/07/2019" size="12" class="form-control date-picker hasDatepicker" id="17852"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Dedicated IP</td>
<td class="fieldarea" width="30%"><input type="text" name="dedicatedip" value="789456" size="25" class="form-control input-200"></td>
<td class="fieldlabel" width="20%">Termination Date</td>
<td class="fieldarea" width="30%"><input type="text" name="termination_date" value="" size="12" class="form-control date-picker hasDatepicker" id="12545412"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Username</td>
<td class="fieldarea" width="30%"><input type="text" name="username" value="testUser" size="20" class="form-control input-200 input-inline"> </td>
<td class="fieldlabel" width="20%">Billing Cycle</td>
<td class="fieldarea" width="30%">
<select name="billingcycle" class="form-control select-inline">
<option value="Free Account">Free</option>
<option value="One Time">One Time</option>
<option value="Monthly">Monthly</option>
<option value="Quarterly" selected="">Quarterly</option>
<option value="Semi-Annually">Semi-Annually</option>
<option value="Annually">Annually</option>
<option value="Biennially">Biennially</option>
<option value="Triennially">Triennially</option>
</select>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" width="30%"><input type="text" name="password" value="Pass" size="20" class="form-control input-200"></td>
<td class="fieldlabel" width="20%">Payment Method</td>
<td class="fieldarea" width="30%">
<select name="paymentmethod" class="form-control select-inline">
<option value="paypal" selected="">PayPal</option>
</select>
View Invoices
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Status</td>
<td class="fieldarea" width="30%">
<select name="domainstatus" class="form-control select-inline" id="prodstatus">
<option value="Pending">Pending</option>
<option value="Active" selected="">Active</option>
<option value="Completed">Completed</option>
<option value="Suspended">Suspended</option>
<option value="Terminated">Terminated</option>
<option value="Cancelled">Cancelled</option>
<option value="Fraud">Fraud</option>
</select>
</td>
<td class="fieldlabel" width="20%">Promotion Code</td>
<td class="fieldarea" width="30%">
<select name="promoid" class="form-control select-inline">
<option value="0">None</option>
<option value="463">CODETEST - 40.00% One Time</option>
</select>
<br>(Change will not affect price)
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Module Commands</td>
<td class="fieldarea" colspan="3">
<div id="modcmdbtns">
<button style="margin-left:4px;" id="diagnostic_btn_Custom" class="btn btn-default" data-toggle="modal" data-target="#diagnosticModal">Diagnostic</button>
<div class="modal fade" id="diagnosticModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Diagnostic</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div style="margin-left:5px;" class="row">Transmission: <span style="display: none;" id="loader_transmission"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="transmission_res" style="color: rgb(46, 204, 64);">✔</span></div>
<div style="margin-left:5px;" class="row">FTP: <span style="display: none;" id="loader_ftp"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="ftp_res" style="color: rgb(255, 65, 54);"></span></div>
<div style="margin-left:5px;" class="row">Nextcloud: <span style="display: none;" id="nextcloud_loader"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="nextcloud_res" style="color: rgb(255, 65, 54);"></span></div>
<div style="margin-left:5px;" class="row">Coffre-fort: <span style="display: none;" id="loader_coffre"><img style="height:5px; width:auto" src="images/loader.gif"></span><span id="coffre_res" style="color: rgb(255, 65, 54);"></span></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button></div>
</div>
</div>
</div>
</div>
<div id="modcmdworking" style="display:none;text-align:center;"><img src="images/loader.gif"> Working...</div>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Addons</td>
<td class="fieldarea" colspan="3">
<div class="tablebg">
<table id="sortabletbl1" class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>Reg Date</th>
<th>Name</th>
<th>Pricing</th>
<th>Status</th>
<th>Next Due Date</th>
<th width="20"></th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Login</td>
<td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3"><input type="text" value="GETTHISVALUE" size="30" class="form-control"></td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Subscription ID</td>
<td class="fieldarea" colspan="3">
<div class="input-group input-500" id="subscription">
<input type="text" name="subscriptionid" value="I-123" size="25" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="btnCancel_Subscription" style="margin-left:-3px;">
Cancel Subscription
</button>
</span>
</div>
<div id="subscriptionworking" style="display:none;text-align:center;"><img src="images/loader.gif"> Working...</div>
</td>
</tr>
<tr></tr>
</tbody>
</table>

Your code has two problem.
1- <tr> should wrapped into <table> to be valid html.
2- The input isn't next element after td. You should get next td first and then select input in it.
console.log($("td:contains('Login')").next('td').find('input').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control">
</td>
</tr>
</table>

First don't use the text as discriminator. Set an ID instead on the Element, it is much more effective. If you can then just set classes to both inputs and select them by class. Also much cleaner and more effective.
If you are screen scraping and can't change the html code then I would suggest Selecting all the relevant ````` and looping over them in code. There you have much better tools to your disposal. eg.
$("tr")
.toArray()
.filter((el) => /Login|Password/.exec($(el).text()) !== null)
.map((el) => el.querySelector("input"));
Good luck!

You can assign common class name to all that input element for which you want to get the value.
Check below code.
$(".data").each(function(k,v){console.log($(v).val())})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="fieldlabel" width="20%" style="color: rgb(255, 0, 0);">Login</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[52]" id="customfield52" value="Somelogin" size="30" class="form-control data">
</td>
</tr>
<tr>
<td class="fieldlabel" width="20%">Password</td>
<td class="fieldarea" colspan="3">
<input type="text" name="customfield[53]" id="customfield53" value="Somepass" size="30" class="form-control data">
</td>
</tr>
</table>

Onclick is not calling javascript function

I have some JavaScript code in an HTML page with a button. I have two functions called 'total()' and 'con()' that handles the onClick event of the 2 buttons. i have tried putting the script tag on top of the form, buttons and i also tried putting it in the head tag. The code for the button is as follows
The problem is that when the button is clicked, the function is not called. What am I doing wrong here?
thanks for not criticizing me, i'm just a begginer.
function con() {
var conf = confirm('Are you finished?');
if (conf) {
return true
} else {
return false
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
</div>

The code is working for me. Whatever you are using, perhaps it doesn't support confirm(). Try if this works:
function con() {
var sentence = document.getElementById("sentence");
sentence.innerHTML = "Are you finished?";
document.getElementById("conf1").style.visibility = "visible";
document.getElementById("conf2").style.visibility = "visible";
}
function isDone(bool) {
if (bool) {
// do something
} else {
// do something
}
}
function total() {
// Some Code here
}
<form action="reserve.php" method="POST">
<div class="tick"><img class="ticket" src='assets/img/<?php
echo($row["Photo"]);?>' style='margin-top:10px;'>
<h4>
<?php echo($row["Event_Name"]); ?>
</h4>
<div class="table-responsive1">
<table class="table">
<tr>
<th>No. Of Persons</th>
<th>
<select class="form-control select2" name="Ticks" id="p" required="">
<option selected="">Select # of Persons</option>
<option value="1">Admit One</option>
<option value="2">Admit Two</option>
<option value="3">Admit Three</option>
<option value="4">Admit Four</option>
<option value="5">Admit Five</option>
</select>
</th>
</tr>
<tr>
<th>Zone</th>
<th>
<select class="form-control select1" name="TickType" id="z" required="">
<option value="" selected="">Select a zone</option>
<option value="ga" id="ga" name="TickType">General Admission</option>
<option value="b" id="b">Bronze</option>
<option value="s" id="s">Silver</option>
<option value="g" id="g">Gold</option>
<option value="p" id="p">Platinum</option>
<option value="v" id="v">Vip</option>
</select>
</th>
</tr>
<div class="table-responsive">
<table class="table">
<thead>
<h3>Prices</h3>
<tr>
<th>Gen. Admission</th>
<th>Bronze</th>
<th>Silver</th>
<th>Gold</th>
<th>Platinum</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<td id="ge">
<?php echo($row["GenAd_Price"]);?>~Php</td>
<td id="br">
<?php echo($row["Bronze_Price"]);?>~Php</td>
<td id="si">
<?php echo($row["Silver_Price"]);?>~Php</td>
<td id="go">
<?php echo($row["Gold_Price"]);?>~Php</td>
<td id="pl">
<?php echo($row["Platinum_Price"]);?>~Php</td>
<td id="vi">
<?php echo($row["Vip_Price"]);?>~Php</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name='id'>
<button class="but" type="submit" onclick="return con()">Done</button>
</form>
<h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
<button type="button" class="but" id="btn" onClick="total()">Compute</button>
<p id="sentence"></p>
<button id="conf1" style="visibility: hidden" onclick="isDone(true)">Yes</button>
<button id="conf2" style="visibility: hidden" onclick="isDone(false)">No</button>
</div>
Note: This is just an example. You don't have to use this.

How to make the select dropdown be responsive to the input box

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>

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!