Add a specific number of input fields - javascript

I'm sure this is a simple mistake on my end but I cannot figure it out. I want users to be able to enter a number in a form field, click a button, then that many fields will be created. Here is my HTML and JavaScript so far. The removeChild works but it will not add fields:
<body>
<script language="javascript">
function addFields(){
var numFields = document.getElementById("numParts").value;
var theContainer = document.getElementById("partsList");
//document.write(numFields);
while (theContainer.hasChildNodes()) {
theContainer.removeChild(theContainer.lastChild);
}
for(i=0;i<numFields;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "participant" + i;
theContainer.appendChild("input");
theContainer.appendChild(document.createElement("br"));
}
}
</script>
<form name="enterFields">
<input type="text" id="numParts" />
<input type="button" value="Add" onClick="addFields();" />
<div id="partsList">
<input type="text" />
</div>
</form>
</body>

The problem is that when you try to add the input with appendChild you are specifying a string, when you should be passing the actual element.
This is what you want (note the lack of quotes):
theContainer.appendChild(input);
Here is a working example

Related

Update <input> value onchange

I have bunch of inputs like:
<input />
<input />
<input />
and a button which ads extra input
<button>Add Input</button>
The issue is that when a user put the text in the input(s) and add
additional input afterwards (i.e. press Add Input) the entered text in old inputs disappears.
JSFiddle:
<div id="inputs"></div>
<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>
So I decided to update <input> value attribute. I have tried with onchange but had no luck.
The code with errors and trials is super simple and looks like:
function change_value(el) {
document.getElementById('some-id').value = el.value
}
<input id="some-id" value="${this.value}" onchange="change_value(this)" />
Will be grateful for any suggestions about how to keep <input value up-to-date with user text.
It depends on what content you want to update. You can find a snippet below, that works oninput and updates the textContent of a span.
const input = document.getElementById('some-id')
const display = document.getElementById('updated')
input.addEventListener('input', function(e) {
display.textContent = this.value
})
<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>
EDIT
A new snippet may clear things up a bit.
const btnAdd = document.getElementById('add')
btnAdd.addEventListener('click', function(e) {
var input = document.createElement('input');
input.type = "text";
document.getElementById('inputs').appendChild(input)
})
<div id="inputs"></div>
<button id="add">Add Input</button>
Use createElement() instead of innerHTML.
Try using innerHtml like this
document.getElementById('some-id').innerHtml instead of value
https://www.w3schools.com/js/js_htmldom_html.asp
Actually, it is not possible this way, maybe with some tricks like with any change store the value and create new input with the new value or change the innerHtml, maybe it works.

Showing more form inputs on selection

So I am trying to create a bit of a listing page. So basically they enter the details about a product. A button below says "Add another product".
How would I go about making it so when someone clicks the button, it shows another set of html <input>?
you can use jQuery to append an input on click:
HTML
<div class="container">
<input type="text"/>
</div>
<button>ADD</button>
JS
$("button").click(function(){
$(".container").append("<input type='text'/>");
});
EXAMPLE 1
OR
with plain javascript:
HTML
<div id="container">
<input type="text"/>
</div>
<button onclick="add()">ADD</button>
JS
function add(){
var newInput = document.createElement("input");
newInput.type = "text";
document.getElementById("container").appendChild(newInput);
}
EXAMPLE 2

Take input value and display in another div

I cant for the life of me figure out why the following is not working. I took if from the W3school example here.
Basically I want to take the value from the input text when it changes and modify another div to include the value. I only want the div to show the new value, but I do want it to change it each time so I figured the onchange was the way to go.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + x.value;
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname" onchange="myFunction()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<div id="divID"></div>
</body>
</html>
Thanks in advance for all the help on this one.
You have 2 problems, first is that x is undefined.
second you should use another trigger for this for this to happen each time.
try this out:
function myFunction()
{
var input = document.getElementById('fname')
var div = document.getElementById('divID');
div.innerHTML = div.innerHTML + input.value;
}
and change your html to:
<input type="text" id="fname" onkeypress="myFunction()">
x is undefined in your function, it should be document.getElementById('fname').
And if you want to change the div each time you press the key, use onkeyup or onkeypress instead of onchange.
You may change x.value to document.getElementById("fname").value, if I understand your question correctly.
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
</form>
<div id="display"></div>
Ok, so check this out - http://jsfiddle.net/2ufnK/2/
The issue is that you need to define x here,
var x = document.getElementById("fname");
x now references to the html object.
Then you can just call the, ".value", method to get its text. Then everything else works the way you've written it.

insert text to selected Textbox use Javascript

I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>

Getting rid of Value attribute of a textBox when using clone method in jQuery

I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');

Categories