Professional Web Applications Themes

Multiple Submit Buttons using the IMAGE type - Macromedia ColdFusion

Hoping one of you gurus can help me out here. I have a form that has 3 buttons that perform different actions when clicked (create new, edit, and delete). Simple enough using input type="submit", just use the same value for the name attributes and different values for the value attributes. i.e., <input type="submit" name="SubmitType" value="new"> <input type="submit" name="SubmitType" value="delete"> <input type="submit" name="SubmitType" value="edit"> Unfortunately I need to use custom buttons, not the standard gray buttons. To do that, I am using input type="image". i.e., <input type="image" src="new_button.gif" name="SubmitType" value="new"> <input type="image" src="delete_button.gif" name="SubmitType" value="delete"> <input type="image" src="edit_button.gif" name="SubmitType" value="edit"> I ...

  1. #1

    Default Multiple Submit Buttons using the IMAGE type

    Hoping one of you gurus can help me out here. I have a form that has 3 buttons
    that perform different actions when clicked (create new, edit, and delete).
    Simple enough using input type="submit", just use the same value for the name
    attributes and different values for the value attributes.

    i.e.,
    <input type="submit" name="SubmitType" value="new">
    <input type="submit" name="SubmitType" value="delete">
    <input type="submit" name="SubmitType" value="edit">

    Unfortunately I need to use custom buttons, not the standard gray buttons. To
    do that, I am using input type="image".

    i.e.,
    <input type="image" src="new_button.gif" name="SubmitType"
    value="new">
    <input type="image" src="delete_button.gif" name="SubmitType"
    value="delete">
    <input type="image" src="edit_button.gif" name="SubmitType"
    value="edit">


    I thought it wouldn't make a difference, but it sure does. It's telling me
    "Element SUBMITTYPE is undefined in FORM." Any idea why? I'm sure it's
    something ridiculously simple that I'm just not seeing. Any help would be
    greatly appreciated!

    BTW, I am using IE 6.0 and CF MX 6.1.

    Thanks!

    Bill

    bill_doe Guest

  2. #2

    Default Re: Multiple Submit Buttons using the IMAGE type

    Submit images work a little differently. What actually gets passed to the form
    action is the X and Y coordinates of the part of the image the user clicked.
    Think an image map.

    So what will exist on your action page is FORM.SubmitType.X and
    FORM.SubmitType.Y.

    So you can see the value of your image is not passed. That means you'll need
    to have a unique name of each image. You'll then need to do isDefined to see
    which one was clicked:

    <cfif IsDefined("FORM.newButton.X")>
    new button clicked
    <cfelseif IsDefined("FORM.deleteButton.X")>
    delete button clicked
    <cfelseif IsDefined("FORM.editButton.X")>
    edit button clicked
    </cfif>

    TA-Selene Guest

  3. #3

    Default Re: Multiple Submit Buttons using the IMAGE type

    When you click the submit image, two variables are passed to the action page -
    SubmitType.x and SubmitType.y These are the x and y coordinates of where the
    cursor was on the image when the click occurred. So use something like the
    code below:



    <CFPARAM submitType.x = "">

    <CFIF submitType.x IS "new">
    Do the new stuff here
    <CFELSEIF submitType.x IS "delete">
    Do the delete stuff here
    <CFELSE>
    Do the edit stuff here
    </CFIF>

    jdeline Guest

  4. #4

    Default Re: Multiple Submit Buttons using the IMAGE type

    You guys rock! Thanks so much for the quick responses Selene and jdeline!
    bill_doe Guest

  5. #5

    Default Re: Multiple Submit Buttons using the IMAGE type

    Bill,

    I know you found your answer, but here's another idea. Put the images on the
    screen with plain old img tags, and then assign an onclick to them. You can
    have each image call a javascript function, and pass a certain value to it to
    indicate which one was clicked.

    I use this method now exclusively. I never use submit buttons, or images or
    anything else. This is generally because I want to control the tab order of the
    various fields, allowing the user to hit enter to jump from one field to the
    next instead of automatically submitting the form. Much more like normal data
    entry.

    It also has the benefit of allowing me to prevent multiple form submissions to
    my server. Ever had anyone highlight your submit button and hold down the enter
    key? :)

    Swift

    Swift Guest

  6. #6

    Default Re: Multiple Submit Buttons using the IMAGE type

    Interesting idea Swift. Can you show me a sample JS function that you use for the onClick event? Thanks!
    bill_doe Guest

  7. #7

    Default Re: Multiple Submit Buttons using the IMAGE type

    Bill,

    Sure!

    Don't forget to replace the formname with your form name. Alternatively you
    can use doent.forms[0] if there is only one, or if you know it's the first
    form no the page.

    Swift



    <script>
    function dosub(f,action){
    f.SubmitType.value = action;
    f.submit();
    }
    </script>

    <input type="hidden" name="SubmitType" value="">

    <img src="new_button.gif" onclick="javascript:dosub(doent.formname,'new') ;">
    <img src="delete_button.gif"
    onclick="javascript:dosub(doent.formname,'delet e');">
    <img src="edit_button.gif"
    onclick="javascript:dosub(doent.formname,'edit' );">

    Swift Guest

Similar Threads

  1. Vanishing Submit Buttons
    By elliot@carto in forum Dreamweaver AppDev
    Replies: 1
    Last Post: May 3rd, 05:07 AM
  2. Submit buttons
    By William Ortenberg in forum ASP Components
    Replies: 1
    Last Post: August 19th, 08:26 AM
  3. Multiple image buttons
    By Baroiller Pierre-Emmanuel in forum PHP Development
    Replies: 0
    Last Post: September 10th, 09:28 PM
  4. [PHP] Multiple image buttons
    By Cpt John W. Holmes in forum PHP Development
    Replies: 0
    Last Post: September 9th, 01:18 PM
  5. #25366 [NEW]: form buttons of type "image" dont send "submit" $_POST variable in IE
    By jordanolsommer at imap dot cc in forum PHP Development
    Replies: 0
    Last Post: September 2nd, 07:54 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139