• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 172
  • Last Modified:

AligniingButtons_OnHTMLForms

Is there a way to get two buttons on same line inside a table row but each button submits to a different form.


I have one main form tag <FORM> that used by "Save Data" button. Then iwant "Main Menu" button to go to another form without submitting all these elements that i submit to the submit data.

This used to work with IE6 but IE8 seems to display each button on different lines.
0
sam15
Asked:
sam15
  • 8
  • 7
  • 2
2 Solutions
 
leakim971PluritechnicianCommented:
use simple button instead submit button and use :

<form id="form1" ...
<form id="form2" ...

<tr><td>
<input type="button" value="Save Data" onclick="document.getElementById('form1').submit()" /> 
<input type="button" value="Main Menu" onclick="document.getElementById('form2').submit()" /> 
</td></tr>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
We would have to see your code so we could check it.  HTML elements are affected by the other elements around them.  Have you checked it in IE6 recently?
0
 
sam15Author Commented:
Here is a sample of the code. i am trying to get the two buttons that submit to diff forms on one line.
i will see if suggestion in #1 works

<HTML>
  <HEAD>
  <TITLE>Confirmation Screen </TITLE>
  </HEAD>
  <BODY>
  <FORM action="item.edit_part">


   ....
   
   
  <HR color="brown">
   <table width="100%" height="40"  border="1" cellpadding="2" cellspacing="2" id="Part_Buttons">
  <tr>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Save Part Button" value="     Save     ">
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Delete Part Button" value="    Delete    " onClick="return delete_part();" >
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="button" id="button" title="Clone Part Button" value="   Copy     "
onClick="document.location.href='item.copy_part?i_user_id=mike&i_stock_code=A-B-11' "  >
    </strong></div></td>
</FORM>
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike">
    <td width="25%">
      <div align="left">
        <input type="submit"   value="Main Menu">
      </div></td>
</FORM>
</tr>
</table>
</body>
</html>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sam15Author Commented:
is the 1st solution submitting forms using Javascript?

There will be an issue because i submit each button itself as part of the form.
i think it will work if i only submit data. i probably would need to add a dummy line for name of each button within each form. correct?
0
 
Dave BaldwinFixer of ProblemsCommented:
This is what I get for a display with the code you posted.
button-line.jpg
0
 
leakim971PluritechnicianCommented:
>is the 1st solution submitting forms using Javascript?
Yes

>There will be an issue because i submit each button itself as part of the form.
Yes, for the button outside of the form

> i probably would need to add a dummy line for name of each button within each form. correct?
Yes, add an hidden input for example

0
 
sam15Author Commented:
If you are seeing all buttons on one line you must be using IE 6 or 7.
Try IE 8 and you will see the button for main menu navigation on separate row.

Is not there a way to use submit buttons and keep all of them on one line? is the only workaround submitting using Javascript.
0
 
Dave BaldwinFixer of ProblemsCommented:
Here's another pic from IE8.  Firefox looks the same.  There were a couple of things out of place in the code so here is a revised version.
<HTML>
  <HEAD>
  <TITLE>Confirmation Screen </TITLE>
  </HEAD>
  <BODY>

<h1>Confirmation Screen  </h1>  
   
  <HR color="brown">
  <FORM action="item.edit_part">
   <table width="100%" height="40"  border="1" cellpadding="2" cellspacing="2" id="Part_Buttons">
  <tr>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Save Part Button" value="     Save     ">
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Delete Part Button" value="    Delete    " onClick="return delete_part();" >
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="button" id="button" title="Clone Part Button" value="   Copy     "
onClick="document.location.href='item.copy_part?i_user_id=mike&i_stock_code=A-B-11' "  >
    </strong></div></td>
<td>
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike">
    <td width="25%">
      <div align="left">
        <input type="submit"   value="Main Menu">
      </div></td>
</tr>
</table>
</FORM>

</body>
</html>

Open in new window

button-line.jpg
0
 
sam15Author Commented:
I think i was minnsing the 2nd <FORM> tag in the snippet I posted. The second for is for the main menu button.

<FORM action=main_menu
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike">

The code you posted asumes all buttons submitting to same form. The way I want it is 1st 3 buttons will submit to FORM1 while the main menu button submits to FORM2.
0
 
