Results 1 to 9 of 9

Thread: type=image replaces =button

  1. #1
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default type=image replaces =button

    I have a form with a textarea.
    some formatting tag inserstion buttons - [B] button loads prompt window, enter text - click OK and we have <b>my text</b> entered into the textarea.

    I have this working well using
    <input type=button
    and can style the button
    but I would very much like to use images in place of the button. Trouble is <input type=image act the same as type=submit

    Any suggestions?


    thanks - arfa

  2. #2
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Kusalo,

    Creating a html control like <input type="button" causes the form to be submitted.So to avoid the form submission, you can use

    <img src=" "> and write an event handler to perform the needed action.

    Regards,

    Valli

    www.syncfusion.com

  3. #3
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default input image

    hi Valli,

    thanks for the speedy reply.

    > <img src=" "> and write an event handler to perform the needed action.

    do you mean
    <a href.... onclick=function()><img></a> ?

    can you believe it?????????
    I tried this a while back and it failed. I have since recoded the .js
    AND - it works!

    Doggone the digital doo.

    PS: also surfing about I got two ideas:
    use CSS to set the input with an image - yes?
    use <button><img></button> - this seems less likely.

    I have yet to test these but would appreciate any comments if you have the time.

    many thanks - Kusalo

  4. #4
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default image oooops

    hi,

    just set up the image href
    works fine but...
    Inserts the formatted text - and then it disappears.


    <a href onclick=\"format('<B>', '</B>', 'BOLD')\"><img src=bold.gif></a>

    function format(format1, format2, format3)
    {var text = prompt('Enter text to format: ' + format3);
    if (text != null)
    {insertAtCursor(document.REPLYFORM.sub$i, format1 + text + format2);}
    else {return;}}

    >
    >
    function insertAtCursor(myField, myValue) {
    if (document.selection) // I.E.
    { myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0')
    { var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);}
    else { myField.value += myValue; }} // end insert cursor

    >
    >
    all the above works fine with...
    <input type=button value=' U ' onclick=\"format('<U>', '</U>','UNDERLINE')\">

    something simple is being missed and js is not that familiar to me.

    Any suggestions most welcome
    cheers - Kusalo

  5. #5
    Join Date
    Jun 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,

    Could you use like this,

    <a onclick="format('<B>', '</B>', 'BOLD')"><img src="bold.gif"></a>

    In my first post i ment you to use the below syntax,u need not use the <a>tag between <img>tag.

    <img src="bold.gif" onclick="format('<U>', '</U>','UNDERLINE')" />

    Try the above syntax and let me know if you have any doubts.

    Regards,
    Valli
    (www.syncfusion.com)

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Creating a html control like <input type="button" causes the form to be submitted.
    Rubbish. <input type="submit"> and <input type="image"> cause the form to be submitted, although this can be worked around simply by returning false from their onclick events or the form's onsubmit event. <input type="button"> has no default action.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default input type=button

    > <input type="button"> has no default action.?

    I have tested
    <input type=button value=' U ' onclick=\"format('<U>', '</U>','UNDERLINE')\">
    in 4 browsers and it works fine - but no image.

    > The <a href approach entered the text in the textarea but it was then immediately cleared - seemed like the page was being refreshed. Does having the 'href' in make the diff? I will test this.

    The current approach....
    <button type=button value='space' onclick=\"format('<B>', '</B>', 'BOLD');\"><img src=../script/images/bold.gif></button>
    works fine in said same browsers.

    In searching for this solution there were some doubtful comments on the use of
    <button>.
    Any comments here?

    a sunny day here in Australia.
    cheers - arfa

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    <img src="../script/images/bold.gif" onclick="format('<b>', '</b>', 'BOLD');">
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the solution I end up using

    <a href="javascript:format()">

    seems obvious enough - as these things often are

    Many thanks for your interest and time

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
  •