Copying value from one input field to another input field

Copying value from one input field to another input field - javascript

I need a javascript function for copying the value of one input field to another input field based on checkbox selection. However i did some javascript code on click,
<script>
function copyTextValue() {
var text1 = document.getElementById("Name1").value;
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value=text1;
}
</script>
<input type="checkbox" name="check1" onclick="copyTextValue();"/>
Now i need to delete the copied values in those two boxes on uncheck. I stuck up with this. Any help?

function copyTextValue(bf) {
var text1 = bf.checked ? document.getElementById("Name1").value : '';
document.getElementById("Name2").value = text1;
document.getElementById("Name3").value = text1;
}
<input type="checkbox" name="check1" onchange="copyTextValue(this);" />
<input id="Name1"><input id="Name2"><input id="Name3">

This is how I do for unchecking:
document.getElementById("Name2").value ="";
document.getElementById("Name3").value="";

function copyTextValue() {
if(document.getElementById('check1').checked){
let text1 = document.getElementById('Name1').value;
document.getElementById('Name2').value = text1;
document.getElementById('Name3').value = text1;
}
else{
document.getElementById('Name2').value = "";
document.getElementById('Name3').value = "";
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input type="text" id="Name1" name="Name1">
<input type="text" id="Name2" name="Name2">
<input type="text" id="Name3" name="Name3">
<input type="checkbox" id="check1" name="check1" onclick="copyTextValue();"/>
</body>
</html>

By using upper ans I copied Billing address into shipping address in woocommerce
function copyTextValue(bf) {
var billing_first_name = bf.checked ? document.getElementById("billing_first_name").value : '';
var billing_last_name = bf.checked ? document.getElementById("billing_last_name").value : '';
var billing_address_1 = bf.checked ? document.getElementById("billing_address_1").value : '';
var billing_address_2 = bf.checked ? document.getElementById("billing_address_2").value : '';
var billing_city = bf.checked ? document.getElementById("billing_city").value : '';
var billing_state = bf.checked ? document.getElementById("billing_state").value : '';
var billing_postcode = bf.checked ? document.getElementById("billing_postcode").value : '';
document.getElementById("shipping_first_name").value = billing_first_name;
document.getElementById("shipping_last_name").value = billing_last_name;
document.getElementById("shipping_address_1").value = billing_address_1;
document.getElementById("shipping_address_2").value = billing_address_2;
document.getElementById("shipping_city").value = billing_city;
document.getElementById("shipping_state").value = billing_state;
document.getElementById("shipping_postcode").value = billing_postcode;
}

Related

broken JavaScript program with no errors [duplicate]

I am in a beginning JavaScript class and very new to programming. I am attempting to make a program that converts Celsius to Fahrenheit or Fahrenheit to Celsius depending on which radio button is clicked.
I feel like I have most of working, although it may not be the most elegant code. The one thing I can't figure out is is why the converted value won't display using $("degrees_computed").innerHTML.
What am I missing? Why won't the converted value display?
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var toFahrenheit = function() {
if ($("to_fahrenheit").checked) {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
}
clearTextBoxes();
}
var toCelsius = function() {
if ($("to_celsius").checked) {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
}
clearTextBoxes();
}
var convertTemp = function() {
var fahrenheit;
var celsius;
if ($("to_fahrenheit").checked) {
celsius = $("degrees_entered").value;
celsius = (celsius * (9 / 5)) + 32;
celsius = parseFloat(celsius);
celsius = celsius.toFixed(0);
$("degrees_computed").innerHTML = celsius;
}
if ($("to_celsius").checked) {
fahrenheit = $("degrees_entered").value;
fahrenheit = parseFloat(fahrenheit);
fahrenheit = (fahrenheit - 32) * (5 / 9);
fahrenheit = fahrenheit.toFixed(0);
$("degrees_computed").disabled = false;
$("degrees_computed").innerHTML = fahrenheit;
}
}
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};
window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Temperature Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Temperature Converter</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered"><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>

Your output fields are <input> elements. To fill them in you must assign to .value, not .innerHTML.
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var toFahrenheit = function() {
if ($("to_fahrenheit").checked) {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
}
clearTextBoxes();
}
var toCelsius = function() {
if ($("to_celsius").checked) {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
}
clearTextBoxes();
}
var convertTemp = function() {
var fahrenheit;
var celsius;
if ($("to_fahrenheit").checked) {
celsius = $("degrees_entered").value;
celsius = (celsius * (9 / 5)) + 32;
celsius = parseFloat(celsius);
celsius = celsius.toFixed(0);
$("degrees_computed").value = celsius;
}
if ($("to_celsius").checked) {
fahrenheit = $("degrees_entered").value;
fahrenheit = parseFloat(fahrenheit);
fahrenheit = (fahrenheit - 32) * (5 / 9);
fahrenheit = fahrenheit.toFixed(0);
$("degrees_computed").disabled = false;
$("degrees_computed").value = fahrenheit;
}
}
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};
window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Temperature Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Temperature Converter</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered"><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>

