Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2010
    Posts
    38
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Form instead text in JavaScript

    Dear all,
    Can anyone help me with this… I do not know if this is possible to be done…
    Instead of text:

    "Your favorite color is <b>Green</b> right?"

    I need to show form like this:
    Code:
    <form action="auto.htm" method="get" >
    Your state<br> 
    <select name="statecode" id="statecode">
    <option value="">Choose State...</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    </select> 
    <input type="submit" name="search" value="Get Quotes" />
    </form>
    Thank you in advance

    This is code I wish to modify.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    html,body {
        padding:0;
        height:100%;
     }
    #right {
        width:500px;
        height:100%;
        background-color:#999;
        text-align:center;
        float:right;
     }
    #left {
        height:100%;
        margin-right:500px;
        background-color:#f00;
        text-align:center;
     }   
    </style>
    <script type="text/javascript">
    function change()
    {
       switch (document.getElementById("select").value)
       {
          case "1":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Green</b> right?"
          break;
          case "2":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Red</b> right?"
          break;
          case "3":
          document.getElementById("change").innerHTML = "Your favorite color is <b>Yellow</b> right?"
          break;
       }
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change()" id="select">
       <option value="">------</option>
       <option value="1">Green</option>
       <option value="2">Red</option>
       <option value="3">Yellow</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
       Original Text
    </div>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,027
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    I do not really understand the question or see any connection between selecting a color from three options and showing a form.

    Please say exactly what it is you wish to happen and what you want to cause it to happen.

    In principle you will need to enclose your form within a <div> which you change from style.display = "none" to style.display = "block" to make it visible ... when what happens?

    BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.


    Ninety-nine percent of the adults in this country are decent, hard-working, honest Englishmen. It's the other lousy one percent that get all the publicity. But then - we elected them.
    Last edited by Philip M; 11-15-2010 at 06:40 PM.

  • #3
    New Coder
    Join Date
    Feb 2010
    Posts
    38
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I'm sorry...

    Code:
    Please say exactly what it is you wish to happen and what you want to cause it to happen.
    I need, when somebody select option from dropdown menu, I wish to show adequate form, instead to show text "Your favorite color is <b>Green</b> right?". But, when I put <form>, script stops to work. With just text, script working fine.
    Last edited by young_coder; 11-15-2010 at 07:16 PM. Reason: I wasn’t specific.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    38
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Might be this code sample without colors be less confusing

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function change()
    {
       switch (document.getElementById("select").value)
       {
          case "1":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 1."
          break;
          case "2":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 2."
          break;
          case "3":
          document.getElementById("change").innerHTML = "This text has to be replaced with form adequate to option 3."
          break;
       }
    }
    </script>
    </head>
    <body>
    What is your favorite color
    <select onchange="change()" id="select">
       <option value="">------</option>
       <option value="1">option 1</option>
       <option value="2">option 2</option>
       <option value="3">option 3</option>
    </select>
    <div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
       This text is shown when option is not selected
    </div>
    </body>
    </html>
    And, this is form to be shown for instance for option 1:

    Code:
    <form action="auto.htm" method="get" >
    Your state<br> 
    <select name="statecode" id="statecode">
    <option value="">Choose State...</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    </select> 
    <input type="submit" name="search" value="Get Quotes" />
    </form>
    Last edited by young_coder; 11-15-2010 at 08:02 PM. Reason: I wasn’t precise enough…

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Just have multiple invisible forms with different names and then put the corresponding name in the option value. When user selects an option, show the corresponding form based on the selected option value.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var prevForm;
    function change(selectedOptionValue)
    {
        if (selectedOptionValue){
            document.forms[selectedOptionValue].className = 'showForm';        
        }
        //hide previously shown form if any
        if (prevForm) prevForm.className = 'hiddenForm';
        prevForm = document.forms[selectedOptionValue];
    }
    </script>
    <style type="text/css">
    form.hiddenForm {display:none;}
    form.showForm {display:block;}
    </style>
    </head>
    <body>
    <form>
    <select onchange="change(this.value)" id="select">
       <option value="">------</option>
       <option value="form1">option 1</option>
       <option value="form2">option 2</option>
       <option value="form3">option 3</option>
    </select>
    </form>
    
    <form name="form1" action="auto.htm" method="get" class="hiddenForm">
    Your state<br> 
    <select name="statecode" id="statecode">
    <option value="">Choose State...</option>
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    </select> 
    <input type="submit" name="search" value="Get Quotes" />
    </form>
    
    <form name="form2" action="whatever.htm" method="get" class="hiddenForm">
    ...content for form2
    </form>
    
    <form name="form3" action="whatever.htm" method="get" class="hiddenForm">
    ...content for form3
    </form>
    
    </body>
    </html>

  • Users who have thanked glenngv for this post:

    young_coder (11-20-2010)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •