Results 1 to 4 of 4

Thread: Submitting form with image as button does not work, standard button does?

  1. #1
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation Submitting form with image as button does not work, standard button does?

    In the head of my page:

    <script type="text/JavaScript">
    <!--
    function Login(){
    var done=0;
    var keyword=document.enter_keyword.keyword.value;
    //keyword=keyword.toLowerCase();
    if (keyword=="r4ds") { window.location="http://www.google.co.uk"; done=1; }
    if (done==0) { alert("Sorry, no products match your search."); }
    }
    //-->
    </script>


    In the body:

    <form name=enter_keyword>
    <tr>
    <td><input type="text" name=keyword value="Search Products" onfocus="if
    (this.value==this.defaultValue) this.value='';" size="13">
    </td>
    </tr>
    <tr>
    <td colspan=2 align=center>
    <input type="image" name="search" Value="search" src="NDSCardStore_files/search2.gif" onClick="Login()">
    </td>
    </tr>
    </table>
    </form>


    The form works fine 100% when I have the input type as="button" but when changed to image it does not work, and this is added to the url in the address bar when you click the search2.gif image:

    ?keyword=r4ds&Login%21.x=16&Login%21.y=8&Login%21=search

    Please help!

  2. #2
    Join Date
    Dec 2008
    Location
    Nigeria
    Posts
    97
    Thanks
    3
    Thanked 8 Times in 8 Posts

    Default

    Corrected version:
    Code:
    <script type="text/JavaScript">
    <!--
    function Login(){
    var done=0;
    var keyword=document.enter_keyword.keyword.value;
    //keyword=keyword.toLowerCase();
    if (keyword=="r4ds") { window.location="http://www.google.co.uk"; done=1; }
    if (done==0) { alert("Sorry, no products match your search."); }
    }
    //-->
    </script>
    
    In the body:
    
    <form name=enter_keyword onsubmit="Login(); return false;">
    <tr>
    <td><input type="text" name=keyword value="Search Products" onfocus="if
    (this.value==this.defaultValue) this.value='';" size="13">
    </td>
    </tr>
    <tr>
    <td colspan=2 align=center>
    <input type="image" name="search" Value="search" src="NDSCardStore_files/search2.gif">
    </td>
    </tr>
    </table>
    </form>
    ?keyword=r4ds&Login%21.x=16&Login%21.y=8&Login%21=search meant that the form submitted as it should. You were tryin to run your login function by putting onclick...that will not work because the form would have submitted by then.

    The legal thing to do was to stop the form from submitting and executing your function - that is why i used the onsubmit event - which is triggered anytime a form is about to be submitted - returnin false will prevent it from executing, then it also gets to run your function.
    I think that should solve your problem.

  3. The Following User Says Thank You to diltony For This Useful Post:

    TGP (01-12-2009)

  4. #3
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    By default, when the form is submitted and you have the type selected as image, the URL will display where the mouse cursor was when it was submitted so that is why you have x=16 and y=8 as they symbolise coordinates:

    http://www.w3schools.com/TAGS/att_input_type.asp

  5. #4
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Perfect thanks a lot!!

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
  •