You should not use innerHTML for <input> tags, instead use value
Since you are using jquery you could also use $("degrees_computed").val(myResultVariable)
Could be working with innerHTML if your result html tag was a <a> <div> <span> <label> or any other tag than elements like <input> or <img>

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
degrees_computed is input so you basically replace
$("degrees_computed").innerHTML =
with
$("degrees_computed").value =

Beginning JavaScript - displaying temperature value in Inner HTML

I am in a beginning JavaScript class and very new to programming. I am attempting to make a program that converts Celsius to Fahrenheit or Fahrenheit to Celsius depending on which radio button is clicked.
I feel like I have most of working, although it may not be the most elegant code. The one thing I can't figure out is is why the converted value won't display using $("degrees_computed").innerHTML.
What am I missing? Why won't the converted value display?
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var toFahrenheit = function() {
if ($("to_fahrenheit").checked) {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
}
clearTextBoxes();
}
var toCelsius = function() {
if ($("to_celsius").checked) {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
}
clearTextBoxes();
}
var convertTemp = function() {
var fahrenheit;
var celsius;
if ($("to_fahrenheit").checked) {
celsius = $("degrees_entered").value;
celsius = (celsius * (9 / 5)) + 32;
celsius = parseFloat(celsius);
celsius = celsius.toFixed(0);
$("degrees_computed").innerHTML = celsius;
}
if ($("to_celsius").checked) {
fahrenheit = $("degrees_entered").value;
fahrenheit = parseFloat(fahrenheit);
fahrenheit = (fahrenheit - 32) * (5 / 9);
fahrenheit = fahrenheit.toFixed(0);
$("degrees_computed").disabled = false;
$("degrees_computed").innerHTML = fahrenheit;
}
}
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};
window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Temperature Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Temperature Converter</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered"><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>

Your output fields are <input> elements. To fill them in you must assign to .value, not .innerHTML.
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
var toFahrenheit = function() {
if ($("to_fahrenheit").checked) {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
}
clearTextBoxes();
}
var toCelsius = function() {
if ($("to_celsius").checked) {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
}
clearTextBoxes();
}
var convertTemp = function() {
var fahrenheit;
var celsius;
if ($("to_fahrenheit").checked) {
celsius = $("degrees_entered").value;
celsius = (celsius * (9 / 5)) + 32;
celsius = parseFloat(celsius);
celsius = celsius.toFixed(0);
$("degrees_computed").value = celsius;
}
if ($("to_celsius").checked) {
fahrenheit = $("degrees_entered").value;
fahrenheit = parseFloat(fahrenheit);
fahrenheit = (fahrenheit - 32) * (5 / 9);
fahrenheit = fahrenheit.toFixed(0);
$("degrees_computed").disabled = false;
$("degrees_computed").value = fahrenheit;
}
}
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};
window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Temperature Converter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Temperature Converter</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered"><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
<script src="convert_temp.js"></script>
</body>
</html>

You should not use innerHTML for <input> tags, instead use value
Since you are using jquery you could also use $("degrees_computed").val(myResultVariable)
Could be working with innerHTML if your result html tag was a <a> <div> <span> <label> or any other tag than elements like <input> or <img>

Setting the value is normally used for input/form elements. innerHTML is normally used for div, span, td and similar elements.
degrees_computed is input so you basically replace
$("degrees_computed").innerHTML =
with
$("degrees_computed").value =

What is wrong with my code?

