I want to add some html data to the end of a div container.
Currently, I do it with using innerHtml:
<script language="javascript">
var addid = 0;
function addInput(id){
var docstyle = document.getElementById('addlist').style.display;
if(docstyle == 'none')
document.getElementById('addlist').style.display = '';
addid++;
var text = "<div id='additem_"+addid+"'><input type='text' size='100' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput("+addid+")' id='addlink_"+addid+"'>add more</a></div>";
document.getElementById('addlist').innerHTML += text;
}
</script>
<div id="addlist" class="alt1" style="padding:10px;">
New list items are added to the bottom of the list.
<br /><br />
</div>
The problem is that the value that was entered in the input fields is removed once another input field is added.
How can I add content without and keep the entered data?
PS: I do not use jquery.
innerHTML changes reset form elements. Instead use appendChild. See this demo http://jsfiddle.net/5sWA2/
function addInput(id) {
var addList = document.getElementById('addlist');
var docstyle = addList.style.display;
if (docstyle == 'none') addList.style.display = '';
addid++;
var text = document.createElement('div');
text.id = 'additem_' + addid;
text.innerHTML = "<input type='text' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput(" + addid + ")' id='addlink_" + addid + "'>add more</a>";
addList.appendChild(text);
}
Take a look at this http://reference.sitepoint.com/javascript/Node/appendChild
So something like
document.getElementById('addlist').appendChild(text);
Related
I want to create multiple input fields in a for-loop and assign a unique ng-model name to each field so I can use the values later.
Here is how I did it. inputmap is a map.
<script cam-script type="text/form-script">
for (let i=0;i<3;i++){
var name = "inputmap.item"+ i.toString(); // inputmap.item0, inputmap.item1, inputmap.item2, etc
document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>"
}
</script>
<div id="inputs"></div>
But when I look at the $scope.inputmap, it's empty.
When I hardcode the input fields like:
<div id="inputs">
<input type='text' ng-model='inputmap.item0' required/><br>
<input type='text' ng-model='inputmap.item1' required/><br>
<input type='text' ng-model='inputmap.item2' required/><br>
</div>
I was able to get the values I entered in the fields. I am new to HTML and any help/hints is appreciated.
First you have += on document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" and can be changed to just =
There are to ways to do this. I think if you change document.getElementById("inputs").innerHTML += "<input type='text' ng-model='" + name + "' required/><br>" to document.getElementById("inputs").innerHTML = `<input type='text' ng-model="${name}" required/><br>` then that will add it in correctly. Never done this though and might not work where you can do my second way of doing it:
for(let i = 0; i < 3; i++) {
let input = document.createElement('input') //Creates input element
let wrapper = document.getElementById('inputs') //Gets the div element
let name = `inputmap.item${i.toString()}` //Gets the name
input.setAttribute('ng-model', name) // Sets 'ng-model' attribute to name
wrapper.appendChild(input) //Sets 'wrapper' as 'input' parent
}
Hope this helps!
I am stuck with a problem. I want to add call functions based on selection in radio button. But one of radio buttons doesn't work at all (not calling the function), other is not checked when clicked. Here is my code:
function clearElement(element_id){
document.getElementById(element_id).remove();
}
function createCheck(){
if (!document.getElementById('check')){
var btn = "<button onclick=\"checkData()\" id='check'>Check</button>";
document.getElementById("added").innerHTML += btn;
}
}
function addElements(){
var added0 = "<p>Choose the filling method:</p><br>";
var added1 = "<input type=\"radio\" value='Auto' id='auto' name=\"auto_manual\">I have ID</input>";
var added2 = "<input type=\"radio\" value='Manually' id='manual' name=\"auto_manual\"> Enter data manually</input><br>";
var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete=\"on\"></input><br>";
var added5 = "<button onclick=\"fillIn()\">Continue</button>";
document.body.innerHTML += "<div id=\"added\">" + added0 + added1 + added2 + added3 + added4 + added5 + "</div>";
var f0 = document.getElementById('auto');
var f1 = document.getElementById('manual');
f0.onclick = function() { createCheck();};
f1.onclick = function() { clearSelect('check');};
}
I want it to work the following way: if a user chooses "I have ID" option, the radio button is checked and the button "Check" will be created. If "Enter data manually", the button "Check" will disappear if exists.
Could you, please, help me with it?
Update (HTML):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Demo Web App</title>
</head>
<body>
<h1>Template Creator Bot</h1> <br> <br>
<script>
...
</script>
<div id='change'>
<select name="docs" id="selectedTemplate">
<option value="Order">Order</option>
<option value="Complaint">Complaint</option>
<option value="Other">Other</option>
</select>
<button onclick="addElements()">Next</button>
</div>
</body>
</html>
It would be better if you made the button element once and just toggled its visibility on demand.
There are also better strategies to compose dynamic html on your DOM instead of using innerHTML like using <template> or creating elements with document.createElement().
By the way, addressing specifically your issue here, I made a demo that adds the button in the main addElements() routine, and two functions: showButton() and hideButton() that will be called by the click event handlers added to the two radio options.
addElements();
function showButton(){
const target = document.getElementById('check');
if (target.classList.contains('hide'))
target.classList.remove('hide');
}
function hideButton(){
const target = document.getElementById('check');
if (!target.classList.contains('hide'))
document.getElementById('check').classList.add('hide');
}
function addElements(){
var added0 = "<p>Choose the filling method:</p><br>";
var added1 = "<input type='radio' value='Auto' id='auto' name='auto_manual'>I have ID</input>";
var added2 = "<input type='radio' value='Manually' id='manual' name='auto_manual'>Enter data manually</input><br>";
var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete='on'></input><br>";
var added5 = "<button onclick='fillIn()'>Continue</button>";
var added6 = "<button class='hide' onclick='checkData()' id='check'>Check</button>";
document.body.innerHTML +=
"<div id='added'>" + added0 + added1 + added2 + added3 + added4 + added5 + added6 + "</div>";
/*
Here adding the click event listener for the two radio options..
in the rest of your generated html you used the approach of defining handlers on html
so it's not clear why here you opted to do it programmatically for the radio options..
Anyway I only slightly changed the approach using addEventListener instead.
*/
var f0 = document.getElementById('auto');
var f1 = document.getElementById('manual');
f0.addEventListener('click', function() { showButton();});
f1.addEventListener('click', function() { hideButton();});
}
.hide{
display: none;
}
input[type=radio]{
cursor: pointer;
}
<script type="text/javascript">
var i = 1;
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";
i = i + 1;
}
<?php $this->Form->input('textbox1',array(
'type' => 'textbox',
'label' => false,
'required')); ?>
<div id="div"></div>
<input type="button" value="Add" onclick="generateRow()"/>
Html For Textbox1
<div class="input textbox"><input name="data[Post][textbox1]"
required="required"type="textbox" id="PostTextbox1"/></div>
When I click on "Add" button, It generates new text box with name="[Post][textbox1][1]"
I can enter data in that box, but
Issue 1
When I again click on Add button It will reset all textbox and I have to enter those data again
Issue 2
$tbVal = $this->request->data['Post']['textbox1'];
$inn = implode(',',$tbVal);
When I use this code to implode data from textbox, it is showing only first data
Here is a working example based on the first answer and my answer:
<script type="text/javascript">
var i = 1;
function generateRow()
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "data[Post][textbox][" + i + "]");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
i = i + 1;
}
</script>
<form>
<div id="fooBar" class="input textbox">
<input name="data[Post][textbox][0]" required="required" type="textbox" id="PostTextbox1"/>
</div>
<input type="button" value="Add" onclick="generateRow()"/>
<input type="submit" >
</form>
<?php
print_r($_REQUEST);
?>
You have to use DOM manipulation javascript functions to not reset your text values and use proper name for the text boxes
you have reset all data in div document.getElementById("div") there for it reset all data in textbox.
try :
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
on button click
Regarding issue 2
This code:
d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";
have to be
d.innerHTML+="<p><input type='text' name='data[Post][textbox1][" + i + "]'>";
I have an html table with rows, in one of the cells I want to be able to insert an input text inside the cell whenever it is double clicked, and when this input is onblured I want to remove it and see it's value inside the td.
This is my code:
<td dir='ltr' id='test1' class='tLine' nowrap ondblclick='addInput(this);'>sdadfew</td>
function addInput(xxx) {
var id = xxx.id;
var value = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";
document.getElementById("input"+id).focus();
}
function closeInput(id) {
var value = document.getElementById('input'+id).value;
document.getElementById(id).innerHTML = value;
}
The problem is when I double click the input I get the text of the input inside of it.
How can I prevent this from happening? How can I resolve this issue?
UPDATE:
Inside the input I see this text:
<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>
Sorry for misunderstanding, this is the pure javascript version
javascript code
function closeInput(elm) {
var td = elm.parentNode;
var value = elm.value;
td.removeChild(elm);
td.innerHTML = value;
}
function addInput(elm) {
if (elm.getElementsByTagName('input').length > 0) return;
var value = elm.innerHTML;
elm.innerHTML = '';
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('value', value);
input.setAttribute('onBlur', 'closeInput(this)');
elm.appendChild(input);
input.focus();
}
html code
<table>
<tr>
<td dir="ltr" id="test1" class="tLine" nowrap ondblclick="addInput(this)">sdadfew</td>
</tr>
</table>
jquery version still at http://jsfiddle.net/ZLmgZ/
Please have a look at this link
I have added some code on your function.
function addInput(xxx) {
xxx.setAttribute("ondblclick","return false");
var id = xxx.id;
var value = document.getElementById(id).innerHTML;
document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";
document.getElementById("input"+id).focus();
}
Let me know if its work for you.
I am trying to build a little resume builder. I want the user to be able to enter any number of phone numbers. However, the appendChild() is not working as expected. Actually, it's not working at all. It does nothing. Any ideas?
HTML:
<div id="phoneNumbers">
<?php
if(isset($_SESSION['phoneNumber'])){
for($i = 0; $i<sizeof($_SESSION['phoneNumber']); $i++){
echo "<input type=\"text\" size=\"20\" name = \"phoneNumber[".$i."]\"
value=\"".$_SESSION['phoneNumber'][$i]."\" />
<br />";
}
}
else{
?>
<input type="text" size="20" name = "phoneNumber[0]"
value="" />
<br />
<?php
}
?>
</div>
<input type="button" value="Add another phone number" onclick="addPhoneNumber()">
Javascript:
var numberOfPhoneInputs = 1;
function addPhoneNumber()
{
// Found out the following doesn't work as expected...
// var newPhoneNumberInput = "<input type=\"text\" size=\"20\" name = \"phoneNumber[" +
// numberOfPhoneInputs +"]\" value=\"\" />" +
// "<br />"
// document.getElementById("phoneNumbers").innerHTML += newPhoneNumberInput;
var div = document.getElementByID("phoneNumbers");
var newPhoneNumberInput = document.createElement('input');
newPhoneNumberInput.setAttribute('type', 'text');
newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
newPhoneNumberInput.setAttribute('size', '20');
newPhoneNumberInput.setAttribute('value', '');
div.appendChild(newPhoneNumberInput);
numberOfPhoneInputs ++;
}
document.getElementByID needs to be document.getElementById
This error should show in your console.
You need to return false; from the click handler to prevent the button's default action of submitting the page.
you need to make these changes ...
change document.getElementByID("phoneNumbers"); to document.getElementById("phoneNumbers");
(optional) It will be good if you change var div to var phoneNumbersDiv or something
fiddle example : http://jsfiddle.net/v8rF3/
Updated code:
var numberOfPhoneInputs = 1;
function addPhoneNumber(){
var div1 = document.getElementById("phoneNumbers");
var newPhoneNumberInput = document.createElement('input');
newPhoneNumberInput.setAttribute('type', 'text'); newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
newPhoneNumberInput.setAttribute('size', '20');
newPhoneNumberInput.setAttribute('value', '');
div1.appendChild(newPhoneNumberInput);
numberOfPhoneInputs ++;
}