Hey everyone,

 

I am currently trying to create a form that has a button to add extra fields to it, should they be needed. I am using straight Javascript - no Jquery, and the code that i have creates the elements as it should but a second later they disappear. Does anyone know how i can stop this?

 

I have also adapted the code to change the color of text and opacity of things just to see if that worked and it does the same thing - changes colour/opacity but then goes back to normal.

 

Here is the code :

 

			function addField(element) {

			var newElem = document.createElement('input');

			newElem.innerHTML ="<input type='text' name='myInputs[]'>";

			document.getElementById(element).appendChild(newElem);

		}

 

Would greatly appreciate help

Edited July 5, 201214 yr by Renaissance-Design
Please use the code button or tags to format your code.

Your code looks fine to me. Do you have a complete example?

Thanks for the reply

 

Heres the whole thing :

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>Form</title>

 

<link rel="stylesheet" = href="style.css">

 

<script>

 

function addField(element) {

 

var newElem = document.createElement('input');

 

newElem.innerHTML ="<input type='text' name='myInputs[]'>";

 

document.getElementById(element).appendChild(newElem);

 

}

 

</script>

 

</head>

 

<body>

 

<div id="main">

 

<div id="form_area">

 

<form id='form' method="post">

 

<h4>Contact Us</h4>

 

<input type="text" name="first_name" value="First name" id="first_name">

<input type="text" name="surname" value="Surname" id="surname">

<input type="text" name="email" value="Email address" id="email">

 

<fieldset id='field_area'>

 

<input type="text" name="phone_number" value="Phone Number" id="phone_number">

 

<button id='add_field' onclick="addField('field_area')">Add</button>

<!-- <button id='remove_field'>Remv</button> -->

 

</fieldset>

 

<textarea name="Name" rows="8" cols="40"> What is your enquiry?</textarea>

 

<input type="submit" value="Send Message">

 

</form>

 

</div>

 

</div>

 

</body>

</html>

 

 

Heres the whole thing - I just tried it on jsbin.com and it causes a duplicate window to be made - i dont use it much so im not sure if thats correct, but it seems strange to me.

 

Thanks for your help.

Hello. I'm very new to this and I'm not sure I understand what it is what you want to do but...

 

function addField(element) {


document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]'>";

}

 

I commented out some lines of code, and added one line. Try this out and tell me if this is what you wanted the code to do.

Edited July 5, 201214 yr by Dream Of Sleeping

Hello. I'm very new to this and I'm not sure I understand what it is what you want to do but...

 

function addField(element) {


document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]'>";

}

 

I commented out some lines of code, and added one line. Try this out and tell me if this is what you wanted the code to do.

 

 

Bloody excellent - that is exactly what i wanted. You have made me a lot less stressed - Thankyou very much

Maybe the problem is you were trying to set the innerHTML of the input you were trying to create, rather than add to the innerHTML of the element that contained it. As I say I'm new, but that seemed to me like it could be the problem.

Edited July 5, 201214 yr by Dream Of Sleeping

Im new to it myself, if i was using jquery it would have been ok. It certainly did the trick

 

I have another problem now - When the add field button is clicked, it generates the field and i have made a button that is inside (it looks inside but its actually overlapped) so that if it is clicked, it removes the field, but at the moment it removes all of the fields and i only want it to remove the one that is clicked - how would i get that to work? Im guessing it would involve 'this' but i dont know what to target.

 

here is the code:

 

function addField(element) {

 

document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]' value=' Additional no.' class='new_field'><button class='remove_field' onclick='removeField()'>X</button>";

 

}

 

 

 

I am also haveing a problem with the positioning inside each new field, they way i have coded it generates new fields and buttons, but the buttons all stay in one place overlapping each other. for example, if i generate 4 fields, 4 buttons are generated but it only looks like one because they are all overlapping - how do i stop this?

 

Thanks very much for your help

Im new to it myself, if i was using jquery it would have been ok. It certainly did the trick

 

I have another problem now - When the add field button is clicked, it generates the field and i have made a button that is inside (it looks inside but its actually overlapped) so that if it is clicked, it removes the field, but at the moment it removes all of the fields and i only want it to remove the one that is clicked - how would i get that to work? Im guessing it would involve 'this' but i dont know what to target.

 

here is the code:

 

function addField(element) {

 

document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]' value=' Additional no.' class='new_field'><button class='remove_field' onclick='removeField()'>X</button>";

 

}

 

 

 

I am also haveing a problem with the positioning inside each new field, they way i have coded it generates new fields and buttons, but the buttons all stay in one place overlapping each other. for example, if i generate 4 fields, 4 buttons are generated but it only looks like one because they are all overlapping - how do i stop this?

 

Thanks very much for your help

 

 

You haven't included the code for your removeField() method. I'll be happy to take a look at it.

 

As for the buttons overlapping: I added the new addField method to the code you already had, and the buttons are not overlapping. Each button is next to each text input. I don't have your css file so maybe that's causing you the problem.

