add additional fields while maintaining input content - javascript

I'm trying to make an input form with multiple fields and generate a preview of this content in a div. I would like the user to be able to add additional fields as they wish. I have the basic functionality working but anytime I "add" an additional field, the entered content of my previous fields are wiped out. Any suggestions would be greatly appreciated. I've included the relevant code below.
function addInput(){
var inpts = document.getElementById("inputs");
var inputCounter = Number(document.getElementById("inputCounter").innerHTML);
var incCount = inputCounter+1;
var currentInfo = inpts.innerHTML;
var newField = "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";
inpts.innerHTML = currentInfo + newField;
document.getElementById("inputCounter").innerHTML = incCount;
}
The call to the function looks like this...
<div style="display: none;" id="inputCounter">1</div>
<div id='inputs'>
<textarea id='1' rows="2" onblur="updatePreview()"></textarea> <div onclick="addInput()" style="display: inline-block;">XX</div><br />
</div>

innerHTML returns the HTML structure but it excludes the value property of form elements (such as textarea).
Instead, you could create a new element to hold the additional field, then append that element to inputs:
function addInput(){
var inpts = document.getElementById("inputs"),
inputCounter = Number(document.getElementById("inputCounter").innerHTML),
incCount = inputCounter+1,
div = document.createElement('div');
div.innerHTML= "<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />";
inpts.appendChild(div);
document.getElementById("inputCounter").innerHTML = incCount;
} //addInput
Working Fiddle
An alternative to creating a new element is to use insertAdjacentHTML:
function addInput(){
var inpts = document.getElementById("inputs"),
inputCounter = Number(document.getElementById("inputCounter").innerHTML),
incCount = inputCounter+1;
inpts.insertAdjacentHTML(
'beforeend',
"<textarea id=\"" + incCount + "\" rows=\"2\" onblur=\"updatePreview()\"></textarea> <div onclick=\"addInput()\" style=\"display: inline-block;\">+</div><br />"
);
document.getElementById("inputCounter").innerHTML = incCount;
} //addInput
Working Fiddle #2

Related

Remove row from form with vanilla js

I have a form I enter student info (name, email, address) and I was able to add a new row (made of three columns) using JS after I click a button. Every time a new row is created, three new columns are created with three input boxes each with its own element ID. So far so good. However, now I can't for the life of me figure out how to remove the last row that was added. Below is my code:
var student_ids = 0;
document.getElementById("studentCount").value = student_ids;
function anotherStudent(){
document.getElementById("student_info").innerHTML +=
"<div class='section colm colm4'>"+
"<input type='text' name='stud_name_" + student_ids + "'id='stud_name_" +student_ids+ "'class='gui-input' placeholder='Student name'>"+
"</div><!-- end section -->" +
"<div class='section colm colm4'>" +
"<input type='email' name='stud_email_" + student_ids + "'id='stud_email_" + student_ids + "'class='gui-input' placeholder='Email'>" +
"</div><!-- end section -->" +
"<div class='section colm colm4'>" +
"<input type='text' name='stud_address_" + student_ids + "'id='stud_address_" + student_ids + "'class='gui-input' placeholder='Address'>"+
"</div><!-- end section -->" ;
student_ids = ++student_ids;
document.getElementById("studentCount").value = student_ids ;
}
function removeStudent(){
var x = document.getElementById('stud_name_'+student_ids);
var y = document.getElementById('stud_email_'+student_ids);
var z = document.getElementById('stud_address_'+student_ids);
x.remove();
y.remove();
z.remove();
}
Edit:
You are not removing the divs, only the inputs themselves. You are also incrementing the student_ids global variable after you insert a row. This means that the removeStudent() function will always try to remove a non-existing row.
It would be better to pass the desired student_ids to removeStudent(), or manually de-increment the value.
In older environments (such as Explorer):
You cannot directly remove DOM elements from JavaScript. It's a bit unintuitive, but you have to go to the parent of that element and remove it from there:
var element = document.getElementById('stud_name_'+student_ids);
element.parentNode.removeChild(element);

How to display user input data stored in array, using HTML table

