Formatting help for dynamically created new form elements 2

[Csanad]

Hello!

Here's my form:

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

Please create a Dependant Item in Item[1] for comparing purposes.

When a New Item is created dynamically by clicking the "Add Another Item" button, and then inside the New Item the "Add a Dependant Item" button is clicked, a new Dependant Item will be created. Trouble is that it's aligned to the left and the font size is smaller than the font size in Item[1]. The same effect happens to all subsequently added New Items.

Can anyone point out what I need to do, so formatting stays the same throughout the whole form?

Thank you!

Csanád

 

[Vragabond]

Did you fix it? The sizes look the same both on IE7 and FF for me.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[Csanad]

No. Did you add another Item (i.e. Item [2]) and inside that a Dependant Item?

 

[monksnake]

I found your problem.

When you create another item, you make another div with the same id as a div already there:

<div id="AddItem">

You're losing your CSS on the new div.

To fix this make AddItem a class instead of an id.

<.

 

[Csanad]

Thanks for the tip Monksnake! Unfortunately, it didn't solve the problem. Or am I doing something wrong?

 

[monksnake]

did you change your CSS definition to AddItem. instead of
AddItem#

???

<.

 

[Csanad]

Yes. You can check it out here:

http://www.steinrogan.com/SecureSite_v2_beta/srp_ss.css

 

[monksnake]

I'll take a good look at it, cause now I'm curious. I suspect it's a tag not closed properly.

<.

 

[monksnake]

Ok, I got it working.

It was an issue of CSS being declared on a div ID instead of a class.

In your CSS make these classes (highlighted)

[!]div.ItemNameNumber {
   border-bottom: solid 1px #CCCCCC;
   padding-bottom: 2px;
   margin-bottom: 5px;
   font-weight: bold;
   font-size: 12px;
}[/!]
div#SaveCategory {
   border-top: solid 1px #CCCCCC;
   margin-top: 20px;
   text-align: right;
   padding-top: 2px;
   padding-right: 5px;
}
[!]div.ItemNameNumberDependant {
   border-bottom: solid 1px #CCCCCC;
   padding-bottom: 2px;
   margin-bottom: 5px;
   font-weight: bold;
   font-size: 12px;
   margin-left: 25px;
   margin-right: 25px;
}[/!]

They are defined as # in your CSS.

In the function mkitem make give those divs that class:

   '<div class="AddItem">'+
      '<div [!]class="ItemNameNumber"[/!] id="ItemNameNumber">Item ['+itnum+']</div>'+
      '<table width="613" border="0" cellspacing="0" cellpadding="2">'+
         '<tbody>'+
            '<tr>'+
               '<td width="52" valign="bottom"><strong>Client<br />View? </strong></td>'+
               '<td width="200" valign="bottom"><strong>Item Name </strong></td>'+
               '<td width="349" valign="bottom"><strong>File Location </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="file_'+itnum+'[0]" type="file" value="Browse..." /></td>'+
            '</tr>'+
            '<tr><td>&nbsp;</td>'+
               '<td><strong><br />Description</strong></td>'+
               '<td valign="bottom"><b>or Url</b></td>'+
            '</tr>'+
            '<tr><td>&nbsp;</td>'+
               '<td><textarea name="Description" rows="3" id="Description"></textarea></td>'+
               '<td><input name="Url" type="text" id="Url" />'+
                  '<table><tbody><tr><td valign="top">&nbsp;</td></tr>'+
                     '<tr><td>&nbsp;&nbsp;&nbsp;</td>'+
                        '<td align="right"><input name="" type="button" value="Add a Dependant Item" onclick="mkdep('+itnum+','+depnum+');  depnum = depnum + 1;"/></td>'+
                     '</tr>'+
                  '</tbody></table></td></tr>'+
         '</tbody></table>'+
   '<br />'+
   '<div [!]class="ItemNameNumberDependant"[/!] id="ItemNameNumberDependant'+itnum+'">'+
   '</div>'+
   '<br />'+
 '</div>'+
   '<br />'

And make sure you do the same in the HTML.

<.

 

[BabyJeffy]

Here is how I fixed it:

div#ItemNameNumberDependant[!],
div#ItemNameNumberDependant2[/!] {
border-bottom:1px solid #CCCCCC;
font-size:12px;
font-weight:bold;
margin-bottom:5px;
margin-left:25px;
margin-right:25px;
padding-bottom:2px;
}

Probably best to switch to using classes throughout for just layout stuff like this.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BabyJeffy]

*lol* snap

Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[monksnake]

<.

 

[Csanad]

You guys are fantastic!! Thank you so much!!

Now, I only have to figure out the JavaScript part then I'm ready to party. I know this is not the JavaScript forum, but maybe you can help me there a bit.

How do I pass the following info to the server:

How many items/dependant items were added altogether?

How many dependant items does each item have?

I'm using PHP on the server-side.

Thanks again for your help!

Cheers!

 

[BabyJeffy]

Take a look at JSON as a means of serialising the data and passing it to the back-end. Sure it will require javascript - but you seem to have gone for a solution that requires javascript anyway, so it's not a problem.

I would start a new thread in the Javascript forum if you have problems and as you take this forward.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[ChrisHunt]

How do I pass the following info to the server:

How many items/dependant items were added altogether?

How many dependant items does each item have?

I would create <input type="hidden"> elements in the form to pass the information that you need. Then get your javascript to increment the relevant value(s) as items are added. Your php script can then use these values as it needs to.

Another approach that can be useful is to create a hidden input alongside each {dependant} item that has a non-null value and follows a particular naming convention:

<div id="ItemNameNumber">Item [1]</div>
...
<input name="file_1[0]" type="file">
[red]<input name="item" type="hidden" value="x">[/red]
...
<div><b>Dependant Item [1]</b><br><input name="file_1[1]" value="Browse..." type="file">
[red]<input name="item_1_dep" type="hidden" value="x">[/red]

Your code can then loop through the item[] and item_n_dep[] arrays, and when it reaches a null value it knows it's reached the end of the list.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Csanad]

ChrisHunt:

I would create <input type="hidden"> elements in the form to pass the information that you need. Then get your javascript to increment the relevant value(s) as items are added. Your php script can then use these values as it needs to.

I thought about this solution, but can't seem to figure it out. I have a JavaScript variable that keeps count of the total number of items added: itemnum. How do I assign this JavaScript variable's value to an HTML tag's attribute that I can pass to the server?

<input type="hidden" value="itemnum" >

As for the second approach, I think that's what I've been looking for. But don't you have to make item and item_n_dep to be arrays: item[] and item_n_dep[]? Also, it's not clear what value I should assign to the hidden fields: value="x". And what should happen to indexing when a Dependant Item is deleted?

<div id="ItemNameNumber">Item [1]</div>
...
<input name="file_1[0]" type="file">
<input name="item[]" type="hidden" value="x">
...
<div><b>Dependant Item [1]</b><br><input name="file_1[1]" value="Browse..." type="file">
<input name="item_1_dep[]" type="hidden" value="x">

Finally, how do I test for null value on the server side when looping through the arrays?

Thanks a bunch!

Cheers!

Csanád