Thanks again for the help -

 

Here is the remove code :

 

 

function addField(element) {

 

 

document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]' value=' Additional no.'class='new_field'><button class='remove_field' onclick='removeField()'>X</button>";

 

}

 

 

 

function removeField(addField) {

 

var del = document.getElementById(element).innerHTML += "<input type='text' name='myInputs[]' value=' Additional no.' class='new_field'>";

del.removeChild();

 

}

 

 

I'll add the CSS in the next post...

/* CSS RESET - HTML5 BOILERPLATE */

 

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; }

[hidden] { display: none; }

 

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #222; }

body { margin: 0; font-size: 1em; line-height: 1.4; }

 

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }

::selection { background: #fe57a1; color: #fff; text-shadow: none; }

 

a { color: #00e; }

a:visited { color: #551a8b; }

a:hover { color: #06e; }

a:focus { outline: thin dotted; }

a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

 

q { quotes: none; }

q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

 

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }

dd { margin: 0 0 0 40px; }

nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

 

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

 

form { margin: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

 

label { cursor: pointer; }

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; }

button, input[type=button], input[type=reset], input[type=submit] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

button[disabled], input[disabled] { cursor: default; }

input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }

input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; resize: vertical; }

input:valid, textarea:valid { }

input:invalid, textarea:invalid { background-color: #f0dddd; }

 

table { border-collapse: collapse; border-spacing: 0; }

td { vertical-align: top; }

 

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

 

 

 

 

 

 

 

 

 

@media only screen and (min-width: 35em) {

 

 

}

 

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

.ir br { display: none; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { *zoom: 1; }

 

@media print {

* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }

a, a:visited { text-decoration: underline; }

a[href]:after { content: " (" attr(href) ")"; }

abbr[title]:after { content: " (" attr(title) ")"; }

.ir a:after, a[href^=javascript:]:after, a[href^=#]:after { content: ""; }

pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

thead { display: table-header-group; }

tr, img { page-break-inside: avoid; }

img { max-width: 100% !important; }

@page { margin: 0.5cm; }

p, h2, h3 { orphans: 3; widows: 3; }

h2, h3 { page-break-after: avoid; }

}

 

 

 

body {

width: 960px;

margin: 0 auto;

padding: 0 auto;

background-color: #E7EBEE;

}

 

p,a,h1,h2,h3,h4,form,input,textarea {

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

}

 

form {

width: 700px;

height: 100%;

background-color: #eee;

margin-top: 40px;

margin-left: 120px;

border: 1px solid #898989;

 

-webkit-box-shadow: 2px 3px 13px #D2DAE2;

box-shadow: 2px 3px 13px #D2DAE2;

border-radius: 5px;

background: #f7fcff; /* Old browsers */

background: -webkit-linear-gradient(top, #f7fcff 0%, #e8eff5 100%);

background: -moz-linear-gradient(top, #f7fcff 0%, #e8eff5 100%);

background: -o-linear-gradient(top, #f7fcff 0%, #e8eff5 100%);

background: -ms-linear-gradient(top, #f7fcff 0%, #e8eff5 100%);

background: linear-gradient(top, #f7fcff 0%, #e8eff5 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fcff', endColorstr='#e8eff5',GradientType=0 ); /* IE6-9 */

}

 

form h3 {

text-align: center;

color: #8797A0;

}

 

fieldset {

background-color: none;

border: none;

display: block;

}

 

form input {

margin-top: 20px;

border-radius: 4px;

border: 1px solid #898989;

font-size: 13px;

z-index: -1;

 

-webkit-box-shadow: inset 0px 1px 5px #cecece;

box-shadow: inset 0px 1px 5px #cecece;

font-weight: 200;

}

 

input[type=text]#first_name,input[type=text]#surname {

height: 35px;

width: 308px;

}

 

input#first_name {

margin-left: 25px;

margin-right: 10px;

float: left;

}

 

input#surname {

margin-left: 10px;

margin-right: 25px;

}

 

input#email {

width: 640px;

height: 35px;

margin-left: 25px;

}

 

input[type=text]#phone_number {

width: 477px;

height: 35px;

margin-left: 25px;

border-radius: 4px 0px 0px 4px;

}

 

button#add_field {

width: 160px;

height: 39px;

margin-top: 20px;

font-size: 15px;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

font-weight: 200;

color: #222222;

border-radius: 0px 6px 6px 0px;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

border-color: #e6e6e6 #e6e6e6 #bfbfbf;

border: 1px solid #aaaaaa;

 

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

background: #b9cad3; /* Old browsers */

background: -webkit-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

 

background: -moz-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: -o-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: -ms-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: linear-gradient(top, #b9cad3 0%, #8797a0 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9cad3', endColorstr='#8797a0',GradientType=0 ); /* IE6-9 */

}

 

input[type=text].new_field {

width: 300px;

height: 35px;

margin-left: 27px;

border-radius: 4px 4px 4px 4px;

float: left;

}

 

button.remove_field {

width: 20px;

height: 20px;

margin-top: 48px;

color: white;

position: absolute;

float: left;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

border: none;

 

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

 

-webkit-background-clip: padding-box;

-moz-background-clip: padding-box;

 

background-clip: padding-box; /* fix WebKit background bleed on border-radius */

-webkit-border-radius: 30px;

z-index: 999;

}

 

button.remove_field:hover {

background-color: #b72b12;

}

 

button.remove_field:active {

background-color: #ffae00;

color: black;

}

 

button#add_field:hover {

color: #fff;

}

 

button#add_field:active {

-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

}

 

textarea {

width: 640px;

margin-top: 20px;

margin-left: 28px;

font-size: 13px;

-webkit-resize: none;

-moz-resize: none;

resize: none;

border: 1px solid #898989;

 

-webkit-background-clip: padding-box;

-moz-background-clip: padding-box;

 

background-clip: padding-box; /* fix WebKit background bleed on border-radius */

-webkit-border-radius: 4px;

 

-webkit-box-shadow: inset 0px 1px 5px #cecece;

box-shadow: inset 0px 1px 5px #cecece;

}

 

input[type=submit] {

width: 640px;

margin-left: 30px;

margin-bottom: 20px;

padding: 10px;

font-size: 16px;

text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);

border-color: #e6e6e6 #e6e6e6 #bfbfbf;

border: 1px solid #aaaaaa;

 

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.05);

 

