Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Hi, I'm creating a form with some radio inputs and text boxes. I wanted to get a text box to turn on or off dependeing on which radio button was clicked. Well, it works but I notice when I click on any of the radio buttons set to work in conjunction with a text box the browser gives me an "! Error on page" in the lower left hand coner. The form and the radio buttons work fine but for some reason I get this error. Anyway, I was wondering if anyone could take a look at the code I'm using for this particular function and tell me if they see anything wrong that cause my browser to alert me to an error. Here it is and Thanks:

    <TABLE BORDER=1 WIDTH=100%><TR><TD WIDTH=25%><FONT COLOR="#FFFF00" SIZE="1" ID="put"><I><B>(CHOOSE DAYS</B></I></FONT></TD><TD WIDTH=25% ALIGN="CENTER"><INPUT TYPE="RADIO" NAME="NUMBER OF DAYS" VALUE="SINGLE DAY" onclick="this.form.elements['MULTI DAY QUANTITY'].disabled=true; this.form.elements['MULTI DAY'].value=''; return true;"</TD>
    <TD WIDTH=25% ALIGN="CENTER"><INPUT TYPE="RADIO" NAME="NUMBER OF DAYS" VALUE="MULTI DAY" onclick="this.form.elements['MULTI DAY QUANTITY'].disabled=false; this.form.elements['MULTI DAY'].value='';
    return true;"</TD>

    I know I'm not supposed to use tables for layout but could putting the input tags in as seperate table data be causing the error?

  2.  

  3. #2
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Here you go, i think this is what you want - here is the code and the code in action..

    <html>
    <head>
    <title>form control</title>
    <script type="text/javascript">

    function showIt() {
    document.frm.text.style.visibility="visible";
    }
    function hideIt() {
    document.frm.text.style.visibility="hidden";
    }
    </script>
    </head>

    <body>
    <form name="frm">
    <input type="radio" name="rad" value="one" onclick="hideIt()">
    <input type="radio" name="rad" value="two" onclick="showIt()">
    <input type="text" name="text" style="visibility: hidden">
    </form>

    </body>
    </html>
    JR

  4. #3
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Thanks, jravenscroft.

    I've just found out I'm using invalid html with CSS. My home page has to be redone using the proper html and I guess that goes for my form page as well. The online tutorial I used to learn html was as old as the hills and now I'm paying for it. Luckily, I found a good CSS tutorial.

    Has anybody ever had to do their site or page over because of invalid html with CSS? Was it easy? Is it better to just start from scratch or can obsolete html tags be easily replaced? Thanks. I'm new to html, CSS, and website designing and don't know these things.

  5. #4
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    If you make your entire site CSS-based with CSS classes then it's extremely easy to change the entire color and image scheme at once. Just make sure to get it right the first time.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  6. #5
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Originally posted by jravenscroft
    Here you go, i think this is what you want - here is the code and the code in action..

    <html>
    <head>
    <title>form control</title>
    <script type="text/javascript">

    function showIt() {
    document.frm.text.style.visibility="visible";
    }
    function hideIt() {
    document.frm.text.style.visibility="hidden";
    }
    </script>
    </head>

    <body>
    <form name="frm">
    <input type="radio" name="rad" value="one" onclick="hideIt()">
    <input type="radio" name="rad" value="two" onclick="showIt()">
    <input type="text" name="text" style="visibility: hidden">
    </form>

    </body>
    </html>

    Does anyone know what css doctype I should use to get the above code to work properly? I'm using Traditional. Should I switch to Strict or does it not matter? I inserted the code for the inputs in my code but I still get "error on page" messages and the text box never appears. Also I completely lose my forms design if I use this part of the above code: <script type="text/javascript">. My page prefers :<STYLE TYPE="text/css">. I've never learned Javascript so I'm guessing my page hasn't been properly prepared to utilize the above code effectively. I would have said something sooner but I didn't realize it was javascript until I just inserted it into the form I'm rebuilding today. Here's the top part of my document so you can get an idea of what I may have to change:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>My First Stylesheet</TITLE>
    <STYLE TYPE="text/css">
    <!--
    table a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:white;}
    a:visited {color:white; text-decoration: none}
    a:hover {color:black; backgroundrange; text-decoration: none}
    a:active {color:white; background:red; text-decoration: none}
    H1 { white-space : nowrap; color: white; font-size: 50px; font-family: impact; line-height: 45px }

    H2 { white-space : nowrap; text-indent: 10px; position: justify; left:1px; top: 1px; color: green; font-size: 15px; font-weight: bold; font-family: arial; line-height: 19px; }

    i { color: white; font-size: 15px }
    #t { white-space : nowrap; color: yellow; font-size: 12px; font-weight: bold; font-family: arial }
    H3 { white-space : nowrap; text-indent: 10px; position: justify; left:1px; top: 1px; color: yellow; font-size: 15px; font-weight: bold; font-family: arial; line-height: 19px; }
    -->
    </STYLE></HEAD>
    <BODY BGCOLOR="#000000">

  7. #6
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    if you want to post the page on here i will take a look at it for you, if not you can paste all the code.
    JR

  8. #7
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Originally posted by jravenscroft
    if you want to post the page on here i will take a look at it for you, if not you can paste all the code.
    Ok jravenscroft,

    like I said , there's no site yet, so here's the code I have so far (I apologize for the edited text-- I want to preserve my idea) :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    <HEAD>
    <TITLE>stylesheet</TITLE>
    <STYLE TYPE="text/css">
    <!--
    table a:link, a:visited, a:active {text-decoration: none;}
    a:link {color:white;}
    a:visited {color:white; text-decoration: none}
    a:hover {color:black; backgroundrange; text-decoration: none}
    a:active {color:white; background:red; text-decoration: none}
    H1 { white-space : nowrap; color: white; font-size: 50px; font-family: impact; line-height: 45px }

    H2 { white-space : nowrap; text-indent: 10px; position: justify; left:1px; top: 1px; color: green; font-size: 15px; font-weight: bold; font-family: arial; line-height: 19px; }

    i { color: white; font-size: 15px }

    #t { white-space : nowrap; color: yellow; font-size: 12px; font-weight: bold; font-family: arial }
    H3 { white-space : nowrap; text-indent: 10px; position: justify; left:1px; top: 1px; color: yellow; font-size: 15px; font-weight: bold; font-family: arial; line-height: 19px; }

    -->
    </STYLE></HEAD>
    <BODY BGCOLOR="#000000">
    <H1><a href="link.html">NAMETEX.COM</a>
    <H2>THIS IS THE BLAH BLA PURCHASE PAGE. PLEASE FILL OUT THE FOLLOWING:</H2>
    <br>
    <H3>YOUR NAME:&nbsp;<input type="text" name="sender name">&nbsp;&nbsp;YOUR E-MAIL:&nbsp;<input type="text" name="sender e-mail"></H3>
    <H3>THE BLAH BLA RECIPIENT'S NAME:&nbsp;<input type="text" name="recipient's name"></H3>
    <H3>THE BLAH BLA RECIPIENT'S E-MAIL:&nbsp;<input type="text" name="recipient's e-mail"></H3>
    <H3>THE IPSUM OF THE BLAH BBLA:&nbsp;<input type="text" size="7" name="amount of blah bla">&nbsp;<span id="t"><t>(any sometex between blahtex - blahtex)</t></span></H3>
    <H3>THE TYPE OF BLAH BLA:</H3>
    <H3><input type="radio" name="blah bla type" value="lorumipsum">&nbsp;LORUMIPSUM&nbsp<span id="t"><t>(can be lorumipsum blah bal ipsum)</t></H3>
    <H3><input type="radio" name="blah bla type" value="lorumipsum">&nbsp;LORUMIPSUM&nbsp<span id="t"><t>(can be more text lorumipsum)</t></H3>
    <H3><input type="radio" name="blah bla type" value="lorumipsum">&nbsp;LORUMIPSUM&nbsp<span id="t"><t>(can be lorumipsum text more text)</t>
    <br><span id="t"><t>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;*Lorumipsum blah blas have no fixed bla textbla other than the total blah bla lorumipsumlorun or remaining ipsum.</t></span></H3>
    <H3>NUMBER OF DAYS:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SINGLE DAY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;MULTI DAY&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MULTI DAY QUANTITY</H3>
    <H3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="number of days" value="single" onclick="this.form.elements['MULTI DAY QUANTITY'].disabled=true; this.form.elements['MULTI'].value='';return true;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;<input type="radio" name="number of days" value="multi" onclick="this.form.elements['MULTI DAY QUANTITY'].disabled=false; this.form.elements['MULTI'].value='';>return true;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<input type="text" name="multi day quantity" size=4></H3>


    As you can see, I reverted back to a different code for the onclick commands, but I do think your code for the function is much cooler and would still like to use that, if at all possible. What do you think my problem is here? Thanks.

  9. #8
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    I have changed it so that i have put in my code as opposed to your code that was causing the errors. Here is the page.. I will write an explanation in a second thread
    JR

  10. #9
    JR
    JR is offline
    Senior Member JR's Avatar
    Join Date
    Nov 2002
    Location
    UK
    Posts
    4,354
    Member #
    257
    Ok here is the Javascript in the head section...
    Code:
    <script type="text/javascript">
    
    function showIt() {
    document.bids.quantity.style.visibility="visible";
    }
    function hideIt() {
    document.bids.quantity.style.visibility="hidden";
    }
    </script>
    and the actual form...
    Code:
    <form name="bids">
    <input type="radio" name="number of bids" value="single" onclick="hideIt()">
    <input type="radio" name="number of bids" value="multi" onclick="showIt()">
    <input type="text" name="quantity" style="visibility: hidden">
    </form>
    The javascript is for showing the textbox, it uses document.bids(the name of the form).quantity(the name of the textbox).style.visibility= hidden (hideit()) or visible (showit())

    These functions are then assigned to the appropriate radio button. So the textbox is hidden by default the style="visibility: hidden" is added into the text box tag.

    Hope you are sorted now, if not just reply in here!
    JR

  11. #10
    Senior Member duck444's Avatar
    Join Date
    Feb 2003
    Location
    east coast
    Posts
    402
    Member #
    751
    Liked
    2 times
    Thank you, jravenscroft! You're a wizzaaaaard!It works perfectly! No "error on page" messages at all.

    I've been trying to apply what you've shown me (with no luck) to one last stump I have to get over in my form. I know if I just vary the code you've provided, somehow I can get two radio buttons to similtaneously turn off/on three text boxes labelled "month", "day", and "year" respectively.(I've done it with straight html before but without the much appreciated flair of javascript, of course.) I know the three text box inputs probably have to be numbered somewhere and i'm thinking that's what the empty parentheses are for in the code you gave me but I'm not sure how to code it. I'll keep pluggin' away at it but if you get a chance, and should you know this one too, hopefully I can request one more assist out of you?

    Much thanks again for getting me over that other stumbling block and for any suggestions (or outright fixes) you again decide to share.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com