Solved

AligniingButtons_OnHTMLForms

Posted on 2011-03-20
17
152 Views
Last Modified: 2012-05-11
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
Comment
Question by:sam15
  • 8
  • 7
  • 2
17 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 35176697
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35176699
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
 

Author Comment

by:sam15
ID: 35176748
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
 

Author Comment

by:sam15
ID: 35176812
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35177013
This is what I get for a display with the code you posted.
button-line.jpg
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35177022
>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
 

Author Comment

by:sam15
ID: 35177836
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35177891
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:sam15
ID: 35184357
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35184562
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
 

Author Comment

by:sam15
ID: 35186169
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35187550
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
 

Author Comment

by:sam15
ID: 35198247
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 35200956
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
 

Author Comment

by:sam15
ID: 35204422
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
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 250 total points
ID: 35204629
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
 

Author Closing Comment

by:sam15
ID: 35226566
Excellent!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now