Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Simple textbox output based on dropdown selection

Posted by: L337NEWB Feb 4 2021, 04:49 PM

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!

Posted by: pandy Feb 4 2021, 08:08 PM

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>

Posted by: L337NEWB Feb 4 2021, 11:05 PM

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

Posted by: pandy Feb 5 2021, 05:27 AM

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

Or like so.

CODE

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.

Posted by: pandy Feb 5 2021, 06:16 AM

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>

Posted by: L337NEWB Feb 5 2021, 04:34 PM

Exactly what I needed guys. Thank you so much

Posted by: pandy Feb 5 2021, 05:31 PM

You are welcome.