Solved

AligniingButtons_OnHTMLForms

Posted on 2011-03-20
17
158 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 83

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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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 83

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 83

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
 

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 83

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 83

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 83

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 83

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
asp.net open new page without popup blocker 8 19
Selected in an option list 13 21
Overflow: auto does not stretch with position: absolute 3 18
IF statment In Powershell 12 19
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 …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

807 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