The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Simple textbox output based on dropdown selection
L337NEWB
post Feb 4 2021, 04:49 PM
Post #1





Group: Members
Posts: 3
Joined: 4-February 21
Member No.: 27,772



Hi everyone,

Pleasure to meet you.

This is probably the easiest request for help ever but I have been reading and fighting through modifying HTML for hours now.

I had this down and functioning until I figured out the "alert" in my code triggered a pop-up window with the result mentioned below and most of the users have pop-ups disabled on their browser.

I want to make a simple one page webpage which is going to assist non-technical teammates in selecting the proper model of network router to use based on the bandwidth of a customers circuit. The output I want would be simple small text box that gets filled in so they know. (example below)

I don't have a database or server with php or anything so it would be a preset of output options within the HTML.

Example: a dropdown menu would have options in bandwidth. If a user selected 100Mbps as the bandwidth I want the text box to display "Cisco 920.a". There are going to be a bout 10 bandwidth options total and the same static results based on the dropdown triggered by a submit button.

I hope this makes sense for what I am looking for. Nothing pretty right now as far as colors and all as I will do that later.

I appreciate any help you can provide!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 4 2021, 08:08 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



A JavaScript alert()? That isn't a popup and it should run no matter if they block popups.

Anyway...

CODE
function doIt(x)
{
   document.getElementById('output').innerHTML = x;
}


HTML
<html>
<select onchange="doIt(this.value)">
<option value="Cisco 100">100Mbps</option>
<option value="Cisco 200">200Mbps</option>
<option value="Cisco 300">300Mbps</option>
</select>
</form>

<div id="output">Your router will appear here...</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L337NEWB
post Feb 4 2021, 11:05 PM
Post #3





Group: Members
Posts: 3
Joined: 4-February 21
Member No.: 27,772



Hi Pandy,

Thanks for the reply.

The script I was using had some result on "alert" that would pop-up a rectangle box once you clicked submit that was outside of the normal webpage window.

Anyway, pardon the novice question here but you posted "code" and "html" and I dont really know how to work that into my html coding. The Html part I get but where do I inser the "code" part? sorry...just an ameteur here
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 05:27 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(L337NEWB @ Feb 5 2021, 05:05 AM) *

The script I was using had some result on "alert" that would pop-up a rectangle box once you clicked submit that was outside of the normal webpage window.


OK. That must have been a JavaScript alert. They look pretty different in each modern browser, but they are always small, usually have the word JavaScript in the title and always have an OK button.

Attached Image

They are created by a line like this in your JavaScript.

CODE
alert('Hello world!');


They are not popup windows and are not affected by popup blockers.

If that's not what you use, I don't know what you mean. It would help if you showed us what you've got if you want to use what you already have.

CODE
Anyway, pardon the novice question here but you posted "code" and "html" and I dont really know how to work that into my html coding. The Html part I get but where do I inser the "code" part? sorry...just an ameteur here


The code part is JavaScript and the easiest is to use it in a code block in HEAD. Like so.

CODE
<script type="text/javascript">
<!--

// JavaScript code here

//-->
</script>


Or like so.

CODE
<script>

// JavaScript code here

</script>


Both will work. The latest version of HTML, HTML 5, uses the latter, but in practice it doesn't matter which of them you choose.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 06:16 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You'd better use a "blank" option at the top of the list or the user has to first select another option if he wants the first and may not understand that. Sorry, I should have used that to begin with.

HTML
<form>
<select onchange="doIt(this.value)">
<option value="">--Please choose your bandwidth--</option>
<option value="Cisco 100">100Mbps</option>
<option value="Cisco 200">200Mbps</option>
<option value="Cisco 300">300Mbps</option>
</select>
</form>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
L337NEWB
post Feb 5 2021, 04:34 PM
Post #6





Group: Members
Posts: 3
Joined: 4-February 21
Member No.: 27,772



Exactly what I needed guys. Thank you so much
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 5 2021, 05:31 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You are welcome. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th March 2024 - 01:04 AM