Develop Reference

How to pass individual info to specific input field from select option list view using jquery

firebase.auth().onAuthStateChanged(function(user) {
console.log(user);
if (user) {
var user_id = user.uid;
firebase.database().ref('Clients/'+user_id)
.once('value').then(function(snapshot){
snapshot.forEach(function(childSnapshot) {
var client_name = childSnapshot.child("client_name").val();
var client_phone = childSnapshot.child("client_phone").val();
var client_address = childSnapshot.child("client_address").val();
var total = client_name + "<br>" + client_phone + "<br>" + client_address;
console.log(total);
$('.client_option').append('<option>' + total +'</option');
});
})
}
else{
window.location.href="{% url 'login' %}";
}
});
In this code, I already got individual client information. I have 3 input fields. As these values are displayed as options, I want that, when the user selects a set of options(client_name, phone, address), the individual info passes to specific fields. Here are my input fields.
<input type="text" class="form-control" id="clientName" list="client"
autocomplete="off">
<datalist class="form-control client_option" id="client" hidden>
</datalist>
<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone"
class="form-control" autocomplete="off">
<input type="text" class="form-control" id="address" autocomplete="off">
Thanks in advance.

function disp(){
var client_name = $('#client_name').val();
var client_phone = $('#client_phone').val();
var client_address = $('#client_address').val();
var total = client_name + "-" + client_phone + "-" + client_address;
$('.client_option').append('<option>' + total +'</option');
}
$(document).on("change", ".client_option", function(){
var valArr = $(".client_option option:selected").text().split("-");
$("#clientName").val(valArr[0]);
$("#phone").val(valArr[1]);
$("#address").val(valArr[2]);
$("#client").append("<option>" + $(".client_option option:selected").text() + "</option>");
});
<input id="client_name"> </input>
<input id="client_phone"> </input>
<input id="client_address"> </input>
<button type="submit" onclick="disp()">Submit</button>
<select class="client_option"><option>Please Select</option></select>
<input type="text" class="form-control" id="clientName" list="client"
autocomplete="off">
<datalist class="form-control client_option" id="client" hidden>
</datalist>
<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone"
class="form-control" autocomplete="off">
<input type="text" class="form-control" id="address" autocomplete="off">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Try this out to make this example I have replaced the childSnapshopt.child but it should work as same.
The big point is you can use text() to insert the text into an element.
I also suggest that you use template strings to build your string. Then there is no need of the string concat.
function disp(){
var client_name = $('#client_name').val();
var client_phone = $('#client_phone').val();
var client_address = $('#client_address').val();
var total = `${client_name} \n${client_phone} \n${client_address}`
console.log(total);
$('.client_option').text('<option>' + total +'</option');
}
<input id="client_name"> </input>
<input id="client_phone"> </input>
<input id="client_address"> </input>
<button type="submit" onclick="disp()"></button>
<div class=".client_option"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

i want to show the money that customer must pay and my inputs are like this :
<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">
when the input text is changing i want to show the total cost (quantity*cost) in a <p> tag Dynamicly how can it be with javascript?

You can try this:
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>
And javascript part:
function calculate() {
var cost = Number(document.getElementById("credit"));
var limit = Number(document.getElementById("limit"));
document.getElementById("result").innerHTML= cost*limit;
}
You must ensure you entered numbers in inputs.

All of the above will generate errors if both the boxes are blank . Try this code , its tested and running .
<script>
function calc()
{
var credit = document.getElementById("credit").value;
var limit = document.getElementById("limit").value;
if(credit == '' && limit != '')
{
document.getElementById("cost").innerHTML = parseInt(limit);
}
else if(limit == '' && credit != '')
{
document.getElementById("cost").innerHTML = parseInt(credit);
}
else if(limit!= '' && credit!= '')
{
document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
}
else
{
document.getElementById("cost").innerHTML = '';
}
}
</script>
</head>
<input type="number" value="0" min="0" class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">
<input type="number" value="0" min="0" class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">
<p id="cost"></p>

Hope this will be useful
// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})
// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})
function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}
jsfiddle

