Issue with sending a val to an input using oninput - javascript

Fiddle Demo
here's the JSfiddle for it, can't seem to get the read-only input to update with the val of the other input (it's going to be a hidden input)
HTML
<form>
<input id="otherAmt" class="qty" type="text" placeholder="Amount Hidden" />
<p> The Costs are:</p> <input type="text" id="otherAmtHidden" name="otherAmtHidden" readonly="" />
</form>
var otherAmt = document.getElementById("otherAmt");
var otherAmtHidden = document.getElementById("otherAmtHidden");
otherAmt.oninput = function(){
alert('input Received');
var val1 = parseInt(otherAmt.value, 10);
alert(val1 + 'val1');
var amtHidden = val1;
alert(amtHidden + 'amtHidden');
//otherAmtHidden.innerHTML = amtHidden;
$('input [name="otherAmtHidden"]').val(amtHidden);
alert('finished');
};
Edit: I'm dumb, Solved it by changing the $('input etc').val(amtHidden); to $('#otherAmtHidden).val(amtHidden);

I'm dumb, I Solved it by changing the $('input etc').val(amtHidden); to $('#otherAmtHidden).val(amtHidden);
Fixed Javascript
var otherAmt = document.getElementById("otherAmt");
var otherAmtHidden = document.getElementById("otherAmtHidden");
otherAmt.oninput = function(){
var val1 = parseInt(otherAmt.value, 10);
var amtHidden = val1;
$('#otherAmtHidden').val(amtHidden);
};

Related

addeventlistener function not working as expected

I am not able to see the data in firebase database after giving the input through UI. Can anyone please help?
<body>
<input id="username" type="text" placeholder="Name"><br/>
<input id="text" type="text" placeholder="Message"><br/>
<button id="post">Send</button><br/>
<div id="results"></div>
<script>
var myFirebase = new Firebase('https://webchat-a778f.firebaseio.com/');
var usernameInput = document.getElementByID("username");
var textInput = document.getElementByID("text");
var postButton = document.getElementByID("post");
postButton.addEventListener("click", function() {
myFirebase.push(usernameInput + " says: " + textInput);
textInput.value = "";
},false);
You have a syntax error
It should be
document.getElementById
The last d is in lowercase

Calculate number based on user input

I'm currently using the following solution to generate a number based on user input into two form fields http://jsfiddle.net/A3qat/5/
$("#download, #contention").keyup( function(){
var n1 = $("#download").val();
var n2 = $("#contention").val();
var result = n1/n2;
$("#label").text(result);
});
So, n1/n2 = n3
How can I modify this to show the output (n3) in a separate input form field underneath rather than plain text
Fiddle: http://jsfiddle.net/A3qat/49/
You should use .val()
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").val(result);
});
Replace your label with input and replace $("#label").text(result); with $("#label").val(result);
<input type="number" id="field1">
<input type="number" id="field2">
<input id="result"></input>
<script>
$("#download, #contention").keyup( function(){
var n1 = $("#download").val();
var n2 = $("#contention").val();
var result = n1/n2;
$("#result").val(result);
});
</script>
DEMO:
http://jsfiddle.net/A3qat/51/
If you textbox, then you can get the value of the textbox or you can set the value of the textbox using .val()
On your
HTML
<input type="number" id="field1">
<input type="number" id="field2">
<span><input type="text" id="label" ></span>
JS
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").val(result);
});

Combine text fields for preview before submitting form

I have been searching unsuccessfully for code to display the values entered into multiple text box fields combined on the page as the person types. I currently have 6 text boxes (description1, description2, description3, description4, description5, description6) that are combined on the backend with PHP to make a "final_description" that is then saved in the database. My goal is to have the user be able to see what the final_description will look like with all 6 fields combined before the form is saved and processed by PHP. The code I am looking for is very similar to what we have here on stackoverflow where when you type it adds it below so that you can see how it will output. I just want to have it where it combines multiple text boxes into one preview.
Assuming you have:
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<input class="desc" id="desc1" />
<div id="final_desc" />
This would work:
window.onload = function(){
function forEach(arr, fun){ return Array.prototype.forEach.call(arr, fun); };
var inputs = document.querySelectorAll(".desc");
function updateFinalDesc(){
var finalDesc = "";
forEach(inputs, function(inp){ finalDesc += inp.value + "<br/>"; });
document.getElementById('final_desc').innerHTML = final_desc;
};
forEach(inputs, function(input){
input.addEventListener('keypress', updateFinalDesc);
input.addEventListener('change', updateFinalDesc);
});
}
Hope this helps. Cheers
If you use knockout.js data binding library here is how you can solve this:
<div id="content">
<input type="text" data-bind="value: description1" />
<input type="text" data-bind="value: description2" />
<input type="text" data-bind="value: description3" />
<input type="text" data-bind="value: description4" />
<input type="text" data-bind="value: description5" />
<input type="text" data-bind="value: description6" />
<span data-bind="value: combined"></span>
</div>
<script type="text/javascript">
function myViewModel()
{
var self = this;
self.description1 = ko.observable("");
self.description2 = ko.observable("");
self.description3 = ko.observable("");
self.description4 = ko.observable("");
self.description5 = ko.observable("");
self.description6 = ko.observable("");
self.combined= ko.computed(function() {
return self.description1() + " " + self.description2()+ " " + self.description3()+ " " + self.description4()+ " " + self.description5()+ " " + self.description6();
}, self);
}
ko.applyBindings(new myViewModel(), document.getElementById("content"));
</script>
Just make sure to include the knockout.js library in your page.
I went with this. I know it probably isn't the best, but it seems to work:
var description1 = document.getElementById('description1');
var description2 = document.getElementById('description2');
var description3 = document.getElementById('description3');
var description4 = document.getElementById('description4');
var description5 = document.getElementById('description5');
var description6 = document.getElementById('description6');
description1.onkeyup = description1.onkeypress = function(){
document.getElementById('description1preview').innerHTML = this.value;
}
description2.onkeyup = description2.onkeypress = function(){
document.getElementById('description2preview').innerHTML = this.value;
}
description3.onkeyup = description3.onkeypress = function(){
document.getElementById('description3preview').innerHTML = this.value;
}
description4.onkeyup = description4.onkeypress = function(){
document.getElementById('description4preview').innerHTML = this.value;
}
description5.onkeyup = description5.onkeypress = function(){
document.getElementById('description5preview').innerHTML = this.value;
}
description6.onkeyup = description6.onkeypress = function(){
document.getElementById('description6preview').innerHTML = this.value;
}

