We Keep Coding

Javascript Multiple Inputs Value Output

Hi I want to create a stamp script and I want the user to enter his name and address in three fields,
then he should see the fields later in the stamp edition?
I have 3 input fields where the user can give in his data,
now i will give this data in a new class. This is what i have:
window.onload = function() {
$( "#Text1" )
.keyup(function() {
var value = $( this ).val();
$( ".ausgabe" ).text( value );
})
.keyup();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>

It looks like you want to mimic what the user is typing in the text inputs and show it in ausgabe. If that's what you want, then you can tie the keyUp event to each of the inputs.
$(input [type='text']).keyUp(function() {
var value = $(this).val();
$('.ausgabe').text(value);
}
But this will overwrite .ausgabe every time text is entered into a different input.
You could get the value of .ausgabe every time keyUp fires and pre-pend that value:
So you may want to have a button that renders each input's value into .ausgabe:
<button>.click(function() {
$(input[type="text"]).each(function() {
var boxText = $(this).val(); //text box value
var aus = $('.ausgabe').text(); //ausgabe value
$('.ausgabe').text(boxText + ' ' + aus); //combine the current text box value with ausgabe
})
})

As you have not made it very clear what you are trying to accomplish, I am providing a simple example that might send you down the right path.
$(function() {
function updateDiv(source, target) {
var newVal = "";
source.each(function() {
newVal += "<span class='text " + $(this).attr('id').replace("Text", "item-") + "'>" + $(this).val() + "</span> ";
});
target.html(newVal);
}
$("[id^='Text']").keyup(function(e) {
updateDiv($("input[id^='Text']"), $(".ausgabe"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Text1">
<input type="text" id="Text2">
<input type="text" id="Text3">
<div class="ausgabe"></div>
Since you already seem to understand .html() and .text(), we can look at the Selector. The one used will select all elements with an ID Attribute of Text in the beginning of the string. See More: https://api.jquery.com/category/selectors/attribute-selectors/

How to Pass a value to input field through javascript

My Question : A value which is passed by an id is showing in the input box. but i can not see that value in the html source code section.
This is my input field In which i am passing a value through a cookie.
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City">
What i am doing is: I have a drop down of cities. when i click on the city. i am setting a cookie with the name of scity.
$("#cuto li").click(function () {
autoValuenew = this.id; // console.log(autoValuenew);
document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});
After that ..
I can access the value of city but i can not see that value in the html source code.
When i change my field type text to hidden type i can see the value in the htmlsource code.
I do not understand what is going here with these two types. or if i am doing something please tell where i am doing wrong. or if there is another way to do this.

Kindly look this code I hope it helps
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City"/>
<ul id="cuto">
<li type="button" id="cuto">test</li>
</ul>
here is your JQuery
$("#cuto li").click(function () {
debugger;
autoValuenew = this.id; // console.log(autoValuenew);
$.cookie("scity", "test value"); // Setting cookie value
//document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});

element.setAttribute('value', myValue);
I think you should not just change the value change it in by changing attribute value.

Save and show input value in session storage

I have input number and button with text on subpage.
<input id="quantity" type="number">
I want to save value from input and show on button.
<a id="button2" data-role="button">You have "value" coins</a>
How i can do it?

If I understood well,
Here is solution
document.getElementById('quantity').onkeyup = function() {
var quantity=this.value;
sessionStorage.setItem('quantity',quantity);
document.getElementById('button2').innerHTML='You have '+ sessionStorage.getItem('quantity')+' coins';
};
Here is jquery version:
$('#quantity').keyup(function(){
var quantity=$(this).val();
sessionStorage.setItem('quantity',quantity);
$('a').text('You have ' + sessionStorage.getItem('quantity') +' coins');
});

how can a call a function when text value of my textbox changes using jquery?

I have 3 input fields which have values prepopulated and a constant value of total hours 200. I am calculating the avghours as totalhours/datediff of date1 and date2.
My Question is if i change the value of date2 then i want the avghours value to change accordingly. I am not sure which event should be used to fire the method which does the calculation
<input type="text" id ="avghours"/>
<input type="text" id ="date1"/>
<input type="text" id ="date2"/>
Javascript code
function getavg()
{
$('#avghours').val()=totalhours/datediff($('#date2').val(),$('#date1').val(),'day');//datediff is userdefined function to get the datedifference
}
change will fire only if the focus is lost so that might not be possible is there anyother event that i can use.
Thanks
Prady

change
$('#avghours').val()=totalhours/datediff($('#date2').val(),
$('#date1').val(),'day');
to
$("#date2").bind("keyup blur change mouseup",function () {
var d = parseInt(datediff($('#date2').val());
var v = (totalhours/d) + ' ' + $('#date1').val() + ' day'; <-- mergestrings
$('#avghours').val(v);
});
assign via the function instead of the right hand.

If you want to update it immediately when the user types you could use the keyup event.

you could try keypress so...
$('#date2').keypress(function() {
//do calculating average logic here
});
then this would pick up when the value of the textbox has been changed

You can use the .change() event for this.
$("#date2").change(function(){
});

[![<html>
<head>
<title></title>
<script>
function multy(val)
{
alert(val.value+"--"+val.id);
}
</script>
</head>
<body>
<input id="txtdemo" type="text" onchange="multy(this);"></br>
<input id="txtdemo" type="text" onchange="multy(this);">
</input>
</body>
</html>][1]][1]

How can do I enable onclick to clear an input field? Jquery

$('<p><input type="text" class = "class-'+ (++i) +'" onclick="'(+ this.value = ''; +)'" value="Enter Choice #' + i + '"/></p>')
I'm not sure if this is the correct syntax or not, but whatever I am using is not working. ANy help? Thanks

HTML:
<input type="text" class="class-1" value="Enter Choice #1">
<input type="text" class="class-2" value="Enter Choice #2">
JQUERY:
$(document).ready(function() {
$('input[class^="class-"]').focus(function() {
var $input = $(this);
if($input.val() == $input.data('default_val') || !$input.data('default_val')) {
$input.data('default_val', $input.val());
$input.val('');
}
});
$('input[class^="class-"]').blur(function() {
var $input = $(this);
if ($input.val() == '') $input.val($input.data('default_val'));
});
});
Above code clear the value when the textfields gets focus and adds the default value when textfield is empty on lost focus (blur).
Updated fiddle: http://jsfiddle.net/K3Sx7/4/
EDIT: updated code to conform question.

Add an id to your input field:
<input id="myinput"...
Then add this code in your $(document).ready(... call:
$('#myinput') // get element whose id is 'myinput'
.click(function() { // bind a click handler
$(this).val('') // clear field
.unbind('click'); // unbind click handler to avoid field being cleared again
})

I think you can do it without jQuery
try this
<p><input type="text" class = "class-1" onclick="this.value='';" value="Enter Choice # 1"/></p>

To do it inline like that, you need to keep the this.value='' as part of the string:
$('<p><input type="text" class = "class-'+ (++i) +'" onclick="this.value=\'\'" value="Enter Choice #' + i + '"/></p>');
Notice the " onclick="this.value=\'\'", where the single quotes are escaped to keep the main string from being terminated.
Here's a working example for you.

var i = 0;
$('<input type="text" class="class-'+ ++i +'" value="Enter Choice #' + i + '"/>')
.click(function(){
this.value = '';
})
.wrap('<p />')
.parent()
.appendTo('#container');
http://jsfiddle.net/jruddell/FVqjQ/