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!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

RE: Fitting FORMS tighter on a page. 5

Status
Not open for further replies.

garymgordon

Programmer
Apr 5, 2000
307
0
0
US
I have a webpage, where I have mutliple FORM elements.

If you'll take a look at:


You'll see a drop down menu at the top right, then you'll see a SEARCH box on the left (down a little bit), and then to the right of the SEARCH box, you'll see another drop down menu.

The page is not finished yet, but these three elements will be used and positioned as they are currently.

My problem is .. I am trying to figure out how to get rid of the space that is caused when you use <FORM> and </FORM> tags.

You'll see space that is above and below the SEARCH BOX and the other drop down menu to the right of the SEARCH BOX. I want to get rid of this.

But I can't seem to figure out how to eliminate the space that is generated since I have to use the FORM tags.

I guess one question is ...

Can I use ONE set of FORM tags on the page, ... and maybe use Javascript somehow to determine the difference between the 3 FORM ELEMENTS on the page .. and which action and post to use? I hope I'm making myself clear.

Is there a way to use one set of form tags on the page, and then use Javascript to send the specific action and post information to the form - depending upon which submit button is selected, or which drop down menu is used?

Can anyone give me some help on this. I am really stuck.

Thanks ... in advance,
Gary

ggordon@garymgordon.com



Gary M. Gordon, LLC
webmaster@garymgordon.com
Certified Web Developer ::
Application Programmer
 
garymgordon Remove the height=&quot;30&quot; in the table from the <form> tag...this should get rid of the extra space above and below the drop-down menu choice...

Forget the Nobel Peace prize, I just want to take over the world!! [hammer]
 
I've found the same problem in the past and as odd as it sounds the solution I've found is to take the Form tags out the TD like in
<form>
<td>
....
</td>
</form>
It works.... dont ask me how but it does.
About one form for different actions create your form as usual and create three input buttons (not Submit buttons but regular buttons)

<input type=&quot;button&quot; Value=&quot;Go&quot; onClick=&quot;javascript:submitForm(1)&quot;>

Use the same code with different values 1-3
then on your javascript function check the value is getting passed, depending on that set form.action=&quot;action1&quot;
 
Thanks ... to both of you.
The moving of the form tags outside of the td tags worked. Pretty weird huh??

Gary


Gary M. Gordon, LLC
webmaster@garymgordon.com
Certified Web Developer ::
Application Programmer
 
not wierd at all really. this is a common mistake. I would go further and recommend as I do always keeping your <form> tags outside of the table in reference. I actually added this as my error for the week now that I think of it [wink]

the table can still be effected by the <form> in there even outside the cell tag. this does not seem to effect nested tables all to bad but can still cause spaces
<form>
<table><tr><td></td></tr></table>
</form>

_________________________________________________________
for the best results to your questions: FAQ333-2924
[sub]01001111 01101110 01110000 01101110 01110100[/sub]
onpnt2.gif
[sup] [/sub]
 
onpnt,

I realize I can put the <form> tag OUTSIDE of the table tag, but .. when I have two forms within one table .. that was the problem.

I had one TD cell that had one form .. and another TD cell that had another form.

So, I was looking for a way to maybe have ONE set of form tags ... as you say .. surrounding the TABLE tag. And, then use JAVASCRIPT to identify which form was being called and use Javascript to determine the ACTION and POST for the form. Since a FORM tag can only accept (from what I know) &quot;1&quot; ACTION and &quot;1&quot; POST ... then I was looking for help on how to use Javascript to pass a different action and post to the FORM .. depending upon which SUBMIT button was clicked on.

Any additional comments, help and thoughts on that would be appreciated.

Thanks,
Gary



Gary M. Gordon, LLC
webmaster@garymgordon.com
Certified Web Developer ::
Application Programmer
 
garymgordon/onpnt,

i've experienced the <form> tags adding space when they surround a table, so i always use this method:

<table>
<form>
<tr>
<td></td>
</tr>
</form>
</table>


=========================================================
while (!succeed) try();
-jeff
 
I believe that the <form> tag is a block-level tag (just like BR, HR, H1, DIV) which always forces a line break. I'm guessing that you've fixed your page, because it looks alright to me, I was going to suggest one form for all three inputs and handling the form differently based on the submit button that is pushed...

Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048
Tek-Tips Best Practices: FAQ183-3179
 
mwolf00,

That is exactly what I wanted.

Can you explain, in detail how I would do this .. or simply give me a quick example?

Thanks ... I'd really appreciate it.

:)
Gary

PS: Thanks Jemminger.


Gary M. Gordon, LLC
webmaster@garymgordon.com
Certified Web Developer ::
Application Programmer
 
if <form> is a block level tag, then you can use css to correct it:

<style type=&quot;text/css&quot;>
form {display:inline;}
</style>


=========================================================
while (!succeed) try();
-jeff
 
<script>
function subForm(handler){
switch (handler) {
case &quot;links&quot;:
document.location = document.myForm.links.options[document.myForm.links.selectedIndex].value
break;
case &quot;search&quot;:
document.myForm.action = &quot;search.asp&quot;
document.myForm.method = &quot;post&quot;
document.myForm.submit()
break;
case &quot;site&quot;:
document.myForm.action = &quot;site.asp&quot;
document.myForm.method = &quot;get&quot;
document.myForm.submit()
break;
}
}
</script>


<form name=&quot;myForm&quot;>
<select name=&quot;links&quot;>
<option>...
</select>
<input type=button value=&quot;Go&quot; onClick=&quot;subForm('links')&quot;>

<input name=&quot;searchField&quot;>
<input type=button value=&quot;Search&quot; onClick=&quot;subForm('search')&quot;>

<select name=&quot;site&quot;>
<option>...
</select>
<input type=button value=&quot;Go&quot; onClick=&quot;subForm('site')&quot;>
</form>


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rich Cook
 
Jemminger ... thanks.

mWolf00 ... EXCELLENT!! Thanks.

I'll give that a shot, but it look exactly like what I was looking for. Thanks, again.
Gary


Gary M. Gordon, LLC
webmaster@garymgordon.com
Certified Web Developer ::
Application Programmer
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top