SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    ********* Addict WP1's Avatar
    Join Date
    Aug 2000
    Location
    New York , USA
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I am having a problem with buttons NOT functioning properly after changing them to "button images".

    PROBLEM 1

    On a submission form located at,
    http://members.nbci.com/questions_to...itStuff_wc.htm

    the original code was the following,

    <INPUT type="submit" name="submit" value=" Send ">
    <INPUT type="reset" name="reset" value=" Clear ">

    I changed it to the following,

    <INPUT TYPE="image" NAME="submit" SRC="http://questiont.homestead.com/files/graphics/QT_But_SendYourMessage_Red.gif" WIDTH="100" HEIGHT="30" BORDER="0" ALT="Send Your Message">
    <INPUT TYPE="image" NAME="clear" SRC="http://questiont.homestead.com/files/graphics/QT_But_Clear_Red.gif" WIDTH="50" HEIGHT="30" BORDER="0" ALT="Clear">

    The "submit" button (SendYourMessage) works fine. The "Clear" button is working as though I clicked the "Submit" button and goes to the "Thankyou Page".


    PROBLEM 2

    On a Mailing List form, I changed the form button to an image. It is located at,
    http://members.nbci.com/questions_to...sletter_wc.htm

    When I click the "go" button, I keep getting a page saying the E-mail address was not written in proper form.

    The original code contains,

    <INPUT type=submit value=GO name=submit>

    I changed it to,

    <INPUT TYPE=IMAGE NAME=SUBMIT SRC="http://members.nbci.com/questions_today/GRAPHICS/Buttons/QT_But_GO_Red_nn.gif" WIDTH="90" HEIGHT="15" BORDER="0" ALT="Go" >

    QUESTION

    What should I do in order to keep the button images and still have buttons which function correctly???

    Thanks!! All recommendations appreciated.

    WP
    Webbing Along!!!

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi WP

    Although (somewhere in the back of my mind) I've seen "input type='image'", I've never used it. When most people speak of using images as buttons, they mean placing href tags around img tags, as in the following:

    <a href='javascript:someFunc()'><img src = "somePic.gif" .....></a>

    Insofar as your problem 1: I do not understand how it could be executing anything since you do not have any sort of event handler -- onClick or otherwise. Given that you are running ASP, I have to assume that you are using IE and that your submission is by the grace of Mr. Gates' programmers. (Has anyone checked the page out in Netscape?)

    I would change the code to the following:

    for the Submit image:

    <a href='javascript:validateIt(this.form)'><img src="http://questiont.homestead.com/files/graphics/QT_But_SendYourMessage_Red.gif" WIDTH="100" HEIGHT="30" BORDER="0" ALT="Send Your Message"></a>

    and for the Clear/Reset image:
    <a href='javascript:this.form.reset()'><img.....></a>

    The validateIt function would look something like:

    function validateIt(formObj)
    {
    var ok2Send = true;

    ....code to test for empty fields, valid email address, etc. If the conditional's fail, set the ok2Send var to false.......

    for (cnt=0; cnt<formObj.length; cnt++)
    {
    if (formObj.elements[cnt].type == 'text')
    if(formObj.elements[cnt].value == '')
    {
    ok2Send = false;
    alert("You must fill in something for " + formObj.elements[cnt].name);
    formObj.elements[cnt].focus();
    formObj.elements[cnt].select();
    }
    .....for each 'type'.....
    }
    if (ok2Send)
    formObj.submit();
    else
    return false;
    }

    Re problem 2: try the same type of html as above: href, img, close href, and call a function to submit your form

    If you want more explanation of the validateIt function, see the "Validating Forms" script/tutorial at my site.

    Hope this helps

    Vinny




    [Edited by Vincent Puglia on 10-13-2000 at 10:45 PM]
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    ********* Addict WP1's Avatar
    Join Date
    Aug 2000
    Location
    New York , USA
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Vincent Puglia
    Hi WP

    Although (somewhere in the back of my mind) I've seen "input type='image'", I've never used it. When most people speak of using images as buttons, they mean placing href tags around img tags, as in the following:

    <a href='javascript:someFunc()'><img src = "somePic.gif" .....></a>

    SNIP.......

    Thanks for responding to my post Vincent (I hope it's OK to call you by your first name)

    I wrote the code for the images from a tutorial at HTML.goodies located at
    http://htmlgoodies.earthweb.com/tutors/imageform.html

    My knowledge of javascript is very limited at this point. I usually have to cut and paste if I want a JavaScript.

    I replaced the "Input" tags with the script you suggested and placed the changed script on another page different from the one above,
    http://members.nbci.com/questions_to...itStuff_wc.htm

    I do not know where to place the additional script you referred to on the page or between what tags. Does it go on the form or the "HEAD" of the page? It is difficult for me to understand your tutorial since my knowledge of JavaScript is so limited right now.

    I also have the same question about the changes you suggested for the Newsletter script.

    I appreciate any additional help you can give me to get these scripts working properly.

    WP
    Webbing Along!!!

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi WP,

    Yea, you can call me by my first name, last name, 'Vinny', or any other nomenclature that most people would consider 'civil', including yo, dude, phreak, etc.

    The validation script would go between the head tags. To make it easier for you:

    change the href to: <a href="javascript:validateIt()".....>

    change the form to <form name='somename' action='......
    where somename is something you want to identify it by, like: myForm, msgForm, etc.

    And the function to look like:

    function validateIt()
    {
    var ok2Send = true;
    if (document.formname.fieldname.value == '')
    {
    ok2Send = false;
    alert('Please fill in the field.');
    document.formname.fieldname.select();
    document.formname.fieldname.focus();
    }
    if (ok2Send) document.formname.submit();
    }

    where formname is the name of the form, and fieldname is the name of the field that you require something entered, like for the email address field, it would look like:

    if (document.msgForm.emailAdd.value == '')
    {
    ok2Send = false;
    alert('Please fill in the field.');
    document.msgForm.emailAdd.select();
    document.msgForm.emailAdd.focus();
    }

    repeat the above for all fields that you don't want to be empty.

    The final line would look like:
    if (ok2Send) document.msgForm.submit();

    Hope this helps

    BTW: I knew I saw that used somewhere Did you go through the htmlgoodies javacript primer? That's actually where I first learned (and a book -- SAM's Javascript in 24 hours).


    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still


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
  •