I have a requirement in which I had to add a duplicate of the existing fieldset in a form. I'm able to achieve the cloning process successfully. But I'm not able to change the name and id of the filedset elements. It is the same as the first fieldset but I want it to be with a different name and id to differentiate it(even adding a number at the end would be fine). Below are my js and fieldset.
<div id="placeholder">
<div id="template">
<fieldset id="fieldset">
<legend id="legend">Professional development</legend>
<p>Item <input type ="text" size="25" name="prof_itemDYNID" id ="prof_item_id"/><br /></p>
<p>Duration <input type ="text" size="25" name="prof_durationDYNID" id="prof_duration_id" /><br /></p>
<p>Enlargement <label for="enlargement"></label><p></p>
<textarea name="textareaDYNID" cols="71" rows="5" id="prof_enlargement">
</textarea></p>
<p><input type="button" value="Add new item" id="add_prof" onclick="Add();" /></p>
</fieldset>
</div>
</div>
function Add() {
var oClone = document.getElementById("template").cloneNode(true);
document.getElementById("placeholder").appendChild(oClone);
}
Also, this is just a sample fieldset and it will be different as well. I heard that this can be done using regex but not sure how to do it. Please help.
Not sure this could be achieve using regex, but somewhat following code should work...
var copyNode = original.cloneNode(true);
copyNode.setAttribute("id", modify(original.getAttribute("id")));
document.body.appendChild(el);
Here comes the best(as per my assumption) answer to the above problem..
function addMe(a){
var original = a.parentNode;
while (original.nodeName.toLowerCase() != 'fieldset')
{
original = original.parentNode;
}
var duplicate = original.cloneNode(true);
var changeID= duplicate.id;
var counter = parseInt(changeID.charAt(changeID.length-1));
++counter;
var afterchangeID = changeID.substring(0,changeID.length-1);
var newID=afterchangeID + counter;
duplicate.id = newID;
var tagNames = ['label', 'input', 'select', 'textarea'];
for (var i in tagNames)
{
var nameChange = duplicate.getElementsByTagName(tagNames[i]);
for (var j = 0; j < nameChange.length; j++)
{if (nameChange[j].type != 'hidden'){
var elementName = nameChange[j].name;
var afterSplitName = elementName.substring(0,elementName.length-1);
nameChange[j].name = afterSplitName + counter;
var elementId = nameChange[j].id;
var afterSplitId = elementId.substring(0,elementId.length-1);
nameChange[j].id = afterSplitId + counter;
}
}
}
insertAfter(duplicate, original);
}
function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
Related
I am trying here to add a class and an id to the elements that will be created (div or section) ,
the problem is when I tried to make a variable that contains the elements that will be created but the code didn't work
let numberOfElements = document.getElementsByTagName("input")[0].value;
document.getElementsByTagName("input")[0].onchange = function () {
numberOfElements = document.getElementsByTagName("input")[0].value;
}
///
let theTextInput = document.getElementsByTagName("input")[1].value;
document.getElementsByTagName("input")[1].onchange = function () {
theTextInput = document.getElementsByTagName("input")[1].value
}
let theSubmit = document.getElementsByName("create")[0];
document.forms[0].onsubmit = function (e) {
// stop submitting
e.preventDefault();
};
theSubmit.onclick = function () {
if (document.getElementsByTagName("select")[0].value === "Div") {
for (let i = 1; i <= numberOfElements; i++) {
return document.body.appendChild(document.createElement("div")).innerHTML = theTextInput;;
}
} else if (document.getElementsByTagName("select")[0].value !== "Div"){
for (let i = 1; i <= numberOfElements; i++) {
return document.body.appendChild(document.createElement("section")).innerHTML = theTextInput;;
}
}
};
<body>
<form action="">
<input type="number" name="elements" class="input" placeholder="Number Of Elements" value="1"/>
<input type="text" name="texts" class="input" placeholder="Elements Text" />
<select name="type" class="input" >
<option value="Div">Div</option>
<option value="Section">Section</option>
</select>
<input type="submit" name="create" value="Create" />
<div class="results"></div>
</form>
<!-- /////////// -->
<script src="DOM.js"></script>
</body>
First of all, you can use variable for created element and update whatever property/attribute required on that variable. At the same time remove the return on creating elements to continue create the rest. The return will stop once first element created:
const divElm = document.createElement('div');
Now, you can modify that element as required then add to the DOM:
divElm.innerHTML = theTextInput;
divElm.classList.add('new-class');
document.body.append(divElm);
Your code can be simplified by getting the required number and text values from inputs only when you need to create the elements. The inputs change events aren't required. Just merge the submit and click events into a single one, then add the get required values inside it:
document.forms[0].onsubmit = function (e) {
// stop submitting
e.preventDefault();
const numberOfElements = document.getElementsByTagName("input")[0].value;
const theTextInput = document.getElementsByTagName("input")[1].value;
if (document.getElementsByTagName("select")[0].value === "Div") {
for (let i = 1; i <= numberOfElements; i++) {
const divElm = document.createElement('div');
divElm.innerHTML = theTextInput;
divElm.classList.add('new');
document.body.append(divElm);
}
} else if (document.getElementsByTagName("select")[0].value !== "Div") {
for (let i = 1; i <= numberOfElements; i++) {
// Same code as above but with section
...
}
}
};
Even with that, there's still room for improvement. So, try to split your statements into multiple lines. First, store queried elements into variables/arrays then use them to manipulate the element. That will also reduce the number of times you query/get those elements from the DOM
Would I be able to add a remove button to replace the add button as of the image below and remove the values in that row from the array object that I have declared whenever I remove a certain row?
Image of the html (Partly)
Before Clone
After Clone
Desired Result
Html page
<div id="selections">
<div class="form-group row controls selection">
<label for="selection01" class="col-sm-2 col-form-label">Selection Pair</label>
<div class="col-sm-2">
<select class="form-control selection01" id="selection010" placeholder="Selection 01" onchange="addNewSelection()"></select>
</div>
<div class="col-sm-2">
<select class="form-control selection02" id="selection020" placeholder="Selection 02" onchange="addNewSelection()"></select>
</div>
<div class="col-sm-2">
<input type="number" min="0.00" max="10000.00" step="1.00" class="form-control" id="productQuantity0" placeholder="Quantity">
</div>
<div class="col-sm-2">
<input type="button" class="btn btn-success" id="addSelection" value="Add Selection" onclick="addNewSelectionPair()"></button>
</div>
</div>
</div>
Script
function addNewSelectionPair() {
// Get all selections by class
var selection = document.getElementsByClassName('selection');
// Get the last one
var lastSelection = selection[selection.length - 1];
// Clone it
var newSelection = lastSelection.cloneNode(true);
// Update the id values for the input
newSelection.children[1].children[0].id = 'selection01' + selection.length;
newSelection.children[2].childrne[0].id = 'selection02' + selection.length;
newSelection.children[3].children[0].id = 'productQuantity' + selection.length;
// Add it to selectionss
document.getElementById('selections').appendChild(newSelection)
}
function getValues() {
// Get all selections by class
var selections = document.getElementsByClassName('selection');
var values = [];
for(var i = 0; i < selections.length; i++) {
// Add the values into the array
values.push([
document.getElementById('selection01' + i).value,
document.getElementById('selection02' + i).value
document.getElementById('productQuantity' + i).value
]);
}
return values;
}
This script will duplicate the last row of inputs. It will also collect the inputs and store their values in a 3d array to process.
function addSection() {
//Get all sections by class
var sections = document.getElementsByClassName('section');
//Get the last one
var lastSection = sections[sections.length - 1];
//Clone it
var newSection = lastSection.cloneNode(true);
//Add it do sections
document.getElementById('sections').appendChild(newSection);
//Recalucate the Ids for the removal
//Ids all get shifted after adding or removing a section
calcRemovalIds();
}
function getValues() {
//Get all inputs by class
var sectionsOne = document.getElementsByClassName('section01');
var sectionsTwo = document.getElementsByClassName('section02');
var values = [];
//Loop the inputs
for(var i = 0; i < sectionsOne.length; i++) {
//Add the values to the array
values.push([
sectionsOne[i].value,
sectionsTwo[i].value
]);
}
return values;
}
function removeSection(id = undefined) {
//Get all sections by class
var sections = document.getElementsByClassName('section');
//If there is only one row left, just skip
if (sections.length == 1) return true;
//If not id was given, remove the last row
if (id == undefined) id = sections.length - 1;
//Get the last one
var lastSection = sections[id];
//Remove it
lastSection.parentNode.removeChild(lastSection);
//Recalucate the Ids for the removal
//Ids all get shifted after adding or removing a section
calcRemovalIds();
}
function calcRemovalIds() {
var btns = document.getElementsByClassName('button');
for (var i = 0; i < btns.length; i++) {
//Check if its the last button
if (i + 1 == btns.length) {
//Make it a addSection button
btns[i].innerHTML = '+';
btns[i].setAttribute('onclick', 'addSection()');
} else {
//Make is a removeSection button
btns[i].innerHTML = '-';
btns[i].setAttribute('onclick',
'removeSection(' + i +')'
);
}
}
}
<div>
<div>
<h2>Product</h2>
<input id="product" placeholder="Product" />
</div>
<div id="sections">
<div class="section">
<input class="section01" placeholder="Section One" />
<input class="section02" placeholder="Section Two" />
<button class="button" onclick="addSection()">+</button>
</div>
</div>
</div>
<button onclick="
document.getElementById('values').innerHTML = JSON.stringify(getValues());
">Get Values</button>
<div id="values"></div>
getting no errors but trying to loop through all the inputs and add them all to the total (var = paidTotal). The first input works but the rest don't when others are added with an add button. Something wrong with the loop?
$(document).ready(function() {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" id="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function(e) {
e.preventDefault();
var myNode = document.getElementById("userNumbers");
i=myNode.childNodes.length - 1;
if(i>=0){
myNode.removeChild(myNode.childNodes[i]);
x--;
}
});
});
function peoplePaid() {
var checkTotal = document.getElementById('check').value;
var personsCheck = document.getElementById('personsCheck').value;
var paidTotal = document.getElementById('paidTotal');
for(var i = 1; i < personsCheck.length; i+=1){
personsCheck[i] += paidTotal;
}
paidTotal.innerHTML = checkTotal - personsCheck;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$ <input type="text" id="check" value="" />
<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>
<div id="userNumbers">
<div class="">
<input type="text" id="personsCheck" name="person">
</div>
<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
<h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>
make it as class
<input type="text" class="personsCheck" name="person">
and access it by
var personsCheck = document.getElementsByClassName('personsCheck');
ids have to be unique. You'll only get one element from document.getElementById().
Try using a class instead, something like
var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
and use document.getElementsByClassName('persons') to get an array of all of the input fields that have that class.
Your code logic is not something what you want to achieve.
I can not find any logic to use the input element with id=personsCheck.
First of all, you are appending input element with same id again and again which is invalid, because in a document id attribute must be unique. Use class attribute instead.
To get the total you can first get the elements with querySelectorAll(), theb use forEach() to loop through all of them to add one by one.
$(document).ready(function() {
var maxFields = 20;
var addButton = $('#plusOne');
var deleteButton = $('#minusOne');
var wrapper = $('#userNumbers');
var fieldInput = '<div><input type="text" name="persons" class="persons"/></div>';
var x = 1;
$(addButton).click(function () {
if (x < maxFields) {
x++;
$(wrapper).append(fieldInput);
}
});
$(deleteButton).click(function(e) {
e.preventDefault();
var myNode = document.getElementById("userNumbers");
i=myNode.childNodes.length - 1;
if(i>=0){
myNode.removeChild(myNode.childNodes[i]);
x--;
}
});
});
function peoplePaid() {
var checkTotal = Number(document.getElementById('check').value);
var persons = document.querySelectorAll('.persons');
var personsCheck = Number(document.getElementById('personsCheck').value)
var paidTotal = document.getElementById('paidTotal');
var total = 0;
persons.forEach(function(p){
total += Number(p.value);
});
paidTotal.textContent = checkTotal - total;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$ <input type="text" id="check" value="" />
<button type="button" id="plusOne">+</button>
<button type="button" id="minusOne">-</button>
<div id="userNumbers">
<div class="">
<input type="text" id="personsCheck" name="person">
</div>
<button onclick="peoplePaid()">Calculate</button>
<!--Paid Amount-->
<div>
<h3>Paid Amount: <span id="paidTotal"></span></h3>
</div>
I have A Form in HTML. Here's my Code:
<div id="format">
<form id="myForm" onsubmit="myForm(event)">
<b>Name:</b></br>
<input type="text" name="name" id="name" required="required" ></input></br>
<b>Phone Number:</b></br>
<input type="phone" name="phone" id="phone" required="required" ></input></br>
<b>Birthday:</b></br>
<input type="date" name="bday" id="bday" required="required" ></input></br>
<b>Email:</b></br>
<input type="email" name="email" id="email" required="required" ></input></br>
<b>Password:</b></br>
<input type="password" name="pWord" id="pWord" required" ></input></br>
<button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>
</form>
<div id="sample"></div>
</div>
Here's my Javascript code. In this code, when I trigger the submitted button from html, it will display the info of the user and append a div for each submitted info of the users.
var data = [];
var i, item;
function myForm(event){
event.preventDefault();
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var bday = document.getElementById("bday").value;
var email = document.getElementById("email").value;
var pWord = document.getElementById("pWord").value;
var age = document.getElementById("bday").value;
var ageValue;
var Bdate = document.getElementById("bday").value;
var Bday = +new Date(Bdate);
ageValue = ~~ ((Date.now() - Bday) / (31557600000));
var theBday = document.getElementById("age");
theBday.innerHTML = ageValue;
var userObject = {
name: name,
phone: phone,
bday: bday,
email: email,
pWord: pWord,
ageValue: ageValue,
};
data.push(userObject);
document.getElementById("sample").innerHTML = ""; //Prevents duplicate
for (var i=0 ; i <data.length ; i++){
var theDiv ;
var container ;
var button;
theDiv = document.createElement( "div" );
button = document.createElement( "button");
button.setAttribute("id", "remove");
button.remove(sample);
theDiv.style = "background-color:pink; border-style:solid; margin:1%;";
for (item in data[i]) {
var x = item + ":" + data[i][item] + "</br>" ;
theDiv.innerHTML += item + ":" + data[i][item] + "</br>" ;
}
button.innerHTML += "Remove";
button.style = "background-color:maroon; color:white;";
container = document.getElementById( "sample" );
container.appendChild( theDiv );
theDiv.appendChild (button);
}
console.log(data);
}
I want to to create a button for each appended div. The button will have the function of removing the entire div where the button belong.
A reasonably simple algorithm to correctly remove objects from the list is to provide a data- attribute value on each remove botton that gives its original index in the data array. (The attribute name used below is data-index).
Then take the inline code that adds objects and turn it into three functions to
(re-)draw all objects held in the data array.
add a single object to data and redraw all objects.
remove an object from the data array (coded as a remove button onclick handler) and redraw all objects.
The code already redraws all object when adding a new object is added, so redrawing everything when removing an object keeps it on the same level of simplicity.
Example code for simplified form:
"use strict";
var data = [];
function myFormData(event){
// halper functions
function addData( userObject) {
data.push(userObject);
redrawList();
}
function removeData( event) {
var index = this.getAttribute("data-index");
data.splice( index,1);
redrawList();
}
function redrawList() {
var container = document.getElementById( "sample" );
container.innerHTML = ""; // reset list displayed on page
for (var index=0 ; index <data.length ; index++){
var theDiv = document.createElement( "div" );
var divHTML = "";
var button = document.createElement( "button");
var userObject = data[index];
for( var item in userObject) {
if( !userObject.hasOwnProperty( item)) {
continue; // ignore inherited properties
}
divHTML += item + ":" + userObject[item] + "</br>" ;
}
theDiv.innerHTML = divHTML;
theDiv.style = "background-color:pink; border-style:solid; margin:1%;";
button.type="button";
button.setAttribute("data-index", index);
button.innerHTML = "remove";
button.style = "background-color:maroon; color:white;";
button.onclick=removeData;
theDiv.appendChild (button);
container.appendChild( theDiv );
}
}
// handle form submit event to add an event
event.preventDefault();
// cut down form:
var name = document.getElementById("name").value;
var userObject = {
name: name
};
addData( userObject);
// console.log(data); // not used in code example
}
<div id="format">
<form id="myForm" onsubmit="myFormData(event);">
<b>Name:</b></br>
<input type="text" name="name" id="name" required="required" ></input></br>
<button type="submit" name="submit" id="submit" value="Submit"
onsubmit="myFormData(event)" >Submit</button>
</form>
<div id="sample">
</div>
</div>
Note the code uses getAttribute("data-index") in case target browser support for element.dataset is unknown or absent. Function names myForm and myData were changed to myFormData as I presume they are the same function.
Probable issue: the existing code comment that clearing the sample list prevents duplicates is wrong. In the example code, clicking the submit button multiple times adds the same user. You could add a test to check for duplicate email addresses when adding a user to the list, but such code is outside the scope of this question. You may also wish to consider resetting the form after adding data to the "sample" list.
check the fiddler, i have implemented with a single value 'name'.
var data = [];
var i, item;
function myForm(event){
event.preventDefault();
var name = document.getElementById("name").value;
var userObject = {
name: name
};
data.push(userObject);
document.getElementById("sample").innerHTML = ""; //Prevents duplicate
for (var i=0 ; i <data.length ; i++){
var theDiv ;
var container ;
var button;
var index;
theDiv = document.createElement( "div" );
button = document.createElement( "button");
index = document.createElement("input");
index.setAttribute('hidden', 'true');
button.setAttribute("id", "remove");
button.setAttribute("onclick", "removeItem(this)");
for (item in data[i]) {
var x = item + ":" + data[i][item] + "</br>" ;
theDiv.innerHTML += item + ":" + data[i][item] + "</br>" ;
index.value += i;
}
button.innerHTML += "Remove";
container = document.getElementById( "sample" );
container.appendChild( theDiv );
theDiv.appendChild (button);
theDiv.appendChild(index);
}
}
function removeItem(event){
let el = event;
let index = el.parentNode.lastElementChild.value;
el.parentElement.remove();
data.splice(index,1);
}
<div id="format">
<form id="myForm" onsubmit="myForm(event)">
<b>Name:</b>
<input type="text" name="name" id="name" required="required" >
<button type="submit" name="submit" id="submit" value="Submit" onsubmit="myData()" >Submit</button>
</form>
<div id="sample"></div>
</div>
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/