I'm kinda new to html/javascript. I wanted to store the user input value in array (already done this part) and display it into HTML table(I'm stuck at this one). When user press the button, the table will show up at the bottom.
Here's my code so far:
HTML
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<form>
<h1>Please enter data</h1>
<input id="title" type="text" placeholder="Title" />
<input id="name" type="text" placeholder="Name" />
<input id="tickets" type="text" placeholder="Tickets" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>
This is my Javascript code:
var titles = [];
var names = [];
var tickets = [];
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
var messageBox = document.getElementById("display");
function insert ( ) {
titles.push( titleInput.value );
names.push( nameInput.value );
tickets.push( ticketInput.value );
clearAndShow();
}
function clearAndShow () {
// Clear our fields
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "<tr>Titles</tr>" + titles.join(" ") + "<td></td>";
messageBox.innerHTML += "<tr>Name</tr> <td>" + names.join(" ") + "</td>";
messageBox.innerHTML += "<tr>tickets</tr> <td>" + tickets.join(" ")+ "</td>";
}
I can't display the array into the tables. I'm quite new to Javascript/HTML so any help would be appreciated. :D
As I have already commented, you will have to loop over array and compute html and set it. Your function clearAndShow will set last value only.
I have taken liberty to update your code. You should not save data in different arrays. Its better to use one array with proper constructed object.
JSFiddle
var data = [];
var titleInput = document.getElementById("title");
var nameInput = document.getElementById("name");
var ticketInput = document.getElementById("tickets");
var messageBox = document.getElementById("display");
function insert() {
var title, name, ticket;
title = titleInput.value;
name = nameInput.value;
ticket = ticketInput.value;
data.push({
title: title,
name: name,
ticket: ticket
});
clearAndShow();
}
function clearAndShow() {
// Clear our fields
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
messageBox.innerHTML = computeHTML();
}
function computeHTML() {
var html = "<table>";
console.log(data)
data.forEach(function(item) {
html += "<tr>";
html += "<td>" + item.title + "</td>"
html += "<td>" + item.name + "</td>"
html += "<td>" + item.ticket + "</td>"
html += "</tr>";
});
html += "</table>"
return html;
}
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<head>
<script class="jsbin" src=""></script>
<script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<body>
<form>
<h1>Please enter data</h1>
<input id="title" type="text" placeholder="Title" />
<input id="name" type="text" placeholder="Name" />
<input id="tickets" type="text" placeholder="Tickets" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
Please try and change your js code like below, not the most elegant but a start:
function clearAndShow () {
// Clear our fields
titleInput.value = "";
nameInput.value = "";
ticketInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "<tr>";
messageBox.innerHTML += "<td>Titles</td>";
messageBox.innerHTML += "<td>Name</td>";
messageBox.innerHTML += "<td>Tickets</td>";
messageBox.innerHTML += "</tr>";
for(i = 0; i <= titles.length - 1; i++)
{
messageBox.innerHTML += "<tr>";
messageBox.innerHTML += "<td>" + titles[i]+ "</td>";
messageBox.innerHTML += "<td>" + names[i] + "</td>";
messageBox.innerHTML += "<td>" + tickets[i]+ "</td>";
messageBox.innerHTML += "</tr>";
}
}
and your display html like so:
<table id="display"></table>
have a look at fiddle over here https://jsfiddle.net/gvanderberg/cwmzyjf4/
The data array in Rajesh's example is the better option to go for.
you deleted your last question about the numbering of authors, but I wrote a big answer to you for it. Just for you to have it :
Wow, man you have several problems in your logic.
First, you have to specify to your form not to submit when you click on one or the other submit buttons (Add a book, or Display book) :
<form onsubmit="return false;">
Second, you have to define your numbering var to 0 and use it when you want to assign a number to a book :
var numbering = 0;
Then, in your addBook function, you have to use that global numbering variable to set you no variable :
function addBook() {
numbering++; // increments the number for the books (1, 2, 3, etc)
var no, book, author;
book = bookInput.value;
author = nameInput.value;
no = numbering;
...
}
Then you have all kind of mistakes like double ";" on certain lines etc.
A huge mistake is also done on your code when you use "forEach". Notice this function only works when you use jQuery library ! You have to include it before you use it :
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
An other huge mistake you do is that your "Display" button has the id "display" and your messageBox also has this id. This is forbidden because when you want to use the element which has this ID, Javascript won't know which of the two is the good one. So rename your button id in displayAuthors :
<input type="submit" id="displayAuthors" value="Display" onclick="displayBook()" />
Now, what you also can do, is to call your displayBooks function everytime you add a new book like this :
function addBook() {
numbering++;
var no, book, author;
book = bookInput.value;
author = nameInput.value;
no = numbering;
data.push({
book: book,
author: author,
no: no
});
displayBook();
}
So I did all these things here on CodePen : https://codepen.io/liorchamla/pen/JMpoxM
The JQuery solution
Here you used the basics of Javascript (called Vanilla JS) which is very cool because you have to learn it, but I also wrote you a CodePen to show you how you could have done this with jQuery :-)
Here it is : http://codepen.io/liorchamla/pen/oxwNwd
Basicly, the javascript changed to this :
$(document).ready(function(){
var data = []; // data is an empty array
// binding the addBook button with the action :
$('#addBook').on('click', function(){
var book = {
title: $('#bookname').val(),
author: $('#authors').val(),
// note we won't use a numbering variable
};
data.push(book);
// let's automaticly trigger the display button ?
$('#displayBooks').trigger('click');
});
// binding the displayBooks button with the action :
$('#displayBooks').on('click', function(){
$('#display').html(computeHTML());
});
function computeHTML(){
// creating the table
html = "<table><tr><th>No</th><th>Book</th><th>Author</th></tr>";
// for each book in the data array, we take the element (book) and the index (number)
data.forEach(function(element, index){
// building the table row, note that index starts at 0, so we increment it to have a start at 1 if it is 0, 2 if it is 1 etc.
html += "<tr><td>" + parseInt(index++) + "</td><td>" + element.title + "</td><td>" + element.author + "</td></tr>";
})
html += "</table>";
// returning the table
return html;
}
})
You might find it complicated, but with time you will see that jQuery helps a lot !
They are lot of things we could enpower in this script but this is a good starting, don't you think ?
Cheers from Marseille, France !

