Form variables vs. modified form 1

Csanad · Jul 25, 2007

Hello there!

I have a simple form, buttons are not functional yet with the exception of "Add a Dependant Item" button:

http://www.steinrogan.com/SecureSite...em_single.html

When the "Add a Dependant Item" button is clicked, the form is being changed, such that there is an additional field for a dependant item:

http://www.steinrogan.com/SecureSite...ingle_dep.html

So far, so good...

The idea is that every time the "Add a Dependant Item" button is clicked, the form will have an additional field for another dependant item. How do I go about this in JavaScript without sending the form to the server? I assume I must use variables, that keep count of the number of the fields for dependant items, i.e. how many times the "Add a Dependant Item" button has been clicked, but I don't know how. Also, if I already filled in some other fields in the form, and suddenly I decide that I want to add another dependant item, I would like the filled-in data not to disappear just because I'm adding another field to the form.

Things get a little trickier when you take into account the "Add Another Item" button and its purpose, but the question is the same. Say, I'm done with the first item and its dependant items, filled in all the pertinent data, then I decide that I would like to add another item. Naturally, I would like the filled-in data not to disappear, while I keep on adding new items.

The form will only be sent to the server when the "Save Category and Upload Items" button is clicked.

Thanks for your time and insights!

Csanád

feherke · Jul 25, 2007

Hi

Well, we could give more relevant answers after seeing the actual page...

In a theoretical sketch it would look like :

Code:

var myNewElement=document.createElement('input')
with (myNewElement) {
  type='text';
  name='[green][i]dependency_or_whatever[/i][/green]';
}
document.getElementById('[green][i]the_form_or_something_else[/i][/green]').appendChild(myNewElement);

Feherke.

http://rootshell.be/~feherke/

Csanad · Jul 25, 2007

Sorry about the links. Here they are:

http://www.steinrogan.com/SecureSite_v2/new_item_single.html

http://www.steinrogan.com/SecureSite_v2/new_item_single_dep.html

Thanks!

Diancecht · Jul 25, 2007

I guess it depends on the data you want to transfer. Adding new items will include the data in the form, but if you want to transfer limited data, you can use the query string.

Cheers,
Dian

feherke · Jul 25, 2007

Hi

Take a look at this for hints on how you can do that. But note that your design is not really suitable for dynamic DOM manipulations.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Add New Item</title>
<link href="srp_ss.css" rel="stylesheet" type="text/css" />
[red]<script type="text/javascript">
function mkdep()
{
  var depcont=document.getElementById('ItemNameNumberDependant');
  var newdep=document.createElement('div');
  newdep.innerHTML=
    'Dependant Item [1]<br />'+
    '<input name="DependantFileName1" type="text" id="DependantFileName1" />'+
    '<input type="submit" name="Submit3" value="Browse for File Location" /><br />'+
    '<a href="new_category_single.html" onclick="rmdep(this);return false">Remove Dependant Item</a>'
  depcont.appendChild(newdep);
}
function rmdep(what)
{
  while (what && what.tagName!='DIV') what=what.parentNode;
  if (what) what.parentNode.removeChild(what);
}
</script>[/red]
</head>

<body><form action="" method="get">
<div id="AddNewCategoryTitle">Add New Item </div>
<div id="AddNewCategoryName">[Category Name]</div>
<div id="AddItem">
<div id="ItemNameNumber">Item [1]</div>
<table width="500" border="0" cellspacing="0" cellpadding="2">

  <tr>
    <td valign="bottom"><strong>Client<br />
      View? </strong></td>
    <td valign="bottom"><strong>Item Name </strong></td>
    <td valign="bottom"><strong>File Location (may be a URL) </strong></td>
    </tr>
  <tr>
    <td><input name="ClientViewable" type="checkbox" id="ClientViewable" value="ClientView" /></td>
    <td><input name="ItemName" type="text" id="ItemName" /></td>
    <td><input name="FileName" type="text" id="FileName" /></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td><strong><br />
      Description</strong></td>
    <td><input type="submit" name="Submit" value="Browse for File Location" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><textarea name="Description" rows="3" id="Description"></textarea></td>
    <td valign="bottom"><a href="new_item_single_dep.html"><input name="Submit2" type="submit" value="Add a Dependent Item" [red]onclick="mkdep();return false"[/red] /></a></td>
    </tr>

</table>

<br />
[red]<div id="ItemNameNumberDependant">
</div>[/red]
<br />

</div>
<div id="AddAnotherItem"><input name="" type="button" value="Add Another Item" />
</div>
<div id="SaveCategory"><input name="" type="button" value="Save Category and Upload Items" /></div>
</form>
</body>
</html>

Feherke.

http://rootshell.be/~feherke/

Csanad · Jul 25, 2007

Thanks, it's a start. Why isn't the design suitable for dynamic DOM manipulations? Also, if I invoke mkdep() multiple times, it will always create Dependant Item [1] instead of Dependant Item [1], Dependant Item [2], Dependant Item [3], etc.

Thanks again for your help!

feherke · Jul 25, 2007

Hi

Csanád said:
Why isn't the design suitable for dynamic DOM manipulations?

You used a separate [tt]div[/tt] and a [tt]table[/tt] for each dependency item. And those were just left in the HTML document, without a proper container. Well, that is not a good starting point for dynamic element manipulation.

Csanád said:
Also, if I invoke mkdep() multiple times, it will always create Dependant Item [1] instead of Dependant Item [1], Dependant Item [2], Dependant Item [3], etc.

Yes, I let that part for you. ;-) While you did not gave us details about the numbering, I did not implemented anything specific for that. For example what should happen if the user adds 3 dependencies then deletes the 2. ? And what should happen if after that the user adds another dependency ?

Feherke.

http://rootshell.be/~feherke/

Csanad · Jul 25, 2007

The HTML and the design were created by somebody else. They can be modified, so any suggestions are welcome as how to make it better suitable for dynamic element manipulation.

Yes, the numbering part is the root (pun intended) of all my problems here. More specifically, I would need to figure out how to manipulate variables in JavaScript. If the user adds 3 dependencies, then deletes the second, we'll be left with 2 dependencies: [1] and [3]. This all happens in JavaScript, on the client side. Now as for the numbering, I guess items will need to be renumbered, right? So, I assume renumbering should happen on the fly leaving us with the 2 dependencies numbered [1] and [2]. And if the user adds another dependency after all this, that should be numbered [3].

Messy, huh?

Thanks as always!

feherke · Jul 25, 2007

Hi

I forgot to ask it before, but you need to be able to edit the dependencies later, right ? If yes, how will be the previously added dependencies loaded back into the HTML document ?

Feherke.

http://rootshell.be/~feherke/

Csanad · Jul 25, 2007

That's right, I'll need to be able to edit the dependencies as well as all the other fields of the form. But the data will come from the server using PHP. I hope this answers your question.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Form variables vs. modified form 1

Csanad

Programmer

feherke

Programmer

Csanad

Programmer

Diancecht

Programmer

feherke

Programmer

Csanad

Programmer

feherke

Programmer

Csanad

Programmer

feherke

Programmer

Csanad

Programmer

Similar threads

Part and Inventory Search

Sponsor