<form> tag in <table> is causing alignment issues - HELP!

Love2Java · #1 Aug 30th, 2007, 15:54

I have an html table with rows of data. In one column there are text boxes in each row that will take input, then the user can select to submit one by clicking on an image next to the text box.

I'm using the onclick event which calls a javascript method that will get the value entered in the text box, then I use window.location.href = "somepage.html?value=somevalue"; to send the value and do some stuff.

Here's the problem...within the <td> of the text box I have <form name="somename"> and the corresponding </form> tag...I've tested it with and without the <form> tags and come to find that the alignment of my data is different and better when the <form> tags aren't present.

Can I access the value's of the text boxes via javascript another way besides calling them by using a <form>?
Example : document.formname.textboxname.value; - works fine, but if I take out the <form> tags and try and get the value via document.textboxname.value; it doesn't work.

I would actually prefer not to use the <form> tags, because the alignment is better...giving me the look I want. So can I get to the values of the text boxes some other way?

pa007 · #2 Aug 30th, 2007, 15:56

You got a link or some code? Would make things a bit easier.

I'm not brilliant with tables but I'll take a peek.

Pete.

Love2Java · #3 Aug 30th, 2007, 16:16

Thank you...sure, let me just type up a quick example of what I mean.

Code: Select all

<html><body>
<table border="1">
  <tr>
   <td>data1</td>
   <td>data2</td>
   <td>data3</td>
   <td><form name="somename">
          <table>
            <tr>
             <td><input type="text" name="firstbox" value=""></td>
             <td><div id="firstdiv" onClick="changeLink(document.somename.firstbox)" onMouseOver="this.style.cursor='hand'">><img src="checkmark.gif"></div></td>
            </tr>
           </table>
          </form>
   </td>
   <td>some text</td>
   </tr>
<!-- similar rows to follow -->
</table>

<table border="1">
  <tr>
   <td>data1</td>
   <td>data2</td>
   <td>data3</td>
   <td>
          <table>
            <tr>
             <td><input type="text" name="secondbox" value=""></td>
             <td><div id="seconddiv" onClick="changeLink(document.seconddiv.secondbox)" onMouseOver="this.style.cursor='hand'">><img src="checkmark.gif"></div></td>
            </tr>
           </table>
       
   </td>
   <td>some text</td>
   </tr>
<!-- similar rows to follow -->
</table>
</body>
</html>

Save the code as an html file and you will see how poorly aligned the first table is in comparison to the second table. The second table is the sort of alignment I need, and the reason it looks better is because it doesn't have a <form> specified.

Here's the javascript code :

Code: Select all

function changeLink(textboxname) {
var uservalue = textboxname.value;
window.location.href = "do.edit?uservalue="+uservalue;
}

So can I get the value entered into the textbox by way of some other kind of javascript code? Or can text boxes only be accessed if they are within <form>'s?

Hardbyte · #4 Sep 4th, 2007, 11:13

Code: Select all

<form name="somename" style="margin:0;padding:0;border:0;">

Form tags are weird - get rid of its spacing with the above. You can style forms too

Rakuli · #5 Sep 4th, 2007, 11:17

my suggestion would be to wrap your whole tabel setup in the form - because it is a block level element.

Then, if your javascript relies on the form name, just change the code to get the input name specifically.

Cheers,

Love2Java · #6 Sep 4th, 2007, 15:27

Quote:

Originally Posted by Hardbyte

Code: Select all

<form name="somename" style="margin:0;padding:0;border:0;">

Form tags are weird - get rid of its spacing with the above. You can style forms too

That works beautifully, thank you

Quote:

Originally Posted by Rakuli

my suggestion would be to wrap your whole tabel setup in the form - because it is a block level element.

Then, if your javascript relies on the form name, just change the code to get the input name specifically.

Cheers,

How stupid of me, why didn't I think of that before...thank you for your help as well

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Css border causing issues.	Bocaj	Web Page Design	6	Jun 8th, 2008 20:17
Vertical alignment issues in IE6. IE7 Won't center my page!	Itsumishi	Web Page Design	5	Mar 24th, 2008 20:28
Table Content Alignment...	Wheelz	Web Page Design	4	Jul 3rd, 2006 09:54
Vertical Table Alignment	Amphersand	Web Page Design	6	Mar 13th, 2006 01:34
Alignment Issues	everlonggg	Web Page Design	10	Mar 9th, 2006 21:16

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
<form> tag in <table> is causing alignment issues - HELP!