Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Aug 2007
    Posts
    10
    Member #
    15635
    I have a form for users to fill out, and when they hit the "Apply" button I fire off all of the data to a web app I have running somewhere. Things work great.I now want to create a second button, "Cancel" that uses the same exact web app. The only difference is that for cancel, I'd like to send a different piece of data that I'm storing in a hidden field. Here's the code I currently have:

    <FORM action="someAction" method="POST">
    <.. a whole bunch of inputs ..>
    <INPUT type="hidden" name="BrowserRequest" value="CheckServerID">
    <INPUT class=button type="submit" value="Apply">
    </FORM>

    <FORM action="someAction" method="POST">
    <INPUT type="hidden" name="BrowserRequest" value="Cancel">
    <INPUT class=button type="submit" value="Cancel">
    </FORM>

    This actually works fairly well. My problem is that when it renders in a browser, the two buttons are arranged vertically. I'd like them to be side by side. I can't seem to figure out how to do this. I can't just use a table since the first form has a bunch of other INPUTs in it, and they'll get screwed up. I tried putting both buttons in the same FORM, and it renders properly, but there are problems with 2 hidden fields with the same name under the same FORM.Any ideas on what I can do?Sander Smith

  2.  

  3. #2
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    OK, firstly your code isn't xhtml valid. Tags should be in lower case.

    Anyway to solve what you want.

    CSS-inline

    Code:
    <form style="float:left;" action="someAction" method="POST">
    <.. a whole bunch of inputs ..>
    <input type="hidden" name="BrowserRequest" value="CheckServerID">
    <input class=button type="submit" value="Apply">
    </form>
    
    <form action="someAction" method="POST">
    <input type="hidden" name="BrowserRequest" value="Cancel">
    <input class=button type="submit" value="Cancel">
    </form>
    Alternative method

    Code:
    <form class="float" action="someAction" method="POST">
    <.. a whole bunch of inputs ..>
    <input type="hidden" name="BrowserRequest" value="CheckServerID">
    <input class=button type="submit" value="Apply">
    </form>
    
    <form action="someAction" method="POST">
    <input type="hidden" name="BrowserRequest" value="Cancel">
    <input class=button type="submit" value="Cancel">
    </form>
    Insert this into external stylesheet
    Code:
    .float {float:left;}

  4. #3
    Junior Member
    Join Date
    Aug 2007
    Posts
    10
    Member #
    15635
    Quote Originally Posted by Perad
    OK, firstly your code isn't xhtml valid. Tags should be in lower case.
    You're right. Right now I'm playing a little bit fast and loose to get things to work, and I'll clean things up later. At least I say I will. Maybe I'll just fix things up now.
    Quote Originally Posted by Perad
    Anyway to solve what you want.
    I tried to do what you suggested (looks like it was just adding a style="float:left;" into the first form tag. Not only did it not get me where I wanted, but it renders differently on Firefox and IE. I'm attaching screenshots so you can see what happened. I also added borders to all of my tables so you can see how the whole page is built.

    I'm still looking to get the Apply and Cancel buttons nect to each other. Any ideas?

    Sander
    Attached Images Attached Images

  5. #4
    Junior Member
    Join Date
    Aug 2007
    Posts
    6
    Member #
    15662
    You could float the two buttons with CSS as well.

  6. #5
    Junior Member
    Join Date
    Aug 2007
    Posts
    10
    Member #
    15635
    Quote Originally Posted by WebDevPodcast
    You could float the two buttons with CSS as well.
    Okay, this works. Well, sort of. Here's what the code currently looks like:
    Code:
    <form action="someAction" method="POST"> 
       <.. a whole bunch of inputs in a table ..>
       <input type="hidden" name="BrowserRequest" value="CheckServerID">                           
       <input style="float:left;" class="button" type="submit" value="Apply"> 
    </form>
     
    <form action="someAction" method="POST">                    
       <input style="float:left;" class="button" type="submit" value="Cancel">
       <input type="hidden" name="BrowserRequest" value="Cancel">
    </form>
    So what's wrong? Well, 2 things:

    1) I don't want the buttons right up against the left side, I'd like a little more room in there. I tried putting in some &nbsp, but I realized that that was lame and didn't work well with the floats. What's the right way to put some space in that will work with the floats? Should I create an empty image and just float that to the left, and let the other two buttons bump up against that? Is there a better way?

    2) Things work fine in IE, but are kind of funky in Firefox. The second button is pushed down just a little bit. I can't quite figure out why this is happening. any ideas?

    Thanks everyone for your help,

    Sander
    Attached Images Attached Images


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com