Class Name Instead Of Id For Live Output?
I have a form, and as the user inputs in the text field the output is visible further down. At the moment im using 'id' so the output is limited to one field only. What I would li
Solution 1:
A friend helped me fix this up, code below:
<html>
<head>
<meta charset="utf-8">
<title>Company Details</title>
</head>
<style>fieldset {
width: 600px;
}
label.field {
text-align: right;
width:200px;
float: left;
font-weight: bold;
color: black;
}
input.textbox-300 {
width: 300px;
float: left;
}
fieldset p {
clear: both;
padding: 5px;
}
</style>
<body>
<form action="begin-create-done.html" method="get">
<fieldset>
<p><label class="field"> Name </label>:
<span><input type="text" name="Name1"></span> <br>
</fieldset>
</form>
Name 1 = <span class="Name1"></span><br>
Name 2 = <span class="Name1"></span><br>
<script>
var formValues = {};
function inputObj(formNR, defaultValues) {
var inputs = formNR.getElementsByTagName('input');
for ( var i = 0; i < inputs.length; i++) {
formValues[inputs[i].name] = defaultValues[i];
if(inputs[i].type === 'text') {
inputs[i].value = defaultValues[i];
outputs = document.getElementsByClassName(inputs[i].name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].innerHTML = defaultValues[i];
}
}
inputs[i].addEventListener('keyup', function() {
formValues[this.name] = this.value;
outputs = document.getElementsByClassName(this.name);
for ( var j = 0; j < outputs.length; j++) {
outputs[j].innerHTML = this.value;
}
}, false);
}
}
// build a little array with the defaultValues for each input
var defValues =[];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues);
</script>
</body>
</html>
Post a Comment for "Class Name Instead Of Id For Live Output?"