How do I add a display field in HTML? such that when a Submit Button is clicked, Input data is displayed in a section of the webpage.
I would like to display the content temporarily while the user is on the page
Still learning… I have a project where I apply knowledge.
It’s a little difficult to pick you up if it’s unclear where you’re standing, so let’s start with you HTML
This is the html code:
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Echo(DCN)</title> <link rel="stylesheet" href="dc.css" /> </head> <body> <h1>DCN Connectivity</h1> <form action=""> <label for="dcn"> <b>Select Location:</b> <select name="dcn" id="node" class="border"> <option value="">Click to select node</option> <option value="nigeria">Nigeria DCN</option> <option value="Accra">Accra DCN</option> <option value="Seixal">Seixal DCN</option> <option value="CIV">CIV DCN</option> </select> </label> <br /><br /> <button type="submit" value="Test" class="border">Click to Test DCN Connectivity</button> </form> <fieldset> <legend class="border"><b>Nodes to Pings</b></legend> </fieldset> <script src="dc.js"></script> </body> </html>
I don’t have a Js script yet
But what i am trying to achieve is , whenever i node is selected, it opens a csv file related to the selected node and display the content of the csv file inside the
Well the complexity of your problem just exploded a little. I thought you wanted the user to type something into an input field and then display their input somewhere on the page (for whatever reason…).
If the data you want to display doesn’t change over time, and only includes a few values, I’d personally just throw them into my JS file as a string and then display the parts that the user wants to see, depending on their selection. That would be super easy to do.
My goal here is when a user selects an option from the drop-down list, it prompts the user to upload a file (.csv or .xls) , then the content of the file is displayed on the webpage.
This is a little complicated. You can get the file upload using the
<input type="file"/> field.
Hmmm… i just thought of something. What if i add the type attribute to
<option value="nigeria">Nigeria DCN</option>?
Naa… didn’t work…
I’m not sure if I can help a lot, but I’m interested to see where this goes because this is something I haven’t really learned yet, too.
Just to be clear of what you’re trying to do, because I think I totally misunderstood you the first time: You want the user to upload a csv file and then display the content? Like… a csv file viewer?
The code below will allow a user to choose from the drop-down list:
<label for="dcn"> <b>Select Location:</b> <select name="dcn" id="node" class="border"> <option value="">Click to select node</option> <option value="nigeria">Nigeria DCN</option> <option value="Accra">Accra DCN</option> <option value="Seixal">Seixal DCN</option> <option value="CIV">CIV DCN</option> </select> </label>
Whenever a list is selected, a pop-out window appears for the user to upload a file and the file is displayed to the screen. it has to be a csv file but other files can be accepted. So something a like a csv file viewer is acceptable as far as whatever file the user selects from their local machine is displayed on the webpage
If I were trying to do this, I would forget the list and concentrate on:
getting the user to upload a single file
outputting the file into the console.
Once you can do this, then you can change #2 to output the file onto the window.
Once you can do this, you’ll have to mess around with formatting and make sure it looks like how you want it.
Finally, you can incorporate the select/options list. I actually don’t understand what the options are used for, since it seems the user is the one choosing what to upload? But either way, I’m pretty sure you want to get the other stuff working first, since a select input makes things much more complicated.
Thanks @CactusWren2020 will consider this option