Setting values to fields with the same name/key possible?

Ok, say I have a checkbox such as this:
<input type="checkbox" value="1" class="discount_select" name="select[101132]">
...and 3 text fields like this:
<input type="text" name="start[101132]">
<input type="text" name="end[101132]">
<input type="text" name="discount[101132]">
I am running some code right now that will update the text field values if the checkbox is checked, however I'm not sure if or how you can target the correct fields as they all have different ID's.
So I basically have this code to loop through the checked boxes, but not sure how to make updates to the correct text fields:
// Get values
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
// How can I target the correct fields/ID's here?
});
Try
// Get values
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
var num = this.name.substring(7, this.name.length - 1);
$('input[name="start[' + num + ']"]').val(start)
$('input[name="end[' + num + ']"]').val(end)
$('input[name="discount[' + num + ']"]').val(discount)
});
Change the name and ids of your fields to make it simpler
<input type="checkbox" value="1" class="discount_select" id="101132" name="select_101132">
<input type="text" name="start_101132">
<input type="text" name="end_101132">
<input type="text" name="discount_101132">
Then:
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
var select_id = this.attr("id");
$('[name=start_'+select_id+']').val(start);
$('[name=end_'+select_id+']').val(end);
$('[name=discount_'+select_id+']').val(discount);
});

javascript how to add textboxs' values and titles to textarea

I have this html:
<input type="radio" name="r1" value="v1"><input name="asd1" title="text1" id="asd1"><br>
<input type="radio" name="r2" value="v2"><input name="asd2" title="text1" id="asd2"><br>
<input type="button" name="but1">
<textarea rows=6 cols=80 name="conclus" id="idConclus">
</textarea><br><br>
Is there a way on js to fill textarea with titles and values of inputs by selecting some of them and clicking a button?
e.g.: "text1 - value1, text2 - value2" etc.
thanks for material.
mmm... Felix King, in your examples the button updates the form. and if i need to put one testfield 1, then put some text in textarea manually, and then again textfield 2 and so on? i mean, without updating the textarea?
getElementById is your friend :-)
<script>
getValues = new function() {
var myTextArea = document.getElementById('idConclus');
var radio1 = document.getElementById('asd1');
var radio2 = document.getElementById('asd2');
myTextArea.value = radio1.title + ' - ' + radio1.value + ' ,'
+ radio2.title + ' - ' + radio2.value;
}
</script>
<input type="radio" name="r1" value="v1">
<input type="text" name="asd1" title="text1" id="asd1"><br>
<input type="radio" name="r2" value="v2">
<input type="text" name="asd2" title="text1" id="asd2"><br>
<input type="button" name="but1" handler = getValues>
I suggest you read about JavaScript and forms.
Assuming you have this HTML:
<form name="data">
<input name="asd1" title="text1" id="asd1"><br>
<input name="asd2" title="text2" id="asd2"><br>
<input type="button" name="but1" value="update">
<textarea rows=6 cols=80 name="conclus" id="idConclus"></textarea>
</form>
you can do this:
var inputs = ['asd1', 'asd2'];
var form = document.data;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
var text = Array();
for(var i = 0, length = inputs.length; i < length; i++) {
var input = form[inputs[i]];
text.push(input.title + " - " + input.value);
}
textarea.value = text.join(' ');
}, false);​
See a live example here: http://jsfiddle.net/6kbtH/
Update:
If you want to control which values are put into the textbox, I would use checkboxes, give them the same name and the name of the input as value like so:
<input type="checkbox" name="take" value="asd1"><input name="asd1" title="text1" id="asd1">
<input type="checkbox" name="take" value="asd2"><input name="asd2" title="text2" id="asd2">
Then you can loop with nearly the same code over those values:
var form = document.data;
var inputs = form.take;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
var text = Array();
for(var i = 0, length = inputs.length; i < length; i++) {
if(inputs[i].checked) {
var input = form[inputs[i].value];
text.push(input.title + " - " + input.value);
}
}
textarea.value = text.join(' ');
}, false);​
Live example: http://jsfiddle.net/sJdqb/
Note: You have to take care of cross-browser issues regarding attaching the event listener yourself if you don't use a JavaScript library. The examples I gave will work in Firefox and WebKit-based browsers.

Categories