Need help with an img button submitting

Discussion in 'HTML & Website Design' started by frankmust, Apr 10, 2013.

  1. jhannell

    jhannell Member

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #21
    can you try this:

    replace this:
    <p><input name="save" type="image" value="submit"

    with this one:
    < p><input type="hidden" name="save" value="submit">
    <input onclick="document.frm.submit();return false;" name="save" type="image" value="submit"
     
    jhannell, Apr 12, 2013 IP
  2. frankmust

    frankmust Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #22
    i
    It works !!! :) thanks for that :p can you explain me why it wasnt workin without that new line?
     
    frankmust, Apr 12, 2013 IP
  3. jhannell

    jhannell Member

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #23
    happy to hear that :) normally when you submit the form, it submits information that is included in <input sections. for example, <input name="abc" <input name "xyz" etc... when we put document.frm.submit();return false;" it processed the submit event, BUT, since we put a return false (we need to put this otherwise code will not work as we want) , it STOPPED there. that's why it was not able to send the "<input name="save" part... since the login mechanism required this part, we MANUALLY added this part just before the <input onclick... so the code sent the required part to the server as well and it worked this way :)
     
    jhannell, Apr 12, 2013 IP
  4. Healthire

    Healthire Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #24
    It may work, but it's a bad solution. What happens when someone with javascript disabled tries to submit the form? Nothing is what happens.

    Rather than change the input type to image, just keep it as a submit and then use CSS or inline styling to style it. You can set the background image to the image you want to use, remove borders, remove text or just use value=" ".

    <style>
    #save_submit{ height: 20px; width: 75px; padding: 0; border-width: 0; background: url("images/connexionover.gif") 0 0 no-repeat;}
    #save_submit:hover{background: url("images/connexion.png") 0 0 no-repeat;}
    </style>

    <input name="save" id="save_submit" type="submit" value=" " />

    That should do it for you. Of course, the <style> segment should be put in a CSS file, not be in the html body like that.
     
    Healthire, Apr 12, 2013 IP
  5. frankmust

    frankmust Member

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    28
    #25
    Awsome! but can a css code have an equivalent with the following js code : onmouseout="this.src='images/connexion.png'" because my animated .gif hover wont play again if someone scroll back his mouse over this img because it is not repeating (the onmouseout was doing it great)
     
    frankmust, Apr 12, 2013 IP
  6. Healthire

    Healthire Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #26
    Ah, for that you'll probably have to use javascript.

    onmouseout="this.backgroundImage='url(images/connexion.png)'"

    Might work.
     
    Healthire, Apr 12, 2013 IP
  7. devon

    devon Well-Known Member

    Messages:
    407
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    130
    #27
    so, this could be browser compability problem.
     
    devon, Apr 12, 2013 IP