jquery - Get Html values from a text box and append to table

Question

I have a text box (id = textBox1) where the html strings can be entered. Ex : <i> Country </i>

Is there a way to get this value using jQuery and append it to a table. ex : I can get $('#textBox1').val() = <i>Country</i>.

However when I append to a table, the html styles have been and applied and it stored Country in italics. I do not want to strip the html tags. It should appear as is in the table.

var text1= $("#text1").val();
var text2= $("#text2").val();

$("#tablePost > tbody").append("<tr data-key='" + text1+ "' data-value='" + value + "'><td>" + key + "</td><td>" + text2 + "</td></tr>");

Note: This should support adding multiple rows to a table.

Are you trying to strip the HTML tags entered into the textfield? — Picko, Sep 26 '16 at 14:32
Its not particularly clear what your question is - are you really just asking how to read the value of a textbox — Jamiec, Sep 26 '16 at 14:33
Unclear whether you're trying to set the value, or get the value. — Jamie Barker, Sep 26 '16 at 14:35
Can you clarify what exactly you're trying to do? If you just want to get whatever is inside the box - use the .val() method included in my answer below. — James, Sep 26 '16 at 14:36
Either way, did you look at the jQuery documentation before coming here? https://api.jquery.com/val/ — Jamie Barker, Sep 26 '16 at 14:38
@James I'm trying to get the value as is. It is storing the text in italics. But I would like the value as ` country ` instead of just Country — Dev, Sep 26 '16 at 14:38
`It is storing the text in italics.` what is? textboxes dont "store" anything. Is the user typing in HTML tags? If they are then it will come through as-is when you use `val()`. Again, unclear what your question is. — Jamiec, Sep 26 '16 at 14:40
@Rashmi Are you saying that the text is entered in italic format and that you want to then add the tags around it - if it's in italic? — James, Sep 26 '16 at 14:41
Possible duplicate of [How do I get the value of a textbox using jQuery?](http://stackoverflow.com/questions/463506/how-do-i-get-the-value-of-a-textbox-using-jquery) — Mohammad, Sep 26 '16 at 14:45

score 3 · Answer 1 · answered Sep 26 '16 at 14:33

3

Getting the value is done through val() and setting the value is done through val(newVal).

var value = $('#textBox1').val(); // getter
$('#textBox1').val("<i>Country</i>"); // setter

answered Sep 26 '16 at 14:33

Konstantin Dinev

34,219
14
75
100

James · Answer 2 · 2016-09-26T15:20:36.050

0

You can just use the .val method without passing in any arguments and it should return whatever is inside the input field.

var textBox1Value = $('#textBox1').val()

Would return whatever is inside at the time.

Check out http://api.jquery.com/val/ for more info on using the .val() method.

EDIT:

I think your append method is escaping/ignoring the HTML. You could try getting around this using the .createTextNode method.

Try this code instead:

$("#tablePost > tbody").append(
    "<tr data-key='" + text1 
    + "' data-value='" + document.createTextNode(value) 
    + "'><td>" + key 
    + "</td><td>" + text2 
    + "</td></tr>"
);

jQuery actually uses the document.createTextNode() in it's own library. I think this might fix the problem for you.

I've only wrapped it around your 'value' variable. You'd need to do the same for any other examples.

Side note: .val() shouldn't strip out any HTML, likewise using .append shouldn't either.

edited Sep 26 '16 at 15:20

answered Sep 26 '16 at 14:32

James

442
2
13

trying this- but I'm getting : [object Text] – Dev Sep 26 '16 at 15:26
Are you sure you're passing in the value to the createTextNode method? I would have thought that would work, here's a basic fiddle: https://jsfiddle.net/pb73v1z0/ Are you able to create your own fiddle with your code? – James Sep 26 '16 at 15:30
@Rashmi Nevermind - I'm getting the same issue now. Will update my answer. – James Sep 26 '16 at 15:38
yes - it works when used without append. Like you mentioned it has to do with append. I have also tried using parseHtml - It is adding endtag automatically when i tried text as - tested – Dev Sep 26 '16 at 15:40

score 0 · Answer 3 · answered Sep 30 '16 at 22:34

One of the way to store html values in the table is : Generate a random id's for the cell and append it to a table then add a text to the table

var text1= $("#text1").val();
var text2= $("#text2").val();
var trId = Math.floor(Math.random() * 9999);

$("#tablePost > tbody").append("<tr data-key='" + text1+ "' data-value='" + value + "'><td>" + key + "</td><td id = "+ trId + "></td></tr>"); 

$("#"+ trId).text(text2)

score -1 · Answer 4 · answered Sep 26 '16 at 14:33

-1

It seems that you would like to strip the HTML tags inside the textbox if so, you can use Regex,

var val = $('#textBox1').val().replace(/(<([^>]+)>)/ig,"");

if not, like others suggested just use

var val = $('#textBox1').val()

answered Sep 26 '16 at 14:33

Picko

148
6

http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454 – Jamiec Sep 26 '16 at 14:39

jquery - Get Html values from a text box and append to table

4 Answers4