Creating a Display field

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.

Depending on whether you’re actually trying to submit something to a server or just display something temporarily while the user is on the page, you would need either JavaScript or a back end script in, for example, PHP.

I would like to display the content temporarily while the user is on the page

In that case, you’d need a little JavaScript that reads the input field when the submit button is clicked and then writes the text content to whereever you want to display it on the page.

Pardon the question but have you any knowledge in HTML or JavaScript?

Still learning… I have a project where I apply knowledge. :smile:

It’s a little difficult to pick you up if it’s unclear where you’re standing, so let’s start with you HTML :call_me_hand:

Can you post your code? Because your JavaScript will need to grab certain elements and manipulate them, so we’ll need to know which those are first. I guess you somewhere have a submit button, an input field and the element that should display what the user entered?

1 Like

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

fieldset tag

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…).

The thing is, JavaScript runs on the user’s computer. If you don’t provide the data that you want to display somewhere in your script, but instead try to get it from another file that obviously doesn’t lie on your user’s computer but on a server, you’d have to let your script make an AJAX (asynchronous JavaScript & XML) request. And I’m telling you right away, it’s not something I’m super experienced with, so maybe someone else would like to step in.

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.

The question is what you’re trying to learn here. Is it how you can use JavaScript to give your site interactivity (user clicks this and sees that), or are you more interested in learning how to fetch data that’s independent of your site and coming for example from a database and might change over time?

1 Like

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.

I want to learn how Javascripts read that file and displays the contents of that file on the webpage.

This is a little complicated. You can get the file upload using the <input type="file"/> field.

1 Like

Hmmm… i just thought of something. What if i add the type attribute to <option value="nigeria">Nigeria DCN</option>?

Naa… didn’t work… :disappointed:

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?

1 Like

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:

  1. getting the user to upload a single file

  2. outputting the file into the console.

  3. Once you can do this, then you can change #2 to output the file onto the window.

  4. Once you can do this, you’ll have to mess around with formatting and make sure it looks like how you want it.

  5. 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