We Keep Coding

How to change the total from select option with jquery?

I have table with default amount and pre-number select option on top. When select a new price will change in each row's input. Here I want the new number from select calculate the total price into the next row automatically.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
var i_pay = $(this).closest('tr').find('#pay').text();
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('#pay').html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">900</p>
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
<td class="align-middle text-center">
<p id="pay">800</p>
</td>
</tr>
</table>
What I expect is when I select 5. The #1 row's total would be 5*900=4500 and the #2 would be 5*800=4000. Please find the fiddle here : https://jsfiddle.net/w56940ez/

First change $('.price').keyup(function(){}); to $('.price').change(function(){}); or you won't be able to change total value using arrows. If you don't want to use arrows you can keep keyup event.
To automatically change the value of the total column you just need to use trigger("change") on your ìnput elements.
If you want the base values to always be 800 and 900, you should use a data-attributes (data-first-value) which will keep this value and which will be used during the calculation.
Identifiers must be unique like #j08691 said. So you have basically two solutions:
use a pay class instead of a pay id. You juste need to replace id="pay" with class="pay" and #pay with .pay
use two identifiers. You need to add another data-attributes (data-id) and use it to get the input you want.
$('select.set_price').change(function() {
var pset = $(this).data('pset');
input_elements = $('td.' + pset).find('input.price');
input_elements.val($(this).val());
input_elements.trigger("change");
});
//calc
$('.price').change(function() {
/*
USING A CLASS FOR BOTH
var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('.pay').html(total);
*/
var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$("#"+$(this).attr("data-id")).html(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<tr>
<th class="align-middle text-center">#</th>
<th>
<select class="form-select set_price" data-pset="p_3hi">
<option value="" disabled selected>Order</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</th>
<th>total</th>
</tr>
<tr>
<td class="align-middle text-center">1</td>
<td class="w-10 p_3hi">
<input type="number" class="form-control price" name="price1" value="1" data-id="pay_1" />
</td>
<td class="align-middle text-center">
<p id="pay_1" data-first-val="900">900</p>
<!--<p class="pay" data-first-val="900">900</p>-->
</td>
</tr>
<tr>
<td class="align-middle text-center">2</td>
<td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" data-id="pay_2"/></td>
<td class="align-middle text-center">
<p id="pay_2" data-first-val="800">800</p>
<!--<p class="pay" data-first-val="800">800</p>-->
</td>
</tr>
</table>

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>

Multiple values from a dropdown issue

So far i have a dropdown which each has a corresponding number which works just fine. Each number also has a corresponding trait also which will be placed in the 4th column. So what i'm trying to ask is can the dropdown have two values attached to it (a number and a trait) or should I break it up into two parts (1: dropwdown displays a number & 2: number displays a trait)? and how to do that please and thanks you.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option value="1">0-4</option> //trait1
<option value="2">5-6</option> //trait2
<option value="3">7-9</option> //trait3
<option value="4">10-11</option> //trait4
<option value="5">12-14</option> //trait5
<option value="6">15-16</option> //trait6
<option value="7">17-18</option> //trait7
<option value="8">19-20</option> //trait8
<option value="9">21-22</option> //trait9
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>

You can bind additional values to your DOM elements using data attributes. Here is how you do that.
JS
$('#warmth').change(function () {
$('#warmthVal').val(this.value);
$('#warmthTrait').val($(this).data("trait"));
});
HTML
<table>
<tr>
<td><b>Factors</b></td>
<td><b>Sten Score</b></td>
<td><b>1-10</b></td>
<td><b>Personality Traits</b></td>
</tr>
<tr>
<td>Warmth (A)</td>
<td>
<select name="warmth" id="warmth">
<option value="">...</option>
<option data-trait="trait1" value="1">0-4</option> //trait1
<option data-trait="trait2" value="2">5-6</option> //trait2
<option data-trait="trait3" value="3">7-9</option> //trait3
<option data-trait="trait4" value="4">10-11</option> //trait4
<option data-trait="trait5" value="5">12-14</option> //trait5
...
</select>
</td>
<td>
<input type="text" id="warmthVal" name="sten" disabled size="1" />
</td>
<td>
<input type="text" id="warmthTrait" name="warmthTrait" disabled size="1" />
</td>
</tr>
</table>
Hope it helps.

Form validation if user leaves drop down populated with text

I have a page that I need to pop up an error message if the user leaves information in a box.
The user is selecting "Yes" from the Sale drop down and selecting a price (for example £10) from the New Product drop down. They are then changing the Sale drop down to "No" but leaving the price (£10) and this information is being submitted to the database.
How can I add code that warns the user that they have left the price (£10) when they have selected "No" in the Sale drop down?
<form name="test" onsubmit="return validateForm()" method="POST">
<table width="716">
<input name="CallType2" type="hidden" id="CallType2" value="Unfulfilled Sales"/></td>
</tr><tr>
<td style="text-align: left;">Mobile Number: </td>
<td colspan="2" style="text-align: left;"><input name="MobileNumber" type="text" id="MobileNumber" maxlength="11" /></td>
</tr>
<tr>
<td style="text-align: left;">Sale:</td>
<td colspan="2" style="text-align: left;"><select name="Sale" id="Sale" onchange="display(this,'Yes','No');" >
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select> </td>
</tr>
<tbody id="Yes" style="display: none;">
<tr>
<td class="title"><div align="left">New Product:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<select name="SaleProduct" id="SaleProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select> </label>
</div></td>
</tr>
<tr>
</p>
</div></td>
</tr>
<tbody id="No" style="display: none;">
<tr>
<td class="title"><div align="left">Non Sale Reason:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<span style="text-align: left;">
<select name="CancelReason" id="CancelReason">
<option value=""></option>
<option value="Account changes incomplete">Account changes incomplete</option>
<option value="Customer Credit Rating">Customer Credit Rating</option>
<option value="Handset Ineligible Damaged">Handset Ineligible Damaged</option>
<option value="Handset Ineligible (Matrix)">Handset Ineligible (Matrix)</option>
<option value="Migration not yet complete">Migration not yet complete</option>
<option value="No transaction number">No transaction number</option>
<option value="Insurance already on account">Insurance already on account</option>
</select>
</span></label>
</div></td>
</tr>
</tbody>
</tr>
</tr>
<br>
</tr>
</table>
<p>
<input type="hidden" name="MM_insert" value="test">
<p align="center">
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</fieldset>
</body>
https://jsfiddle.net/hpowe25j/
There is already a validateForm() running on submit to check that other boxes (that I have removed from this example) are not left blank
Thank you

I don't think warning a user at that point is the right thing to do. They don't want to sale, why they should be getting a warning about the price. I think you should just remove the value in your validateForm function if Sale=No.
if(document.getElementById("Sale").value == undefined || document.getElementById("Sale").value == 'No')
document.getElementById('SaleProduct').value = "";
Or, if you really want to warn the user, change your 'display' function triggered from the onchange event. add this to the code
if(document.getElementById("Sale").value == 'No' && document.getElementById('SaleProduct').value != '')
alert('You should remove the price!'); // or make some div visible that contains the error message
You can also do this on validateForm.

bringing the integer value from the database and add 1 to that value

hi frnds i am working with jsp and javascript. i had an input field name called as billno and the billno value is 1 and after clicking save it will save to database. my problem is after clicking save the billno should increase with +1 automatically and next time it should save with 2.whenever i opens the app it should show the next billno. so plz help me
<div class="reg-form">
<form method="post" name="sales" action="sales">
<table class="main">
<thead>
<tr>
<th>SALES
</th>
</tr>
</thead>
</table>
<table class="in-sec-small">
<tbody>
<tr>
<td class="label">
<label for="patient-type">PATIENT TYPE
</label>
</td>
<td>
<select id="patient_type" class="textfield-form-req-select" type="text" name="patient_type" required>
<option value="member">IP</option>
<option value="non-member">OP</option>
<option value="non-member">WIP</option>
</select>
</td>
<td class="label">
<label for="reg-type">REG TYPE
</label>
</td>
<td>
<select id="reg_type" class="textfield-form-req-select" type="text" name="reg_type" required>
<option value="member">Member</option>
<option value="non-member">Non Member</option>
</select>
</td>
<td class="label">
<label for="bill-no">BILL NO
</label>
</td>
<td>
<input id="bill_no" class="textfield-form-date-req" type="text" name="bill_no" required>
</td>

Include this in your javascript:
$(function() {
var t1=0;
$.ajax({type:'POST',url:'to_some_url.php'}).done(function(data){
t1=data;
t1=data+1;
$('#bill_no').val(t1);
});
});
Now to_some_url.php:
<?php
ini_set( "display_errors", 0);
gc_enable();
//Now Initialise yor db conncetion
$result_query=$mysqli->query("SELECT LAST(billno) FROM table_name");
$row=$result_query->fetch_array();
$biil_no=$row['billno'];
echo $bill_no;
?>
now you can modify your code according to your requirements