Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using a picture instead of the Submit button of a form

    hi, I actually said the whole question in the title! When you have a form, in the end you make a button called submit, that by pressing that, form understands that it should execute for example the "onsubmit" event, or you can have a Reset button too. The problem is that I wana have my fancy image instead of any HTML button and by pressing the image, "Onclick" event gets excecuted AND the form's "onsubmit" even also gets excecuted!
    Is there any way? It should be I think!

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sure, try something like this:

    <a href="javascript: document.formName.submit()"><img src="submitpic.gif"></a>

    <a href="javascript: document.formName.reset()"><img src="resetpic.gif"></a>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    New York, USA
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try this:
    <input type="image" value="submit" src="---" width="---" height="---">

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Keep in mind that the input type of image is programmed to work like a sbmit button so it wont work for a reset button.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    dear John, I tried what you said and it didn't work!
    I wrote:

    <body>
    <form name="myForm" onsubmit="alert('hi!');">
    <input type="Text" value="">
    </form>
    <a href="javascript: document.myForm.submit()"><img src="About_On.jpg"></a>

    </body>


    if it worked, when I clicked on my picture, the alert has to be activated, huh? I also put the <a href.....> tag IN the form, but it didn't work either.

    But what dear boywonder said is perfectly working, and also you're right that his way doesn't work for the reset button, but I also need a reset button, what can I do?

    Thanx in advance

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Try the following


    <a href="#null" onclick="document.formname.reset()"><img src="image.gif"></a>

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    well, I just tried something myself out of my imagination and it worked, well, somehow it worked! if you write:

    <script>
    function tt()
    {
    alert('hello!');
    }
    </script>

    <form name="ourName">
    <input type="Text" value="">
    </form>
    <a href="javascript: document.ourName.submit(); document.ourName.onsubmit = tt();">
    <img src="About_On.jpg">
    </a>


    then by clicking on the image, it'll show you "hello!", I mean what the tt() function is supposed to do, but then it'll give you an error saying that "it was not implemented"! I dunno what it means in here! anyway, I think the problem is solved, coz it actually submits the form, and you can find it out from the fact that for example all your input fields become empty, and it shows that the submit was activated ( if it's not the reset that's activated!) and I needed that onsubmit event handler to run a function for evaluating my form's elements that I can do the same by running a function when someone clicks on the image, coz, well, when someone clicks that, then it means that it's gonna be submitted, and after running my evaluating function, I can have "document.formName.submit()", anyway, thanx for your help but it was better if we could have the onsubmit event handler working too, as it works in the <input type="image"> method.
    Last edited by ConfusedOfLife; 08-05-2002 at 09:33 PM.

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a MUCH better way to use an image input as a reset button is to do this:
    Code:
    <input type="image" src="reset.gif" onClick="this.form.reset(); return false;" />
    This way you don't have to hardcode any DOM names or other nonsense like that...


  •  

    Posting Permissions

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