background: #b9cad3; /* Old browsers */

background: -webkit-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: -moz-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: -o-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: -ms-linear-gradient(top, #b9cad3 0%, #8797a0 100%);

background: linear-gradient(top, #b9cad3 0%, #8797a0 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9cad3', endColorstr='#8797a0',GradientType=0 ); /* IE6-9 */

}

 

input[type=submit]:hover {

color: #fff;

background-color: #e6e6e6;

}

 

input[type=submit]:active {

color: #fff;

 

-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);

}

I just had a look without the css and i can see how the buttons are positioned as you saw them - thats what i want but i want each button to look as though it was inside the newly added field. I wanted the css to apply for each button with out targeting each button individually, but couldn't find a solution.

 

Also, i would like each of the dynamically added buttons to delete the field that they are next too, and only that one. Did you know how to do that?

 

Thanks again for the help

 

 

Also, i would like each of the dynamically added buttons to delete the field that they are next too, and only that one. Did you know how to do that?

 

 

It's weird, I'm getting strange results that I just don't understand. The code was getting cluttered with all the innerHTML += statements. So I tried going back to appendChild, and still had your initial problem of the element just disappearing. And I have no idea why.

 

Also I'm getting weird reseults of passing id names to the remove method, but instead of it being the id name that gets passed, it is in the element itself. Weird!. It looks like I have lot still left to learn.

 

If you are still stuck I will come back it to tonight and have another look. It's a good learning experience for me. I have to go do something else now. Good luck though!

Ok it was bugging me too much to stay away from this.

 

One mistery solved. The reason that appendChild has not being working is because you used <button> tags, instead of <input> tags. I don't even know if button tags even exist.

 

 

I've changed the button code to this. This is how I have seen it done. Now at least appendChild works which will make the next part easier.

 

<input type="button" id='add_field' value="add" onclick="addField('field_area')"></input>

From what I've been reading, if you want to place the button inside a text field, you will have to do it with css and use relative positioning.

 

I can't get this to work. If you take a look at this code. I'm trying to pass the idName I have created for the span element to the removeElement fucntion. But it does not work. It doesn't work because it ends up not passing the id name at all.

 

If I place the idName in strings, if I try to append it as a string, or i've (as below) just stuck the name in there. I don't understand how I would do this or why this isn't working. Any ideas? it seems that the variable is out of scope when it gets called.

 

Are the no experts reading this who can help us out?

 

var idIndex = 1;

function addField(element) {

   var field = document.getElementById(element);
   var spanElement = document.createElement("span");

   var idName = "input" + idIndex;
   idIndex++;

   spanElement.setAttribute("id", idName);

   spanElement.innerHTML = "<input type='text'>";
   spanElement.innerHTML += "<input type='button' value='X' onclick='removeField(idName)'>";

  field.appendChild(spanElement);
}


function removeField(id) {
   // for some reason this is not receiving the Id name, so below code doesn't work.

   var element = document.getElementById(id);
   element.parentElement.removeChild(element);

}

 

 

Edit:

 

spanElement.innerHTML += "<input type='button' value='X' onclick='removeField(idName)'>";

 

Ok so what is happening above is it's creating html text that would try and pass a variable named idName, which would not exist when it's called. However if I put quotes around idName, it then just passes a string named "idName". What I need to figure out is how to pass a string that says what the variable idName actually equals.

Edited July 6, 201214 yr by Dream Of Sleeping