Dynamic? Dropdown Box

unsure if this is what it is called, hopefully I am correct

What I want to do is create a drop down box, for when an option is selected, certain HTML is displayed when selected
Graemewebber4technologiesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i noticed you listed classic asp and MS Access as your topics. Seeing how these 2 technologies are very different, can you clarify which technology you want to do this in?

Also, to make sure I understand correctly, do you want one dropdown box that, when an option is selected, displays some html somewhere on your page / app? What kind of data, static or it comes from a database?

if this is for a web page (using classic asp), do you, or are you willing to, use jQuery, a javascript based framework that makes coding in javascript easier?
0
Graemewebber4technologiesAuthor Commented:
Hi Monty, I am using ASP language to eventually in put into an Access database
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
and the other questions i asked?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Graemewebber4technologiesAuthor Commented:
oh sorry, yes I would be willing of course if it does not affect ASP or using Access
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Also, to make sure I understand correctly, do you want one dropdown box that, when an option is selected, displays some html somewhere on your page / app? What kind of data, static or it comes from a database?

please make sure you read the entire post before responding (not just with me, but for everyone). I want to help but I'm unable too if you don't if you don't respond in full to the questions I ask
0
Graemewebber4technologiesAuthor Commented:
Sorry again.

what I want to do is give a client an option, when this is selected, below shows details of the option they have selected.

this data is all coming from an Access Database, and the selected options will go back into the database for the client.
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I'm not trying to be a dink, I just want to make sure we're both on the same page.

if I understand correctly, you want to have one dropdown that contains data from your database. When the user selects an option, you then want to display that options text somewhere on the page (for now, we'll put in a DIV), and then when  the user saves the form, that option is saved to the database. Is this all correct?

Can you post already what you have, that'll give me a sense of what help you need.
0
Graemewebber4technologiesAuthor Commented:
yes, this sounds correct.

I have never done this before and everything I have looked at are all very different, so the only thing I have to go on is a standard dropdown box (<select>)
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
do you know how to save data to a database? what about building the dropdown list from the database? while you respond to these, I'm going to start up a basic solution for you.
0
Graemewebber4technologiesAuthor Commented:
yes I do know how to insert to the database and using the database to populate a dropdown box
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
ok great, I'll leave that part for you to do then.

The following code will display an options TEXT based upon what's selected. Simply add a submit button to post that data to be saved in a database.

Notice the 3rd line is a reference to a jquery library, without that line it fails!

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#selOptions").change(function () {
                    $("#dvOptionText").html($("#selOptions option:selected").text());
                });
            });
        </script>
    </head>

    <body>
        <form name="frm" id="frm" method="post" action="test.asp">
            <select name="selOptions" id="selOptions">
                <option value="1">First Option</option>
                <option value="2">Second Option</option>
                <option value="3">Third Option</option>
                <option value="4">Fourth Option</option>
            </select>
        </form>
        <div id="dvOptionText"></div>
    </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Graemewebber4technologiesAuthor Commented:
just about to try it out. does the line

<div id="dvOptionText">

have to be outside of </form>

reason being, I have </form> at the very bottom of the 3000 line of the page, or can I put </form> and another <form> in there and not worry?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
in this case it doesn't matter, as it won't be part of the data that is submitted when you POST the form
0
Graemewebber4technologiesAuthor Commented:
ah fantastic!

that data is all on the page, does it supposed to display anything?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
you should be seeing whatever option is selected appear in that DIV. if you're not, either post the code and better yet post a link to the page if it's accessible
0
Graemewebber4technologiesAuthor Commented:
unfortuantely I am not seeing anything

<head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#custpayment").change(function () {
                    $("#dvOptionText").html($("#custpayment option:selected").text());
                });
            });
        </script>
</head>
<body>
<form name=BodyForm method=POST action="" id=BodyForm>
<table>
	<tr>
		<td colspan=4><font size=4><b>Please select how you would like to pay your deposit or in full amount<br>&nbsp;(Mastercard, VISA & AMEX attract a 1.9% surcharge on Credit Cards)&nbsp;</b></font>
		<select name=custpayment id=custpayment>
		<option>---</option>
		<option value=1>Instore</option>
		<option value=2>Direct Deposit</option>
		<option value=3>Credit Card</option>
		<option value=4>Debit Card</option>
		</select></td>
	</tr>
	<tr>
		<td colspan=5><div id="dvOptionText"></div></td>
	</tr>
</table>
</form>
</body>

Open in new window

0
Graemewebber4technologiesAuthor Commented:
Sorry ignore that! once I selected an option, it shows! :)

I am guess from here I do IF statements on the DIV for each different set of html text I need? and if I need another dynamic drop down, just use same code but add in another <script> ?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I do IF statements on the DIV for each different set of html text I need??

i'm not sure what you mean by this, can you explain further? you shouldn't need to add any IF statements just to display the text from the dropdowns.  the line:

