8 Replies - 1211 Views - Last Post: 03 September 2011 - 05:23 PM

#1 itaprz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-April 10

Problem with javascript dynamic form

Posted 01 September 2011 - 04:08 AM

Hey there, i'm now working on kind of invoice form which in it the user can add as much input field as he wants.


The problem is that after adding a new input field - the content in the other fields is deleted.
Code:

function addInput() {


var total="<table border='1' ><tr width='2000'><td><input type='text' value='' name='field[]' size='102' /></td>";
var price="<td width='40'><input type='text' value='0' name='field[]'     /></td>" ; 
var weight="<td width='40'><input type='text' value='' name='field[]'    /></td>" ;
var quantity="<td width='40'><input type='text' value='' name='field[]'/></td></tr></table" ;


document.getElementById('inputLine').innerHTML +=total+price+weight+quantity;
}



Any ideas and suggestions for overcoming this annoying obstacle ?
Thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with javascript dynamic form

#2 beastmb  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 06-January 11

Re: Problem with javascript dynamic form

Posted 01 September 2011 - 04:58 AM

Where do you invoke your function? Maybe the problem is with the "id" attribute of the HTML tag. From what I can see you are using document.getElementById to change only one tag with id="inputLine". Maybe that's why it is deleting other inputs.

I'm new to the javascript myself, so I'm basing this on my experience in non web programming. Please tell if it helps in any way.

Good luck!
Was This Post Helpful? 0
  • +
  • -

#3 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: Problem with javascript dynamic form

Posted 01 September 2011 - 06:03 AM

The problem is line 10. You're actually replacing not just the values from the input fields but everything within the element inputLine.

Javascript has the following functions which will be needed to accomplish this:


When using these functions you must keep in mind the structure of your DOM. From the looks of it you're trying to add a new TD and INPUT element. Basically what you'll need to do is:
  • Create a TD element.
  • Set the TD element's attributes (width).
  • Create an INPUT element.
  • Set the INPUT element's attributes (type, value, name).
  • Append the INPUT element to the TD element.
  • Append the TD element to TR element.
    P.S. You may want to add an id attribute to your TR element so that you can simply do this to add your new TD. document.getElementById('tr_element_id').appendChild(my_td_element_here);

Was This Post Helpful? 1
  • +
  • -

#4 X-spert  Icon User is offline

  • D.I.C Head

Reputation: 7
  • View blog
  • Posts: 56
  • Joined: 25-August 11

Re: Problem with javascript dynamic form

Posted 01 September 2011 - 06:15 AM

Hi,

I made an simple example for adding a new input with out deleting the previous value you entered.
Try this:
<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script>
			$(function(){
				$("button").live('click',function(){
					$(".news").after("<input type='text'/><br /><br />");
				});
			});
		</script>
		<style>
			input, button {
				border: 0px;
				background-color: #333;
				color: grey;
				font-size: 10px;
			}			
			input {
				width: 160px;
				height: 20px;
			}
			button{
				height: 20px;
			}
			.newsletter {
				width: 200px;
				height: 25px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div class="newsletter">
			<input type="text" name="mail" class="mail" />
			<button type="button">OK</button>
		</div>
		<br />
		<div class="news"></div>
	</body>
</html>


Good Luck! :)
Was This Post Helpful? 0
  • +
  • -

#5 itaprz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-April 10

Re: Problem with javascript dynamic form

Posted 01 September 2011 - 04:05 PM

codeprada and X-pert thanks a lot.

Any other suggestions ?
Was This Post Helpful? 0
  • +
  • -

#6 itaprz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-April 10

Re: Problem with javascript dynamic form

Posted 01 September 2011 - 04:21 PM

View Postcodeprada, on 01 September 2011 - 06:03 AM, said:

The problem is line 10. You're actually replacing not just the values from the input fields but everything within the element inputLine.

Javascript has the following functions which will be needed to accomplish this:


When using these functions you must keep in mind the structure of your DOM. From the looks of it you're trying to add a new TD and INPUT element. Basically what you'll need to do is:
  • Create a TD element.
  • Set the TD element's attributes (width).
  • Create an INPUT element.
  • Set the INPUT element's attributes (type, value, name).
  • Append the INPUT element to the TD element.
  • Append the TD element to TR element.
    P.S. You may want to add an id attribute to your TR element so that you can simply do this to add your new TD. document.getElementById('tr_element_id').appendChild(my_td_element_here);



Hey, thanks for the answer.
I've tried using this method and i'm now handling two more issues:
var openTable=document.createElement("table");
openTable.setAttribute("border","2");

var openTr=document.createElement("tr");
var openTd=document.createElement("td");

var tdInput=document.createElement("input") ;
tdInput.setAttribute("type","text");
tdInput.setAttribute("value","");
tdInput.setAttribute("name","field[]");

openTd.appendChild(tdInput);
openTr.appendChild(openTd);
openTr.appendChild(openTd);
openTr.appendChild(openTd);
openTr.appendChild(openTd);
openTable.appendChild(openTr);
var container = document.getElementById ("inputLine");
container.appendChild (openTable);



The first one is :
openTr.appendChild(openTd);
openTr.appendChild(openTd);
openTr.appendChild(openTd);
openTr.appendChild(openTd);

doesn't create 4 new input fields in a td, but only one.

The other problem is that it seems like the new nodes doesn't "attach" the end of the container div because after adding new fields they are extremly far from the div.

Thanks in advance
Was This Post Helpful? 0
  • +
  • -

#7 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: Problem with javascript dynamic form

Posted 02 September 2011 - 07:13 AM

It's good to see you're making an effort. The problem is you've only appended the tdInput to openTd once.

You've got the right idea but you're adding an entire table instead of a new row (TR) to the existing table.

Consider this...
You should be able to follow from the comments.
<html><head><script>
var append = function() {
	//store our table
	var mytable = document.getElementById('mytable');
	
	//create elements here
	var tr = document.createElement('tr');
	var td = document.createElement('td');
	var input = document.createElement('input');
	
	//set attributes for our input element
	input.setAttribute('type', 'text');
	input.setAttribute('name', 'input[]');
	
	td.appendChild(input); //add the input element to the td
	tr.appendChild(td); //add the td element to the tr
	mytable.appendChild(tr); //add the tr element to the present table
}

//when the document has finished loading run the following function
window.addEventListener('load', function() {
	//register our append function from above with our button's click event
	document.getElementById('appendInput').addEventListener('click', append, false);
}, false);
</script></head>
<body>
<table id='mytable'>
<tr><td><input type="text" name='input[]'></td></tr>
</table>
<button id='appendInput'>Add</button>
</body></html>


Was This Post Helpful? 0
  • +
  • -

#8 itaprz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 27
  • Joined: 16-April 10

Re: Problem with javascript dynamic form

Posted 02 September 2011 - 04:57 PM

The problem is that i have to create about 8-9 new diffent elements of td which contains input,
and doing it with setting attributes per each one seems too messy.

Isn't there any option to create to use document.createElement for creating the intire element in "one shot"?

Thanks in advance
Was This Post Helpful? 0
  • +
  • -

#9 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Re: Problem with javascript dynamic form

Posted 03 September 2011 - 05:23 PM

You could simply place your code in a loop. Your input elements appear to follow the same pattern so it's workable.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1