Show / hide image function with remove classname

I'm using the following function to display the image on which the user clicks on in an above div.
In the event the user clicks again on the populated image (in the div), I would like to remove the image in the div and have the original image visible again.
<img id="<?php echo $id; ?>" src="img/.." url=".." name="..." onClick="changeImage(this)"/>
function changeImage(item) {
var url_img = $(item).attr('url');
var name_item = $(item).attr('name');
var item_id = $(item).attr('id');
document.getElementById('test').innerHTML += '<div style=\'display:inline-block\'><img src=' + url_img + ' url = ' + url_img + ' onClick=document.getElementById(' + item_id + ').classname=\'\'; /> ' + name_item + '</div>';
$(item).toggleClass('hideitem');
}
.hideitem is a class with display:none;
The onClick event in the function does not work (I was trying to remove the classname) and I'm not able to remove the div image when it is clicked with the onClick event.
Would anyone have an idea to fix this?
Thanks
There were some missing quotes and stuff in your code.
For this HTML:
<img id="myImgID" src="http://placehold.it/350x150" url="http://placehold.it/150x150" name="Example Dot Com" onClick="javascript:changeImage(this)" />
<div id="test">
<p>this is only a test</p>
</div>
This JS:
changeImage = function (item) {
var $item = $(item),
$test = $('#test'),
url_img = $item.attr('url'),
name_item = $item.attr('name'),
newDiv = $('<div/>').css('display', 'inline-block').text(name_item),
newImg = $('<img/>').attr({'src':url_img, 'url':url_img})
.click(function(e){$item.removeClass('hideitem')}).prependTo(newDiv);
$test.append(newDiv)
$item.toggleClass('hideitem');
}
See it in action here

Jquery Append remove the escaped quote

I've a Javascript with Jquery.
http://jsfiddle.net/P5gD7/3/
var libelle = 'tes\'te';
var id = 1;
var toAdd = "<input type='text' name='choix[" + id + "]' value='" + libelle + "' />";
$("#test").append(toAdd);
The problem is when I've a quote in "libelle" variable (i've escaped this quote), when I use append, Jquery put only tes in the "value" attribute.
I have to do with simple quote.
For info an alert(toAdd) return me the entire input with no errors.
Any ideas ?
Thanks
If you use jQuery to create the element for you through properties instead of string manipulation you can avoid these kind of problems:
var libelle = 'tes\'te';
var id = 1;
$('<input />', {
type: 'text',
name: 'choix[' + id + ']',
value: libelle
}).appendTo('#test');
Example fiddle
One approach here is to create the element, then set the value on that element. These can be chained together something like:
var libelle = "tes'te";
var id = 1;
var toAdd = "<input type='text' name='choix[" + id + "]' />";
// create the element, show and finally set the value (.val)
$(toAdd).appendTo("#test").val(libelle);
See The Fiddle Here

.nextAll function will not work when used inside a click function

