6 Replies Latest reply on Jul 10, 2006 1:45 PM by rhellewell

    invisible submit button with image rollover

    rhellewell Level 1
      I have a need to combine a rollover image with a form submit button. I need the submit button to not be visible except for those that know where to look.

      I have a database query that displays rows of data. Each row has a checkbox to select that item, so the data table is in a form; the checkbox is a cfinput. In order to pass the parameters of the checked items, a submit button must be used to submit the form values.

      My need is for the submit button to be the rollover image. Only users that know where to find the rollover image will be able to submit the list of checked form values. "Regular" users shouldn't be in that area of the screen.

      So, a combined rollover image submit button is needed.

      Ideas? Thanks...Rick...
        • 1. Re: invisible submit button with image rollover
          ghartong Level 1
          don't use a submit button, use your rollover image like normal but add onclick="javascript:submit()" you may have to wrap an <a href around the image and put the onclick there.
          • 2. Re: invisible submit button with image rollover
            rhellewell Level 1
            The javascript:submit() works, taking me to the 'action' page specified by cfform, but doesn't seem to keep the form data.

            [The page has a list of records, each record with a checkbox (a cfinput). User checks one or more boxes, hits the hidden icon (with the javascript:submit() ), but a cfdump of the form doesn't show the selected items.]

            If I put a cfinput submit button right next to the hidden icon, that properly keeps the checked items on the action page.

            All that I have read seems to indicate that javascript:submit() should pass along the form values to the action pages. Any ideas why not?

            Thanks...Rick...
            • 3. Re: invisible submit button with image rollover
              Kevin Schmidt Level 1
              Rick - Perhaps try adding the name of the form to the submit

              document.yourFormName.submit()
              • 4. Re: invisible submit button with image rollover
                rhellewell Level 1
                document.yourformname.submit didn't work.

                But then discovered that the href value needs to be empty (or "#") to work. This code works: (rollover images with the submit() code):

                <a href="#"
                onClick="javascript:submit()"
                onmouseover="MM_swapImage('Image9','','images/change-meeting-date.png',1)"
                onmouseout="MM_swapImgRestore()">
                <img src="images/blank-hidden-area.png"
                name="Image9"
                width="111"
                height="11"
                border="0"
                id="Image9" />
                </a>

                When, in DW, you add the rollover image, you need to leave the href value empty. I suppose that lets the submit button use the <cfform action...> value as the results page, letting the form values pass to the results page.

                Now, the next step is to have two different rollover images with submits() that point to two different result pages, while still using one cfform. (Two submits in one form, each submit pointing to a different results page.)

                ...Rick...
                • 5. Re: invisible submit button with image rollover
                  Kevin Schmidt Level 1
                  Rick - I would use a hidden field to do that.

                  You would set the hidden field using Javascript, based on which submit button was clicked, and then on the server side, use ColdFusion to determine the value of the hidden field and then show the proper results page.
                  • 6. Re: invisible submit button with image rollover
                    rhellewell Level 1
                    Thanks for the reply, Kevin.

                    So I tried to 'stack' a couple of Javascript commands in the onclick of the href:

                    <.a href ... onclick="input type='hidden' name='deletebutton' value='yes';submit() >

                    ...but that didn't work. So, how do I stack the commands (and did I screw up on the syntax)?

                    ...Rick...