We Keep Coding

How to auto change one input field value by changing another field value using JS

There are two input fields total_amount & delivery_charge.
total_amount field already have a value, now I want that when I input some value into delivery_charge field that will change the total_amount field's value.
Suppose total_amount field's value is 200.
Now I input 20 into delivery_charge field and that will effect the total_amount field and the value will be 220.
For any type of changes of delivery_charge field it will change the value of total_amount field.
But for myself it will not change perfectly.
Suppose total_amount is 200
when input delivery_charge = 2
total_amount = 202
when input delivery_charge = 20
total_amount = 2020
Here is my code detail
html
<h4>Grand Total : <input type="number" id="total_amount" readonly class="form-control total_amount" value="0.00"></h4>
<input type="text" name="delivery_charge" id="delivery_charge" class="form-control">
js
$('#delivery_charge').keyup(function(event) {
var total_amount = $('.total_amount').val();
var delivery_charge = $(this).val();
var grand_total_amount = total_amount + delivery_charge;
$('.total_amount').val(grand_total_amount);
});
Anybody help please? Thanks in advance.

You could try this solution.
Store the total_amount so that you could have the original value when we update it on delivery changes.
Use parseInt() to make sure the value you got is not a string.
const total_amount = parseInt($('.total_amount').val());
$('#delivery_charge').keyup(function() {
$('.total_amount').val(total_amount + parseInt($(this).val() || 0));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Grand Total :
<input type="number" id="total_amount" readonly class="form-control total_amount" value="200"></h4>
<input type="number" name="delivery_charge" id="delivery_charge" class="form-control">

To make sure you are dealing with numbers, use parseInt() (or parseLong() if you are dealing with huge numbers) as following
$('#delivery_charge').keyup(function(event) {
var total_amount = parseInt($('.total_amount').val());
var delivery_charge = parseInt($(this).val());
var grand_total_amount = total_amount + delivery_charge;
$('.total_amount').val(grand_total_amount);
});

textbox input value not changing [duplicate]

This question already has answers here:
Enter data into a custom-handled input field
(2 answers)
Closed 2 years ago.
The following code changes the 'text' of the field but it is not picked up by the website. When you submit the form, it says the field is still empty and to enter a valid number.
var number = 123;
var field = document.getElementById('textfield');
field.value = number;
The code above only visually changes the textbox's input. Is there a way to imitate a physical field entry (to have it picked up by the form)?
The type changes from text when its not selected to number when selected.

Edit: I still haven't seen your submit function so I included one as an example below.
Is this what you are expecting?
var number = 123;
var field = document.getElementById('td-wb-order-price-amount-limit-price');
var example = document.getElementById('example');
function clickMe() {
field.value = number.toString();;
example.innerHTML = "Your input value is " + number;
}
<input _ngcontent-axt-c487="" name="limitPrice" type="text" tdwbinput="" tdwbnumberinput="n4-2"
required="" nonzero="" min="0" maxlength="7" tdwbnumberinputgroupseparator="true"
class="td-wb-order-price-amount__input-limit-price td-wb-input ng-untouched ng-pristine ng-invalid"
id="td-wb-order-price-amount-limit-price" autocomplete="off" aria-invalid="false">
<button onclick="clickMe();">Click </button>
<p id="example"></p>

You will need onchange attribute to detect the change in the input field.
const handleChange = () => {
const inputValue = document.getElementById('input').value;
console.log(inputValue)
}
<input type="text" id="input" onchange="handleChange()" />

inserting random number into hidden field on submit

Trying to insert a random number into a hidden field in a form using javascript. Not passing any value since SQL error of - doesn't have a default value
var randomNum = '';
randomNum += Math.round(Math.random()*5);
var elem = document.getElementById("randSS").value = randomNum;
<input name="randSS" type="text" id="randSS"/>

Didn't have protected fillable added!

how to display data from DB on the .append input field

i have a button that creates a new input field and a default field
<div class="container1">
<button class="add_form_field">Add Title</button>
<div class="form-group label-floating">
<input type="text" id="title_name">
</div>
</div>
and this is the jquery that creates a new input field.
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapper).append('<div><input type="text" id="title_name"/>Delete</div>'); //add input box
}
else
{
alert('You Reached the limits')
}
});
$(wrapper).on("click",".delete", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
});
and i have ajax call to get the title name from my database based on the user logged in.
$.ajax({
url:'../ajax/getprofile.php',
type:'POST',
data:{userid:user},
dataType:'JSON',
success: function(result){
$('#title_name').val(result.title_name);
}
});
when i use console.log(result) to see what the data is being returned what happen is that only one data is being returned from my ajax request..
i just didn't include the other data on my question earlier cuz those data only return one data.. i only have problem with the title_name
this code works fine for only the default input field.. like the data from my database only shows up on the default input field not on the appended input field..
saying i have a user id of 10001 and my db is look like this
tbl_title
id | name
10001 | sample
10001 | test
what i want to achieve is that when i make a request from ajax and returned the requested value it will display on my input field.and since my id is similar to the tbl_title (id) it should display the two data on the input field. but unfortunately only the 1st data is being displayed only on the default input field what i wanted to make is that if the data is more than 1 it will also display on the appended input field.. but i dont have any idea how this works..
b4 i only got one data that is being returned so i updated my mysql to return all the data that have similar id so now i got array1 and array2 array1 is on the picture and the array2 is similar to the picture but the only difference is their title_name.. so what should i do to display my the two title_name on the array on my input field

The id is the same for each input. So jQuery takes the first catch in this line:
$('#title_name').val(result.title_name);
Thats why only the first input works ...
Try to change it something like this:
$(wrapper).append('<div><input type="text" id="input_' + x + '"/> ...
and:
$('#input' + x ).val(result.title_name);
Probably not exactly right but a push in the right direction ;) The id is the problem.

find the value of the div then PLUS that numeric value to another div

I have 2 div's.
One is SHIPPING and another is TOTAL PRICE.
<div id="tt_shipping_rate_basket">$0.00</div> = SHIPPING
<div class="op_col5_3" align="right" id="tt_total_basket">$897.00</div> = TOTAL PRICE
Also there are 4 inputs for SHIPPING, each adds it's own price in the shipping div..
for example:
input 1 = 10$
input 2 = 20$
so when choosing an input the value in the #tt_shipping_rate_basket is changing ajax to the value of the input... this works great...
The problem is, I do not want 2 divs (one for shipping and one for total price)...
I just want ONE div, called Total Price, and when I choose an input, the value should ADD&CHANGE to the #tt_total_basket instead of tt_shipping_rate_basket...
What I'm trying to do is, GET the value of SHIPPING field (which is ajax populated), GET the value of TOTAL PRICE field, then just ADD shipping to Total Price...
here is what I tried to write but it doesn't seem to work, sorry I'm not to good at programming..
function plus() {
var spTotal = document.getElementById("tt_total_basket");
var spShip = document.getElementById("tt_shipping_rate_basket");
spTotal = spTotal.innerHTML = +spShip;
}
spTotal is the TOTAL PRICE
spShip is the Shipping Price
The result should be (spTotal = spTotal.value + spShip.value)..
Can somebody please help?

Untested, but you get the idea:
var spTotal = document.getElementById("tt_total_basket").innerHTML.replace('$', '');
var spShip = document.getElementById("tt_shipping_rate_basket").innerHTML.replace('$', '');
spTotal = parseFloat(spTotal) + parseFloat(spShip);