Im trying to use the .nextAll option in jquery inside a checkbox listed inside modal window.. so the when the user clicks on a link and the modal window opens up, through the function .on("click") , thats when the chexkbox appears and Ive wrote a code inside the click function which alters check prop of the checkbox.
$('input[name="Company"],input[name="Country"]').live("click",function(){
if ($(this).is(':checked')){
alert("s");
$(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',true);
} else {
alert("n");
$(this).nextAll('input[name="'+this.name+'Sub"]').prop('checked',false);
}
});
<input type="checkbox" class="entityCheckboxHeader1" id="entityCheckboxHeader" name="Company">Company
<input class="modalEntityCompany" id="entity1" type="checkbox" name="CompanySub">Microsoft
<input class="modalEntityCompany" id="entity2" type="checkbox" name="CompanySub">Apple
<br />
<input type="checkbox" class="entityCheckboxHeader2" id="entityCheckboxHeader" name="Country">Country
<input class="modalEntity" id="entity3" type="checkbox" name="CountrySub">USA
<input class="modalEntity" id="entity4" type="checkbox" name="CountrySub">UK
The program works fine independly when tried in a jsfiddle or inside a new html that we create, bt it will not wrk when it is used inside a click function that I created. what could be causing the conflict?
Note:Im using .live() function for checkbox as it wont even get in to the .nextAll part when .on() is used
DYNAMIC CREATION PART
function generateTreeHTML(input) {
var html = '';
var entityNumber = 1;
var color = 663399;
html = "<ul id='tree' class='treeview-black' >";
for ( var m = 0; m < input.length; m++) {
html+="<li>";
currentEntity = input[m];
currentEntityType = currentEntity.entity;
html += "<span style='font-size:12px; font-family:Helvetica; font-weight:bold;' id='entityHeader' class='entityHeader"
+ getEntityHeader()
+ "'><input name='" + currentEntityType +"' type='checkbox' id='entityCheckboxHeader' class=\""
+ 'entityCheckboxHeader'
+ getEntityCheckboxHeader()
+ "\" />"
+ currentEntityType
+ "</span><div style='width:15px; height:10px; background-color:#"
+ colorArray[entityNumber]
+ "; float:right; margin-right:50px; margin-top:5px;'></div>";
html+="<ul>";
for ( var n = 0; n < currentEntity[currentEntityType].length; n++) {
html += "<li>";
var entityName = currentEntity[currentEntityType][n].entity;
var entityName1 = entityName.split('.').join("");
entityName1 = entityName1.split('_').join("");
entityName1 = entityName1.replace(/ /g, "");
html += "<span><input type='checkbox' key=\"" + entityName
+ "\" mapKey=\"" + currentEntityType
+ "\" categoryNumber=\"" + entityNumber
+ "\" class='modalEntity' id=\"" + 'entity' + getEntityID()
+ "\" name='" + currentEntityType + "Sub'>" + entityName + "</span>";
html += "</li>";
}
html+="</ul></li>";
entityNumber = entityNumber + 1;
html += "<div style='width:200px; border-bottom:1px solid #cccccc; height:1px;'></div>";
}
html += "</ul>";
return html;
}
The .nextAll() method only finds the next sibling elements (as stated very clearly in the doco). The structure that you are creating dynamically seems to put the related checkboxes each in their own spans inside different li elements - i.e., they are not siblings of each other or of the header checkboxes that your click handler belongs to. You can't expect the traversal methods you were using to find the elements to work for different html structures any more than driving directions from my office to my house would work to get to your house.
Try this instead:
$('input[name="Company"],input[name="Country"]').live("click",function(){
if ($(this).is(':checked')){
alert("s");
$('input[name="'+this.name+'Sub"]').prop('checked',true);
} else {
alert("n");
$('input[name="'+this.name+'Sub"]').prop('checked',false);
}
});
Which can be greatly simplified to:
$('input[name="Company"],input[name="Country"]').live("click",function(){
$('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
});
Or if you're concerned that there might be other checkboxes of the same name elsewhere in your document you could look just within the same li element that the clicked header box belongs to:
$(this).closest('li')
.find('input[name="'+this.name+'Sub"]').prop('checked',this.checked);
Give a class say checkinput to checkbox input[name="Company"] and input[name="Country"]"
$('body').delegate(".checkinput","click",function(){
if ($(this).is(':checked')){
alert("s");
$(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',true);
} else {
alert("n");
$(this).nextAll('input[name="'+$(this).attr('name')+'Sub"]').prop('checked',false);
}
});

Categories