CODEWITHSUNDEEP
javascriptjqueryasp.nethtml
LoneXcoder
LoneXcoder

Reputation: 2163

input type=image - onclick(), will trigger its event , but not act well on function in jquery

(I think this could be two posts - 2 questions.. so if you'll comment on it... I will separate those)

the main issue is acually:

how could I set an image-background for a button... easy & properly ?

I think that now I could be sure about these facts:

as I had a "little" problem with setting image as button-background , ...I thought, ok, if it's difficult to set <input type='button'> with image-background, why not instead , just set onclick event on a <input type='image'>!

and I was right(...almost), cause yes, to set click-event on image type is easy, also, to set src ..instead of background-image for button... at least for me, it is.

the problem is, in current project), using a jQuery-UI dialog - ok, cancel,

seems that the problem is that image-type , Posts back (?!), so dialog disappears

and button does not cause this flaw.

I tried to debug it with a break-point, in vs2010 and it both ok with a click event as they both get to the point of "function entry" ... so with the image type ... i could only notes, as i could see the <- Back button, toggles from disabled to be clickable, so it means it did post back.

and that does not happen with a button , as you hover over the button nothing happans , and with image you could see a link in status bar .

so there is a difference (a real one), between button-"convert" into image, than an image turned into a "button" (attaching it with a Click() event) ,

so what i would like to know , is: (only if I am allowed this time to use this post for both answers as they realy relate)

why does image post back? could i disable this action? ...it is not a server control. is that something you should know, and that suppose to happen ?

again if it is off-topic i would move this question, and i do need a propper way to set the background image for a button unless there's a workaround for it's behavior.

Upvotes: 3

Views: 5340

Answers (1)

Ross Brasseaux
Ross Brasseaux

Reputation: 4151

I'm not sure why the image type input element behaves differently than the button type, but if I were you I would avoid it all together. If you are looking to customize your button (which it appears you are) I would suggest using a div and control the user interaction via jquery/javascript.

Demo: http://jsfiddle.net/jrb9249/BvTD5/

HTML:

<body>
    <div class="div_button">
        <p>Click Me!</p>
    </div>
</body>

Javascript:

$('.div_button').click(function(){
    alert('Run a postback via JS');
});

CSS:

.div_button
{
    border: solid 1px gray;
    width:80px;
    height:25px;
    background:#A3A3A3;
    text-align:center;
    margin:0 auto;
    margin-top:50px;
}

.div_button:hover
{
    border: solid 1px blue;
    background:#A1A1A1;
    cursor:pointer;
}

To add some finishing touches to complete the button look, just add some rounded corners using the jquery rounded corners plugin found here. And if you need to do a post back with this control (it doesn't look like an asp.net control so I don't think that is what you are doing) you can use the __Postback technique described here.

I hope this helps, good luck with your site.

Update: Since this post I've started enclosing my div tags within an <a> tag to create a hyperlink out of the div. You can then apply custom click events to the <a> element and have greater control over the button you created.

Upvotes: 2

Related Questions