1

I am a beginner to Javascript. Sorry for asking here, but I couldn't find a tutorial for this, and I hope someone can point me in the right direction.

I have an HTML page that has an unordered list on it. I have an input form that allows the user to submit a message. When the user submits a message, I want it to be added to the unordered list. This will be a permanent change to the website.

How do I make Javascript interact with the HTML like that?

---- Example:

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    <ul>
        <li>example 1</li>
        <li>example 2</li>
    </ul>
        <form>
            <input type='text' name='Message' value="">
            <input type='submit'>
        </form>
    </body>
</html>
Newb
  • 2,810
  • 3
  • 21
  • 35
  • You have HTML page ..You have Input form...you have ul..where are they? I cannot see them here.. – Deepak Ingole Jan 26 '14 at 04:33
  • this type of question isn't expected from experienced user like you. googling or reading books will definitely help you. any way have a look at [this](http://www.learn-javascript-tutorial.com/JavaScriptBasics.cfm#.UuSRSNLTlD8)... – Vedant Terkar Jan 26 '14 at 04:35
  • @Pilot I posted the HTML in my question. – Newb Jan 26 '14 at 04:35
  • Is there persistence in the data being submitted? Meaning, will the message that's submitted be there the next time someone loads the html page? – jerebear Jan 26 '14 at 04:36
  • @jerebear Yes, that's right. – Newb Jan 26 '14 at 04:37
  • @Newb - Unfortunately you have not tried it on your own. You are trying to straight away get into stackoverflow to get some code. Instead of that I would appreciate you try it. Play with jsFiddle or plunkr and then ask the question here. Hope you will make a fiddle and post it for others to look into! – RaviH Jan 26 '14 at 04:40
  • Is the ul data from a database or is it a static HTML file? Either way you'll need some sort of AJAX call with a server side language hooked up to alter the HTML page or database. – atxpunkrock Jan 26 '14 at 04:41
  • @Newb check ans below.. – Deepak Ingole Jan 26 '14 at 04:43
  • @Newb, do you have access to a database and some programming? HTML and Javascript are only two pieces of the puzzle. – jerebear Jan 26 '14 at 04:43
  • @jerebear I don't have a database. Is that really necessary for this task? I'm a reasonably competent programmer in C, Python, etc. I've just not done a lot of Web Development! – Newb Jan 26 '14 at 04:48
  • 1
    If you want the change to the site to be persistent and reflect everytime someone visits the site, you have to have a way to store it. Whether it's in a traditional database, appended to a text file or you're altering the actual file itself - there has to be someway to store that. HTML and JS alone won't give you that as they are both on the front end (there are exceptions). – jerebear Jan 26 '14 at 04:52
  • The simplest stack IMO would be HTML + MySQL + PHP (My preference). Display + Data storage + CGI. Javascript's not really involved unless you want to post to the server without refreshing the page. – jerebear Jan 26 '14 at 04:57

4 Answers4

1

The question's a little vague and I think it would be helpful to understand the concepts rather than have the specific code.

What you're trying to achieve, if you just want to manipulate the HTML using javascript, is to have an understanding of how JS can work with the DOM.

You do this by targeting elements. And you can target them either by their element type (div), a CSS classname, or most commonly by an id tag attribute.

In the example you've got above, when you submit the form you will need to call a function that will target the message input, grab its value. Then target the unordered list and append the HTML to the end of it containing the new message.

Since you're new, I would recommend learning jQuery. It'll get you up and running pretty quickly and you won't have to deal with as much diversity in varying browser implementations.

jerebear
  • 6,503
  • 4
  • 31
  • 38
  • My pleasure! Sorry it probably wasn't the answer you were looking for. – jerebear Jan 26 '14 at 04:59
  • That's all right - I just wanted some code because I'm trying to keep a to-do list online, just on an HTML page. I thought it would be easier. – Newb Jan 26 '14 at 05:00
1

This will be a permanent change to the website.

NO this wont be..you probably need to store them in you db then.Following is just a demo of how to append to unordered list

HTML,

<ul id='message'>
    <li>msg 1</li>
    <li>msg 2</li>
</ul>
<form onsubmit='appendMessage(); return false;'>
    <input type='text' id='message_text' value="" />
    <input type='submit' />
</form>

JS

function appendMessage() {
    var node = document.createElement("LI");
    var message = document.getElementById('message_text').value;
    var textnode = document.createTextNode(message);
    node.appendChild(textnode);
    document.getElementById("message").appendChild(node);
}

DEMO

Deepak Ingole
  • 14,912
  • 10
  • 47
  • 79
0
var button = document.getElementsByTagName("input")[1];
button.onclick = function (){
    var ul = document.findElementByTagName("ul")[0];
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(this.value));
    ul.appendChild(li);
};
Mike M
  • 752
  • 1
  • 5
  • 13
0

Perhaps you could use LocalStorage and some of the functions above to archive that. Here are a few examples of how to use LocalStorage and how to handler with objects(html tags with content for example).

http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/

Storing Objects in HTML5 localStorage

The drawnback´s are the support for older browsers and that the changes will only be available for the client where the changes where made.

The best aproach, it´s to combine the changes in javascript with some kind of storage(localstorage, SQL, NoSQL)

http://www.mongodb.org/ <--- NoSQL database

Community
  • 1
  • 1
eladolo
  • 91
  • 6