Dave BaldwinFixer of ProblemsCommented:
Ok, this way then.
<HTML>
  <HEAD>
  <TITLE>Confirmation Screen </TITLE>
  </HEAD>
  <BODY>

<h1>Confirmation Screen  </h1>  
   
  <HR color="brown">
  <FORM name="form1" action="item.edit_part">
   <table width="100%" height="40"  border="1" cellpadding="2" cellspacing="2" id="Part_Buttons">
  <tr>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Save Part Button" value="     Save     ">
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Delete Part Button" value="    Delete    " onClick="return delete_part();" >
    </strong></div></td>
    <td width="10%"><div align="center"><strong>
      <input  type="button" id="button" title="Clone Part Button" value="   Copy     "
onClick="document.location.href='item.copy_part?i_user_id=mike&i_stock_code=A-B-11' "  >
    </strong></div></td></FORM>

  <FORM name="form2" action="#">
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike">
    <td width="25%">
      <div align="left">
        <input type="submit"   value="Main Menu">
      </div></td></FORM>
</tr>
</table>


</body>
</html>

Open in new window

0
 
sam15Author Commented:
I am very confused now. DID you change anything?

IF you copy/paste this code you dont see it

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Part Item Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
      background-color: #FFFFCC;
}
.style4 {font-family: "Arial Black"}
.style6 {font-family: Arial, Tahoma}
.style8 {font-family: "Arial Black"; font-weight: bold; }
-->
</style>
</head>
<body onLoad="document.item_form.i_stock_code.focus();" >
<HR color="brown">
<form action="item.edit_part" method="post" name="item_form">
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike">
 
 <HR color="brown">
   <table width="100%" height="40"  border="0" cellpadding="2" cellspacing="2" id="Part_Buttons">
  <tr>
    <td width="25%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Save Part Button" value="     Save     ">
    </strong></div></td>
    <td width="25%"><div align="center"><strong>
      <input  type="submit" name="button" id="button" title="Delete Part Button" value="    Delete    " onClick="return

delete_part();" >
    </strong></div></td>
    <td width="25%"><div align="center"><strong>
      <input  type="button" id="button"  value="   Copy     "
onClick="document.location.href='item.copy_part?i_user_id=mike&i_stock_code=050=100' "  >
    </strong></div></td>
</FORM>
<FORM name="main_menu" method="post" action="main_menu">
<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike>
    <td width="25%">
      <div align="center">
        <input type="submit"   value="Main Menu">
      </div></td>
</FORM>
</tr>
</table>
</body>
</html>
0
 
Dave BaldwinFixer of ProblemsCommented:
Your code will work fine if you put the ending double quote after 'mike' in:

<INPUT TYPE="hidden" NAME="i_user_id" VALUE="mike>  <-------------

I'm not sure why you want two brown lines.

Also, please in the future use the Code box for your code like I did above.  It is easier for us to read and copy to help you with your questions.
0
 
sam15Author Commented:
I added double wuote after "mike" and opened the file in IE8 and Firefox 3.6.

IE 8 is showing the main menu button (2nd form) on 2nd line. Is it showing one line for all buttons on yours?

Firefox 3.6.15 shows one line.
0
 
Dave BaldwinFixer of ProblemsCommented:
Ok, I found out what was causing it.  The demo code above did not have a DOCTYPE and your next version did.  If I take out the DOCTYPE, all four buttons are on the same line in IE.  However, not using a DOCTYPE causes other problems in IE so maybe another approach should be considered.
0
 
sam15Author Commented:
I am not sure why I have that. Many web pages do not have it. not sure what happens if you do not have include it.

Do you think i should keep the DOCTYPE and submit via javascript button?
0
 
Dave BaldwinFixer of ProblemsCommented:
Browsers render the pages differently for different DOCTYPEs.  DOCTYPEs refers to the specific rules for that version of the standard.  There are few things that IE will not do unless it has a legitimate DOCTYPE specified.  This page tells about it: http://msdn.microsoft.com/en-us/library/bb250395%28VS.85%29.aspx  Check the links on the left of that page for newer info.
0
 
sam15Author Commented:
Excellent!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 8
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now