How to Display Data getting from HTML Form

After creating a few text input form in a table (see my previous post here) , it’s time to make them functional. The most basic thing that the web app should do is to get the input from user and display them in another table afterwards.

First, let’s identify a few sections that are closely related in order to get the input and display them.

  1. javascript section
    – use jquery will be much easier.
    – this is where we will command to get the input from the relevant IDs and somehow display the input.
  2. HTML form
    – i need to give all the inputs the proper IDs so that the javascript can identify them.
    – the submit button should have its ID too.
  3. HTML display
    – this will be the section which i will display user’s input.

(no python function required at this stage yet)

I did a quick search on the internet and i could not find any suitable answer to my requirements. I found this “Getting data from HTML form elements using Javascript”  which uses document.getElementById(“user_text”) but there is a pop up message (alert) to display it. So how i know how to get the input but how do i display them as part of the page in HTML?
Then i found another here, “How to Retrieve HTML Form Data Using JavaScript“.
It introduces document.writeIn() but where does it write to? I did not try this.

All in all, i have been using jQuery and there must be someway i can use it to do anything. Yes, in fact everything should just be a direct application of its API.

So here’s what i did to get an input from user and display it below the config table when the button “submit” is pressed.

  1. in HTML form:
  2. <form name= “input” action=”#” method=”get”>

    <input type=”text” name=”firstnumber” value=” ” id=”number_one”>

    <input type=”submit” id=”configsubmit” value=”Submit”>

  3. in HTML display:
  4. <div id=”configtable”>
    <p>Response Number:</p>
    <p id=”response_row_one”></p>
    </div>

  5. in javascript:
  6. $(‘#configsubmit’).click(function(){
    number_one=$(‘#number_one’).val();
    $(‘#response_row_one’).empty().append(number_one);
    $(‘#configtable’).show();
    });

.empty().append();
this is the key that i have been looking for! Which delete whatever is in the list before appending it
.append() will not work because it will keep on adding the the inout value at the end of the sentence.
.replaceWith() will not work because it only replace once.

I found this useful information from here: how to do a repeated replace or update in jquery

With these, i passed a simple test for one input and i can proceed with the rest of the inputs and move on to post the data to python function!😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s