$("#custpayment").change(function () {

attaches an anonymous function (a function without a name) to the onchange event of the field custPayment. if you want to add another dropdown to have the same piece of functionality, you would just attach another anonymous function to that dropdown, like this:

<script type="text/javascript">
            $(document).ready(function () {
                $("#custpayment").change(function () {
                    $("#dvOptionText").html($("#custpayment option:selected").text());
                });

                $("#secondDropdown").change(function () {
                    $("#dvOptionText").html($("#secondDropdown option:selected").text());
                });
            });
        </script>

Open in new window


this would put the text in the dvOptionText DIV. Of course, you could put it wherever you wanted to, just replace "dvOptionText" with the ID of the element you want to use
0
Graemewebber4technologiesAuthor Commented:
Fantastic on the extra script I will use that when need be. Thank you

With the IF statement

example;

from dropdown box
IF Instore THEN
--display store details (address, etc)
ELSEIF direct deposit THEN
--display store DD details
ELSEIF credit card OR debit card THEN
--show form to enter details
END IF

hope this makes sense
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
if you want to show/hide fields based off of a selection, then yes, an IF statement is the way to go
0
Graemewebber4technologiesAuthor Commented:
ok, how would i do that?

never done a IF statement on a div or show/hide as you say
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i have a meeting I have to head into for a few, but have a look at this tutorial:

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

it's a pretty good basic example of how to show/hide elements on your page using jquery. The most import part is to put the elements you want to show or hide inside their own DIV, that way you can then reference that DIV and it'll toggle everything contained within.

See what you can do and I'll check back later
0
Graemewebber4technologiesAuthor Commented:
Cheers for that, have a great meeting, thanks heaps for your help. im sure I will have more questions!

thanks!
0
Graemewebber4technologiesAuthor Commented:
Found this example, will give it ago tomorrow. bed time for you me! thanks for your help, Qs for tomorrow :)

http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-select-box
0
Graemewebber4technologiesAuthor Commented:
still in need of this.. the example is interesting, but doesn't work properly. the info that the drop down supposed to display doesnt show
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
can you post your latest version of your code so I can make sure I have the latest and greatest?
0
Graemewebber4technologiesAuthor Commented:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="red"){
                $(".box").not(".red").hide();
                $(".red").show();
            }
            else if($(this).attr("value")=="green"){
                $(".box").not(".green").hide();
                $(".green").show();
            }
            else if($(this).attr("value")=="blue"){
                $(".box").not(".blue").hide();
                $(".blue").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
<%
			Set oConn=Server.CreateObject("ADODB.Connection")
			oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("core/activcore.mdb")
	  		Set NameShop=oConn.Execute("SELECT * FROM cons,office,brands,login_page,login_activorder WHERE cons_ID=1 AND cons.office_pseudo=office.office_pseudo AND cons_brand=brands.brand_ID")
%>
</head>
<body>
    <div>
        <select>
            <option>---</option>
            <option value="red">Instore</option>
            <option value="green">Direct Deposit</option>
            <option value="blue">Credit/Debit Card</option>
        </select>
    </div>
    <div class="red box">
			      <table border=0 cellpadding=0 cellspacing=0>
			  <tr>
			    <td><img src=images/store-128.png width=50></td>
			    <td colspan=4><font size=4><b>Please select to which store you wish to make your payment </b></font><select name=acceptstore>
			    <%
			      Set Store=oConn.Execute("SELECT * FROM office WHERE brand_ID="&NameShop("brands.brand_ID"))
			      Set CurrStore=oConn.Execute("SELECT * FROM office,enq WHERE office_pseudo=cons_pseudo AND enq_ID="&Request.Form("enqid"))
			    %>
			      <option><%=CurrStore("office_location")%></option>
			      <option>---</option>
			    <%
			      Do Until Store.EOF
			    %>
			      <option><%=Store("office_location")%></option>
			    <%
			      Store.MoveNext
              Loop
            Store.Close
			    %>
			      </select></td>
			  </tr>
			      </table>
	</div>
    <div class="green box">
			      <table border=0 cellpadding=0 cellspacing=0>
					  <tr>
						<td><img src=images/bank-128.png width=50></td>
						<td colspan=4><font size=4><b>Please find our direct deposit details below</b></font></td>
					  </tr>
					  <tr>
						<td width=70>&nbsp;</td>
						<td colspan=4>Account Name - <%=NameShop("brand_name")%>&nbsp;<%=NameShop("office_location")%><br>Reference - Surname<br>BSB - 082 057<br>Account Number - 754186032</td>
					  </tr>
			      </table>
	</div>
    <div class="blue box">
			      <table border=0 cellpadding=0 cellspacing=0>
			        <tr>
			          <td align=right width=200>Name on Card&nbsp;</td>
			          <td width=200><input type=text name=cardname></td>
			        </tr>
			        <tr>
			          <td align=right>Card Number&nbsp;</td>
			          <td><input type=text name=cardnum></td>
			        </tr>
			        <tr>
			          <td align=right>Card Expiry (MM/YY)&nbsp;</td>
			          <td><input type=text name=cardexpire></td>
			        </tr>
			        <tr>
			          <td align=right>CCV Number&nbsp;</td>
			          <td><input type=text name=cardccv></td>
			        </tr>
			      </table>
	</div>

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.