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;
}
Related
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
I have a simple html page with value input and save button.
I want the save will be enabled only if the value is changed (somtimes is initialized and somtimes not.
I've tryied few things without any success
HTML
<input type="text"
placeholder="type here"
data-bind="value: rate,"/>
<button data-bind="click: save">Save</button>
JS
var viewmodel = function () {
this.rate = ko.observable('88').extend(required: true);
};
viewmodel.prototype.save = function () {
alert('save should be possible only if rate is changed);
};
Also on jsfiddle
Should be able to achieve this with a computed observable and the enable binding.
See http://jsfiddle.net/brendonparker/xhLrB/1/
Javascript:
var ctor = function () {
var self = this;
self.originalRate = '88';
self.rate = ko.observable('');
self.canSave = ko.computed(function(){
return self.originalRate == self.rate();
});
};
ctor.prototype.save = function () {
alert('save should be possible only if rate is changed');
};
ko.applyBindings(new ctor());
HTML:
<input type="text" placeholder="type here" data-bind="value: rate, valueUpdate: 'afterkeydown'"/>
<button data-bind="click: save, enable: canSave">Save</button>
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);
};
first of all I'm sorry if this is a long code segment however, I'm trying to make a modal window which writes the thing you wrote in my user form and asks you to confirm it. I am currently in a class to learn Javascript and I'm not allowed to use innerHTML and I must write the "Firstname:" etc dynamically (the text for firstname) and am not allowed to just write it inside the popup window. I've gotten most stuff to work but the "Firstname:" "Lastname" etc comes up as "undefined" or (as you can see the thing I tried with just the first name in this case) comes up as "null".
Hopefully someone can shed some light on this subject for me, this is the HTML:
<form action="http://voyager.lnu.se/tekinet/kurser/dtt/wp_webbteknik/process_form.php" method="POST" id="userform" target="_blank">
<p id="formQuestion1">Förnamn</p>
<div id="error1"></div>
<input type="text" name="firstName" id="test"/>
<p id="formQuestion2">Efternamn</p>
<div id="error2"></div>
<input type="text" name="lastName" />
<p id="formQuestion3">Postnummer</p>
<div id="error3"></div>
<input type="text" name="postCode" id="codeText"/>
<p id="formQuestion4">E-post</p>
<div id="error4"></div>
<input type="text" name="eMail" />
<br />
<br />
<label id="model" class="formQuestion" for="priceModel">Prismodell</label>
<br />
<select name="Type" id="priceModel">
<option value="Låg" selected>Låg</option>
<option value="Medel">Medel</option>
<option value="Hög">Hög</option>
</select>
<br />
<br />
<br />
<input id="sendButton" type="submit" value="Genomför Köp" />
</form>
And here is the segment for the modal window (Javascript)
function popup(backgroundDiv) {
var popForm = document.getElementById("userform");
var myDiv = document.createElement("div");
myDiv.className = "popupWindow";
var priceModel = document.getElementById("priceModel");
// Knappar
var newButton = document.createElement("button");
var newerButton = document.createElement("button");
newButton.setAttribute("value", "Skicka");
newButton.innerHTML = "Skicka"; // Here I actually use innerHTML because I don't know
newerButton.innerHTML = "Stäng"; // any other way to set the text inside the button
newButton.className = "popupButton";
newerButton.className = "popupButton";
newButton.setAttribute("id", "Skicka");
newerButton.setAttribute("id", "Avbryt");
myDiv.appendChild(newButton);
myDiv.appendChild(newerButton);
// Information
var h1 = document.createElement("h1");
h1.setAttribute("id", "popuph1");
var h1Text = document.createTextNode("Vänligen kontrollera dina uppgifter");
var text = document.getElementById("formQuestion1");
var writeFname = text.nodeValue + popForm.elements.firstName.value;
var writeLname = document.getElementById("formQuestion2").value + popForm.elements.lastName.value;
var writeCode = document.getElementById("formQuestion3").value + popForm.elements.postCode.value;
var writeMail = document.getElementById("formQuestion4").value + popForm.elements.eMail.value;
var writePlan = document.getElementById("model").value + priceModel.value;
var p1 = document.createTextNode(writeFname);
var p2 = document.createTextNode(writeLname);
var p3 = document.createTextNode(writeCode);
var p4 = document.createTextNode(writeMail);
var p5 = document.createTextNode(writePlan);
h1.appendChild(h1Text);
myDiv.appendChild(h1);
myDiv.appendChild(p1);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p2);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p3);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p4);
myDiv.appendChild(document.createElement('br'));
myDiv.appendChild(p5);
document.body.appendChild(myDiv);
newButton.onclick = function () {
document.body.removeChild(myDiv);
document.body.removeChild(backgroundDiv);
return true;
};
If you don't want to use innerHTML then you can use those options, suppose you want value from this node <p id="formQuestion1">Förnamn</p>
Then your code would be
var dom = document.getElementById('formQuestion1');
1) var res = dom.innerText;
OR
2) var res = dom.textContent;
OR
3) var res = dom.firstChild.nodeValue;
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.