I'm having trouble with my code but can't seem to find what the problem is. I keep getting the same errors in browser but I don't see what the problem is?
FVOM.js:16 Uncaught SyntaxError: Unexpected number
FVOM.html:15 Uncaught ReferenceError: CheckSelection is not defined
HTML code:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Future Value Demo</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="JScripts/FVOM.js"></script>
</head>
<body>
<table>
<tr>
<td colspan="2">
<input type="radio" id="futVal" name="Money" checked onClick="FVOM:CheckSelection(1)"/>Future Value
<input type="radio" id="preVal" name="Money" onClick="FVOM:CheckSelection(2)"/>Present Value
<input type="radio" id="rate" name="Money" onClick="FVOM:CheckSelection(3)"/>Rate of Interest
<input type="radio" id="time" name="Money" onClick="FVOM:CheckSelection(4)"/>Years
</td>
</tr>
</table>
<br/>
<table>
<tr>
<td>Future Value (FV)</td>
<td><input type="text" id="FV" disabled/></td>
</tr>
<tr>
<td>Present Value (PV)</td>
<td><input type="text" id="PV" value = "1500" /></td>
</tr>
<tr>
<td>Interest Rate [pa] (r)</td>
<td><input type="text" id="R" value = "4.5"/></td>
</tr>
<tr>
<td>Years (n)</td>
<td><input type="text" id="N" value = "1"/></td>
</tr>
<tr>
<td>Compounded</td>
<td>
<select id="compounded">
<option value="year">Yearly</option>
<option value="quarter">Quarterly</option>
<option value="month">Monthly</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" id="reset" value="RESET"/></td>
<td><input type="button" id="calculate" value="Calculate"/></td>
</tr>
</table>
<br/>
<hr/>
<br/>
<div id="results">
</div>
</body>
JavaScript:
var $ = function(id){
return document.getElementById(id);
};
var futureValue = function(){
var pv = parseFloat($("PV").value);
var r = parseFloat($("R").value);
var n = parseFloat($("N").value);
if(isNaN(pv) || isNaN(r) || isNaN(n)){
alert("Please enter a valid number");
}
else{
r = r/100/Compounded();
n = n*Compounded();
$("FV").value=(pv*Math.pow((1+r), n)).toFixed(2);
var res = "<table border="1"><tr><th>Period</th><th>Investment</th><th>Year End</th></tr>";
for(var i=1; i<=n; i++){
res+="<tr><td>"+i+"</td><td>€"+(pv).toFixed(2)+"</td><td>€"+(pv*Math.pow((1+r), 1)).toFixed(2)+"</td></tr>";
pv = pv*Math.pow((1+r), 1);
}
res+="</table>";
$("results").innerHTML = res;
}
};
var presentValue = function(){
var fv = parseFloat($("FV").value);
var r = parseFloat($("R").value);
var n = parseFloat($("N").value);
if(isNaN(fv) || isNaN(r) || isNaN(n))
alert("Please enter numbers");
else{
r = r/100/Compounded();
n = n*Compounded();
$("PV").value=(fv/Math.pow((1+r), n)).toFixed(2);
}
};
var rateOfInterest = function(){
var fv = parseFloat($("FV").value);
var pv = parseFloat($("PV").value);
var n = parseFloat($("N").value);
if(isNaN(fv) || isNaN(pv) || isNaN(n))
alert("Please enter numbers");
else{
n = n*Compounded();
$("R").value=((Math.pow((fv/pv),(1/n))-1)*100*Compounded()).toFixed(2)+"%";
}
};
var numberOfYears = function(){
var fv = parseFloat($("FV").value);
var pv = parseFloat($("PV").value);
var r = parseFloat($("R").value);
if(isNaN(fv) || isNaN(pv) || isNaN(r))
alert("Please enter numbers");
else{
r = r/100/Compounded;
$("N").value=(((Math.log(fv)-Math.log(pv))/Math.log(1 + r)))n/Compounded()).toFixed(2);
}
};
var Compounded = function(){
var com = $("compounded").value;
if(com=="year")
return 1;
if(com=="quarter")
return 4;
if(com=="month")
return 12;
};
var calculate = function(){
if($("futVal").checked)
futureValue();
if($("preVal").checked)
presentValue();
if($("rate").checked)
rateOfInterest();
if($("time").checked()
numberOfYears();
};
var CheckSelection = function(id){
if(id==1){
$("FV").disabled = true;
$("PV").disabled = false;
$("R").disabled = false;
$("N").disabled = false;
}
else if(id==2){
$("FV").disabled = false;
$("PV").disabled = true;
$("R").disabled = false;
$("N").disabled = false;
}
else if(id==3){
$("FV").disabled = false;
$("PV").disabled = false;
$("R").disabled = true;
$("N").disabled = false;
}
else{
$("FV").disabled = false;
$("PV").disabled = false;
$("R").disabled = false;
$("N").disabled = true;
}
RESET();
};
var RESET = function(){
$("FV").value = "";
$("PV").value = "";
$("R").value = "";
$("N").value = "";
$("results").innerHTML = "";
};
window.onload = function(){
$("calculate").onClick = calculate;
$("reset").onClick = RESET;
};
I'm fairly new to JavaScript so any help would be greatly appreciated.

var res = "<table border="1"><tr><th>Period</th><th>Investment</th><th>Year End</th></tr>";
is where the problem lies. You need to escape the " (double quotes) that exist in border="1" by either using a \" or by using single quotes '
For this reason some people use single quotes in javascript to assign a string, that way you do not need to escape the double quotes. If you would like to read more about strings in javascript there is a decent introduction at http://www.w3schools.com/js/js_strings.asp

How can I load a value using html5 local storage

I want to get my input also as an outup in an form table. I copied the code beneath because I only want to know how to get my output.
I think that I have to change this
<input type="button" value="load" onclick="load_local();"/
so when I click on a button I get the value in a box like a form
<!DOCTYPE HTML>
<html>
<head>
<TITLE>HTML5 local storage tester (testbed)</TITLE>
</head>
<body>
<div id="output_area"
style="position:relative;width:100%;height:200px;overflow:auto;
border: dotted 1px #ff0000;">
</div>
<div>
<input id="local_storage_key" type="text" />
<input id="local_storage_value" type="text" />
</div>
<div>
<input type="button" value="load" onclick="load_local();"/>
<input type="button" value="store" onclick="store_local();"/>
</div>
<script id="this_page_js" type="text/javascript">
/* store some string data to local storage
This is using some text input elements on the page
for input.*/
function store_local(domid_prefix){
var keyinput = document.getElementById('local_storage_key').value;
var valinput = document.getElementById('local_storage_value').value;
try{
if(typeof(window.localStorage) != 'undefined'){
window.localStorage.setItem(keyinput,valinput);
}
else{
throw "window.localStorage, not defined";
}
}
catch(err){
output_str("store_local,error," + err);
}
}
/* load some string data from local storage
This is using some text input elements on the page
for the key name input and value output.*/
function load_local(domid_prefix){
var keyinput = document.getElementById('local_storage_key').value;
var valoutput = document.getElementById('local_storage_value');
try {
if(typeof(window.localStorage) != 'undefined') {
valoutput.value = window.localStorage.getItem(keyinput);
}
else {
throw "window.localStorage, not defined";
}
}
catch(err) {
output_str("store_local,error," + err);
}
}
/* function to print to the debug area */
function output_str(str){
var da = document.getElementById("output_area");
da.innerHTML += str + "<br/>";
da.scrollTop = da.scrollHeight;
}
</script>
</body>
</html>
thanks for answering.

<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text" id="txt1" /><br/>
<input type="text" id="txt2" /><br/>
<input type="text" id="txt3" /><br/>
<input type="text" id="txt4" /><br/>
<input type="text" id="txt5" /><br/>
<input type="text" id="txt6" /><br/>
<input type="text" id="txt7" /><br/>
<input type="text" id="txt8" /><br/>
<input type="button" id="btn" value="Save" onclick="javascript: return save();"/>
<div id="output"></div>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript">
function save()
{
var arr =new Array();
var obj1 = parseInt(document.getElementById("txt1").value);
var obj2 = parseInt(document.getElementById("txt2").value);
var obj3 = parseInt(document.getElementById("txt3").value);
var obj4 = parseInt(document.getElementById("txt4").value);
var obj5 = parseInt(document.getElementById("txt5").value);
var obj6 = parseInt(document.getElementById("txt6").value);
var obj7 = parseInt(document.getElementById("txt7").value);
var obj8 = parseInt(document.getElementById("txt8").value);
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
arr.push(obj5);
arr.push(obj6);
arr.push(obj7);
arr.push(obj8);
var arrOrdered = _.sortBy(arr, function (item) {
return item; //you could implement your logic in here
});
var html = "";
_.each(arrOrdered, function(item){ html += item + "<br/>";});
document.getElementById('output').innerHTML = html;
}
</script>
</body>
</html>

function load()
{
var arr =new Array();
var obj1 = document.getElementById("txt1").value;
var obj2 = document.getElementById("txt2").value;
var obj3 = document.getElementById("txt3").value;
var obj4 = document.getElementById("txt4").value;
var obj5 = document.getElementById("txt5").value;
var obj6 = document.getElementById("txt6").value;
var obj7 = document.getElementById("txt7").value;
var obj8 = document.getElementById("txt8").value;
arr.push(obj1);
arr.push(obj2);
arr.push(obj3);
arr.push(obj4);
arr.push(obj5);
arr.push(obj6);
arr.push(obj7);
arr.push(obj8);
var arrOrdered = _.sortBy(arr, function (item) {
return item; //you could implement your logic in here
});
iterate.over(arrOrdered);
}

add a new text field every time a button is pressed

i am trying to create a bit of javascript that will create a new text field every time a button is pressed, any help would be appreciated, it seems like the javascript doesn't want to run more than once
<!DOCTYPE html>
<html>
<head>
<title>Q&A Admin Panel</title>
</head>
<body>
<h1>Q&A Admin Panel</h1>
<form action="add_question.php" method="post">
Question Type: <input type="text" id="questionType" />
Question Name: <input type="text" id="questionName" />
Question Text: <input type="text" id="questionText" />
<select id="myList" onchange="selectType()">
<option>Yes or No</option>
<option>Multiple Choice</option>
<option>Multiple Select</option>
<option>Open Response</option>
</select>
<div id='buttons'> </div>
</form>
<script type="text/javascript">
function selectType()
{
var type=document.getElementById("myList");
if(type == "Multiple Choice" or type == "Multiple Select"){
// add answer = visible
}
}
</script>
<script type="text/javascript">
var answers = 0;
function addAnswer()
{
write = document.getElementById('buttons');
write.innerHTML = write.innerHMTL + "add answer: <input type=\"text\" id=\"answer" + answers + "\" <br>";
answers = answers + 1;
}
</script>
<button onclick="addAnswer(); return false;">add answer</button>
</body>
</html>

var answers = 0,
write = document.getElementById('buttons');
function addAnswer() {
write.innerHTML += 'Add answer: <input type="text" id="answer"' + answers + '/> <br />';
answers++;
}

I faced the same problem in my college project. You can also accomplish your work as David suggested, but using innerHTML doesn't add elements to DOM and as a result, when you'll refresh the page, text fields will disappear. So for getting persistent text fields, you can use the code mentioned below:
var i = 0;
function addMore()
{
var x = document.getElementById('buttons');
var input1 = document.createElement("input");
input1.setAttribute("type","text");
input1.setAttribute("name","i" + i );
x.appendChild( input1 );
i++;
}
You can use firebug for debugging javascript things.
Thanks.

function addTextField(id){
var colors = new Array('#660000','#33ff00','#0066ff','#cc3399','#9966ff');
var container = document.getElementById(id);
var ulElement = document.createElement('ul');
container.appendChild(ulElement);
var hideLink = function(){
var firstElement = ulElement.firstChild.getElementsByTagName('a')[0];
firstElement.style.display = (ulElement.childNodes.length==1)?'none':'inline';
for(var i = 0 ; i <ulElement.childNodes.length; i++)
ulElement.childNodes[i].style.color = colors[i%5];
}
var addListElement = function(){
var liElement = document.createElement('li');
ulElement.appendChild(liElement);
var textElement = document.createElement('input');
textElement.setAttribute('type','text');
liElement.appendChild(textElement);
var deleteLink = document.createElement('a');
deleteLink.href = "#";
deleteLink.appendChild(document.createTextNode('delete'));
liElement.appendChild(deleteLink);
deleteLink.onclick = function(){
ulElement.removeChild(liElement);
hideLink();
}
hideLink();
}
addListElement();
var anchorElement = document.createElement('a');
anchorElement.href = "#";
anchorElement.appendChild(document.createTextNode('Add more'));
container.appendChild(anchorElement);
anchorElement.onclick = addListElement;
hideLink();
}
Here is the Demo
http://jsfiddle.net/mannejkumar/cjpS2/

We Keep Coding

JavaScript is the programming language of the Web.

Copying value from one input field to another input field - javascript

This is how I do for unchecking: document.getElementById("Name2").value =""; document.getElementById("Name3").value="";

Related

broken JavaScript program with no errors [duplicate]

Beginning JavaScript - displaying temperature value in Inner HTML

What is wrong with my code?

How can I load a value using html5 local storage

add a new text field every time a button is pressed

Categories

Resources