In case you consider using JQuery I've made this fiddle.
See if it works for you.
https://fiddle.jshell.net/9cpbdegt/
$(document).ready(function() {
$('#credit').keyup(function() {
recalc();
});
$('#limit').keyup(function() {
recalc();
});
function recalc() {
var credit = $("#credit").val();
var limit = $("#limit").val();
var result = credit * limit;
$("#result").text(result);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">
<p id="result">0</p>

Try this:
<script >
function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>
Also, change your HTML to this:
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">
Enter cost and quantity.
Note the change with the second input: id='txt' was changed to id='txt2'. This is because no 2 elements can have the same id.
Note: Untested.

Display the formula value of 2 textboxes in 3rd - Javascript

This the formula [(min*30)+sec]/500
Where min is textbox value 1 and sec is textbox value 2
Minutes<input type="text" value="" name="min">
Seconds<input type="text" value="" name="sec"><br>
Output<input type="text" value="" name="output"><br>
<input type="Button" value="Calculate" name="Calculate"><br>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="Javascript">
$(function(){
$(".calculate").on("click", function(){
var min = $(".min").val();
var sec= $(".sec").val();
var output =parseInt(parseInt(min)*parseInt(sec) / 500);
});
});
</script>

Have you tried something? Do you have any error?, perhaps you could show some javascript code.
Anyways, if you are not using jquery try something like this:
Minutes<input type="text" id="min" value="" name="min">
Seconds<input type="text" id="sec" value="" name="sec"><br>
Output<input type="text" id="output" value="" name="output"><br>
<input type="Button" value="" onclick="calculate()" name="Calculate"><br>
js:
function calculate() {
var min = parseInt(document.querySelector('#min').value);
var sec = parseInt(document.querySelector('#sec').value);
document.querySelector('#output').value = [(min*30)+sec]/500;
}

Using jQuery it is easy to solve.
Minutes<input type="text" value="" name="min" class="min">
Seconds<input type="text" value="" name="sec" class="sec"><br>
Output<input type="text" value="" name="output" class="output"><br>
<input type="Button" value="" name="Calculate" class="calculate"><br>
Try this, this may help you.
$(function() {
$(".calculate").on("click", function() {
var min = $(".min").val();
var sec = $(".sec").val();
var output = parseFloat(((min*30) + sec) / 500);
$(".output").val(output);
});
});
let me know.

auto calculate without clicking any button

Hi I'm new for programming and I'm facing one problem.
I have 3 input for values and 1 input for total. What I need is when I change the value in any input total should change automatically.
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
<input type="text" name="Amt" id="amount" class="form-control" />
And for total I have:
<input type="text" class="form-control" name="total" id="total" value="" />
And below is the script:
<script type="text/javascript">
$('#amount').change(function() {
$('#total').attr('value', function() {
var result = 0;
$('#amount').each(function() {
result += $(this).attr('value');
});
return result;
});
});
</script>

You have multiple ids for amount. These should be changed to classes. In addition, the value for each amount will be picked out by jQuery as a string, so that needs to be changed to an integer:
$('.amount').change(function () {
var result = 0;
$('.amount').each(function () {
result += +$(this).val();
});
$('#total').val(result);
});
Fiddle.

Add and remove inputs dynamicly with a other input

I searched a lot for this, but I can only find +1 -1 solutions.
But I want to set the number of inputs with a other input like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
When the user now writes 5 in the first field, the form should look like this:
//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">
How can I make this? MUST I use js?

Here's a simple javascript snippet that doesn't make use of any frameworks:
function addInputs() {
var count = parseInt(document.getElementById("count").value);
for (var i = 2; i <= count; i++) {
document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
}
}
In this example you have to add a container (div) with id 'moreinputs'. However, when calling this function more than once, it will not work properly (e.g. it can only increase the number of input but not decrease)

Yes, either you use javascript, or you send the form to the server, where a new html page with all the inputs is generated (e.g. with PHP).

Yes you must use js to do it dynamically on the spot You have a jQuery tag so I will show an example in jQuery
This is not the best example but it works and it's a starting point
JS:
$(function(){
$('#master').on('change', function() {
var count = $(this).val();
$('#otherInputs').html('')
for( var i = 0; i < count; i++) {
$('#otherInputs').append(
$('<input>', {type: 'text'})
);
}
});
});
HTML:
<input type="number" id="master" value="1">
<div id="otherInputs"></div>
Demo
In English this is saying...
When you change #master I will empty #master (html('')) loop through and append a new input depending on #master's value

Here's the FIDDLE. Hope it helps. :)
html
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>
script
$('#count').on('keyup', function () {
var $this = $(this);
var count = $this.val();
$('#container').empty();
for (var x = 1; x <= count; x++) {
var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
$('#container').append(newInput);
}
});

This worked for me
function AddField() {
var count = $("#countetfield").val();
var i = 1;
var id = $("#container .testClass:last").attr('name');
var test = id.split("_");
id_name = test[1];
while (i <= count) {
id_name++;
var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
$("#container").append(a);
i++;
}
}
<input type="text" id="countetfield" value="1" />
<input type="button" value="Go" onclick="AddField();" />
<div id="container">
<input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
</div>