User input list using HTML plus a way to process the information

Question

I am trying to run a simple code for something at work -- me and my co-workers are going to make a list of songs. So using what seems to be a pretty simple coding in HTML I managed to achieve the following:

<!DOCTYPE html>
<html>
<body>

<form action="list">
Band Name:<br>
<input type="text" name="BandName">
<br>
Song Name:<br>
<input type="text" name="SongName">
<br><br>
<input type="submit">
</form>

</body>
</html>

This runs fine to create the buttons and boxes for user input. But I still do not know how to process this information. The ideal result would be a way to append the names, as the users placed their inputs, in a list at the action page. Would that be possible? I'm trying to achieve this in the HTML box of google sites, by the way.

Edit:

With some help, I was able to run the following code on http://jsfiddle.net/:

    ////HTML///
    <form>
      Band/Artist:<br>
    <input type='text' id='idea' />
        <br>
      Music:<br>
    <input type='text' id='idea2' />
            <br><br>
    <input type='button' value='Adicione' id='add' />
    <ul id='list'></ul>

<script type="text/javascript">    

    ////JAVASCRIPT//////

    //Defining a listener for our button, specifically, an onclick handler
    document.getElementById("add").onclick = function() {
        //First things first, we need our text:
        var text = document.getElementById("idea").value; //.value gets input value
        var text2 = document.getElementById("idea2").value; //.value gets input value
        //Now construct a quick list element
        var node = document.createElement("li"); 
        var textnode = document.createTextNode(text+" - "+text2);
        node.appendChild(textnode); 
        //Now use appendChild and add it to the list!
        document.getElementById("list").appendChild(node);

(the code came partially from TymeVM's answer in adding user input to a list of text items on a html page, but something seemed to be wrong with it)

It works fine. But I was not able to run it on page of Google Sites. Is it possible? If not, do you guys know a better option?

Please elaborate on exactly what is meant by " run it on page of Google Sites" — Mark Schultheiss
– Mark Schultheiss, Commented Nov 27, 2015 at 18:00
I cannot run the code in the HTML box or at the option HTML source (also, I do add <script type="text/javascript"> between the codes in HTML and javascript). What I am missing? — John Doe
– John Doe, Commented Nov 27, 2015 at 18:18
Is it a typo/paste issue or do you NOT have a closing </form> and </script> tag after each of those? — Mark Schultheiss
– Mark Schultheiss, Commented Nov 27, 2015 at 18:41
Thank you, Mark! I still have the same problem, though I think the code is correct. The issue seems to be with google sites. The code produces the input spaces and the button, but it does not produce the list with the inputs. — John Doe
– John Doe, Commented Dec 3, 2015 at 17:45

Community · Accepted Answer · 2017-05-23 10:27:10Z

As my edition seems to answer my question, I'll post it also as an answer. Please feel free to add any suggestions to it.

The following code, with the addition of Javascript, produces the needed answer for the first question above, according to http://jsfiddle.net/.

 ////HTML///
    <form>
      Band/Artist:<br>
    <input type='text' id='idea' />
        <br>
      Music:<br>
    <input type='text' id='idea2' />
            <br><br>
    <input type='button' value='Adicione' id='add' />
    <ul id='list'></ul>

   <script type="text/javascript">

    ////JAVASCRIPT//////

    //Defining a listener for our button, specifically, an onclick handler
    document.getElementById("add").onclick = function() {
        //First things first, we need our text:
        var text = document.getElementById("idea").value; //.value gets input value
        var text2 = document.getElementById("idea2").value; //.value gets input value
        //Now construct a quick list element
        var node = document.createElement("li"); 
        var textnode = document.createTextNode(text+" - "+text2);
        node.appendChild(textnode); 
        //Now use appendChild and add it to the list!
        document.getElementById("list").appendChild(node);

(As it was pointed in the edition of the question above, the code came partially from TymeVM's answer in adding user input to a list of text items on a html page. But it did not work on http://jsfiddle.net/)

But still does not run on Google Sites, it seems. I do not know if I should create another question for this problem.

Collectives™ on Stack Overflow

User input list using HTML plus a way to process the information

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related