Post input value into table

Question

I'm trying to get the text from a input textfield and place the value in a table row, but each time someone posts something the oldest post moves down 1 row, here's what I have but I'm very confused now

<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
<!--//
function thisPost(frm){
  if (frm.postHere.value == "")
      alert("Hey! You didn't enter anything!")
  else
frm.postHere.value = ""
<table style="width:100%">
  <tr>
    <td>post + frm.postHere.value</th>
  </tr>
</table>

}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="thisPost">
<P>Post this: <INPUT TYPE="TEXT" NAME="postHere"><BR><BR>
<INPUT TYPE="Button" Value="Post" onClick="thisPost(this.form)">
</P>
</FORM>
</BODY>
</HTML>

I think you are adding table heading. Change your "th" tag with "td" it will work as you expecting. — Satish Shinde, Oct 23 '14 at 00:08
@SatishShinde I updated my code above using what you said, but it's still not working, thanks for the reply though:) — Julian Buscema, Oct 23 '14 at 00:13

score 0 · Answer 1 · answered Oct 23 '14 at 00:27

There's a number of syntax errors in your code, so I'm not sure how you are able to run it in its current state. Also, your markup and approach is fairly dated. I would highly recommend investing time in a cross-browser DOM framework like jQuery and then an good front-end MVW and templating framework. That aside, I've re-worked your code into a more usable form. Hopefully this will get you going.

function thisPost(){
  //Use getElementById to retrieve the DOM elements you're looking for
  var txtPost = document.getElementById('txtPost');
  var post = txtPost.value; 
  if (post == "") {
      alert("Hey! You didn't enter anything!")
  } else {
    alert("The field contains the text: " + post);
    
    //Get a reference to your table
    var table = document.getElementById('posts'); 
    
    //TODO: This is unsafe and subject to script injection. 
    //http://en.wikipedia.org/wiki/Code_injection#HTML_Script_Injection
    table.innerHTML = '<tr><td>' + post + '</td></tr>' + table.innerHTML; 
    txtPost.value = "";
  }
}

//from: http://stackoverflow.com/a/10150042/402706
// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

//Don't bind events in your HTML markup, instead bind them in JavaScript. 
addEvent(document.getElementById('btnPost'), 'click', thisPost);

table{
  width:100%;  
}

<form name="thisPost">
  <p>
    Post this: <input type="Text" name="postHere" id='txtPost'>
    <br/><br/>
    <input type="Button" value="Post" id='btnPost'/>
  </p>
  <table id='posts'>
    
  </table>
</form>

Thanks a lot for answering, it means a lot:) Both of your answers were correct, I appreciate your time explaining everything. — Julian Buscema, Oct 23 '14 at 03:18

score 0 · Accepted Answer · answered Oct 23 '14 at 01:06

0

Demo on Fiddle

HTML:

<label>Post this:</label>
<input type="text" name="postHere" />
<br />
<br />
<button>Post</button>
<table></table>

JavaScript:

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("postHere")[0];
var cnt = 0;

btn.onclick = function() {
    if (!inpt.value) alert("Hey! You didn't enter anything!");
    else alert("The field contains the text: " + inpt.value);
    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(cnt++);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
};

answered Oct 23 '14 at 01:06

Weafs.py

22,731
9
56
78

Hey, I'm trying to figure out how to make the newest post go on top of the table instead of the bottom, how can I go about doing this? Here is my new fiddle: http://jsfiddle.net/kpkyvd7m/14/ – Julian Buscema Oct 23 '14 at 02:51
Last thing, do you know how I can add a
(break) after each post, so it separates them? – Julian Buscema Oct 23 '14 at 03:35
Well, you can't add `
`, since we are appending the text into a table. – Weafs.py Oct 23 '14 at 04:00
But there is a way around. Add empty rows. Check out this updated [Fiddle](http://jsfiddle.net/jsxyc658/). – Weafs.py Oct 23 '14 at 04:04

Post input value into table

2 Answers2

Demo on Fiddle

HTML:

JavaScript: