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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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 MontyWeb Ninja at largeCommented:
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?
Graemewebber4technologiesAuthor Commented:
Hi Monty, I am using ASP language to eventually in put into an Access database
Big MontyWeb Ninja at largeCommented:
and the other questions i asked?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Graemewebber4technologiesAuthor Commented:
oh sorry, yes I would be willing of course if it does not affect ASP or using Access
Big MontyWeb Ninja at largeCommented:
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
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.
Big MontyWeb Ninja at largeCommented:
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.
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>)
Big MontyWeb Ninja at largeCommented:
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.
Graemewebber4technologiesAuthor Commented:
yes I do know how to insert to the database and using the database to populate a dropdown box
Big MontyWeb Ninja at largeCommented:
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

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?
Big MontyWeb Ninja at largeCommented:
in this case it doesn't matter, as it won't be part of the data that is submitted when you POST the form
Graemewebber4technologiesAuthor Commented:
ah fantastic!

that data is all on the page, does it supposed to display anything?
Big MontyWeb Ninja at largeCommented:
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
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

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> ?
Big MontyWeb Ninja at largeCommented:
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
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
Big MontyWeb Ninja at largeCommented:
if you want to show/hide fields based off of a selection, then yes, an IF statement is the way to go
Graemewebber4technologiesAuthor Commented:
ok, how would i do that?

never done a IF statement on a div or show/hide as you say
Big MontyWeb Ninja at largeCommented:
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
Graemewebber4technologiesAuthor Commented:
Cheers for that, have a great meeting, thanks heaps for your help. im sure I will have more questions!

thanks!
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
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
Big MontyWeb Ninja at largeCommented:
can you post your latest version of your code so I can make sure I have the latest and greatest?
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

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.