5 Replies - 9481 Views - Last Post: 11 July 2006 - 08:18 AM

#1 Spider  Icon User is offline

  • Arachnid

Reputation: 2
  • View blog
  • Posts: 769
  • Joined: 10-July 02

Dynamic form with Javascript

Posted 10 July 2006 - 10:38 AM

I'm trying to put together an expandable (and shrinkable, but that is less important) form using Javascript. I haven't really used Javascript before so I'm going at this with very little experience and I really just want some pointers towards the functions I might need.

The basic layout is that I have a text input box, with a + button after it, which will add a second input box with a unique ID. Something similar to what G-mail does with attachements when you're composing a message.

My understanding is that I will need to use <div> tags to indicate to the Javascript which bits of the page need to be edited, but I'm not really sure how you use Javascript to change the contents of a <div> tag. The only useful thing I've found is on W3Schools, which does this:

document.getElementById('txt').innerHTML=h+":"+m+":"+s



But this code replaces the whole of the content of the tag, and I can't figure out if I can change this to just edit the content, or whether I need a completely different method.

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamic form with Javascript

#2 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Dynamic form with Javascript

Posted 10 July 2006 - 10:53 AM

Edit the content? Is the div suppose to be a log or something that keeps track of something?

what are you wanting to put in the div?
Was This Post Helpful? 0
  • +
  • -

#3 Spider  Icon User is offline

  • Arachnid

Reputation: 2
  • View blog
  • Posts: 769
  • Joined: 10-July 02

Re: Dynamic form with Javascript

Posted 10 July 2006 - 11:10 AM

I'm basically wanting to be able to add extra input fields to a form dynamically.

What I said above may have been a load of rubbish though, cos I don't really know what I'm doing and haven't found any helpful resources...
Was This Post Helpful? 0
  • +
  • -

#4 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Dynamic form with Javascript

Posted 10 July 2006 - 01:10 PM

You only need one extra input area? Add the input element where you would want that form element to be when it appears and use a display: none declaration to hide it. Then use Javascript to call it when the "+" button is pressed:

document.getElementById("hidden").style.display = "block"; // or
document.getElementById("hidden").style.display = "inline";


I think you could also use CSS' :after pseudo-element with JS too so that the element is non-existent until called except that Internet Explorer 6 doesn't support it and I don't know how to call that with Javascript. You could also put a blank element such as div where the form element should be and use the non-proprietary JS equivalent of innerHTML:

document.getElementById("empty").firstChild.data = "<input>";

I think you would need a space inside the div for this to work since whitespace would be considered firstChild:

<div id="empty"> </div>
Was This Post Helpful? 0
  • +
  • -

#5 Spider  Icon User is offline

  • Arachnid

Reputation: 2
  • View blog
  • Posts: 769
  • Joined: 10-July 02

Re: Dynamic form with Javascript

Posted 10 July 2006 - 01:35 PM

View PostArbitrator, on 10 Jul, 2006 - 08:02 PM, said:

You only need one extra input area?


Nope, I need to be able to add in any number of extra input areas.

I have had some success with the following function:
function add_row() {
	div = document.createElement("div");
	document.body.insertBefore(div, null);
	div.innerHTML = "\n<input type=\"button\" onclick=\"del_row()\" value=\"-\">\n<input type=\"text\"><br>&nbsp;";
}


But when I try to place it in a specific place thusly:
function add_row() {
	end = document.getElementById("end");
	div = document.createElement("div");
	document.body.insertBefore(div, null);
	div.innerHTML = "\n<input type=\"button\" onclick=\"del_row()\" value=\"-\">\n<input type=\"text\"><br>&nbsp;";
}


It throws the Exception "Node was not found". This is a little annoying as I don't really want the new input boxes to be at the bottom of the page!

This post has been edited by Spider: 10 July 2006 - 01:36 PM

Was This Post Helpful? 0
  • +
  • -

#6 Spider  Icon User is offline

  • Arachnid

Reputation: 2
  • View blog
  • Posts: 769
  • Joined: 10-July 02

Re: Dynamic form with Javascript

Posted 11 July 2006 - 08:18 AM

I finally got there :)

the following code does what I want:
function add_row() {
	var end = document.getElementById("end");
	var parentDiv = end.parentNode;
	var div = document.createElement("div");
	div.setAttribute("id", "new");
	parentDiv.insertBefore(div, end);
	div.innerHTML = "\n<input type=\"button\" onclick=\"del_row()\" value=\"-\">\n<input type=\"text\">";
}


And I also got some working Javascript to remove specific input boxes too:
function del_row(id) {
	var child = document.getElementById(id)
	var parentDiv = child.parentNode;
	parentDiv.removeChild(child);
}


With the following HTML to start off the page:
<form>
<div id="1">
<input type="button" onclick="del_row(1)" value="-">
<input type="text"><br>
</div>
<div id="end">
<input type="button" onclick="add_row()" value="+">
</div>
</form>


Now I need to go away and work out how to make the new input boxes have appropriate ID's so that I can process the form properly. Shouldn't be too tricky though.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1