JavaScript or jQuery dynamically show form input

Question

Sorry if this is a daft question, but if I display a text input field, say your_age in a table cell, then want to dynamically display what the user inputs in the table cell next to it, how would I do that in JavaScript/jQuery?

For example if I enter 100 I want the table cell next to the input field to display 100 without the need to click a submit button.

Any help would be great. Thanks.

You are looking for the onKeyUp event. Basically every time a key is released it will fire some bit of JavaScript that can do whatever you want. — Jason Sperske
– Jason Sperske, Commented Aug 15, 2013 at 17:59
Have you analyzed your layout in terms of UX, why do you need to repeat what the user is entering in the input? — omma2289
– omma2289, Commented Aug 15, 2013 at 18:00

Ian · Accepted Answer · 2013-08-16 14:04:32Z

1

$('#myField').on('keyup', function() {
    $('#myTableCell').text($(this).val());
});

Demo: http://jsfiddle.net/seancannon/K8qZ9/7/

edited Aug 16, 2013 at 14:04

Ian

51k13 gold badges104 silver badges111 bronze badges

answered Aug 15, 2013 at 17:59

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ian Over a year ago

.text() is usually more appropriate for user input (or any input at all)

Ian Over a year ago

What good would docs do here? Type <script>alert("asdf") and it alerts that immediately. .html() opens up that vulnerability, while .text() does not. If you're not expecting HTML, don't use it

Esailija Over a year ago

@Ian agree, this is begging for second-order XSS.. I must punish with a downvote

SeanCannon Over a year ago

Wow so instead of clicking "edit" and changing "val" to "text" I get 3 downvotes? Spaz much, it's the client-side. The user would be hacking his own client, way to think that one through. Also, way to give away that you have multiple accounts.

SeanCannon Over a year ago

I was talking to Esailija :) Anyway my point stands. Putting .val() in the table isn't an XSS threat at all and would only inconvenience the user entering the HTML.

|

mrkre · Accepted Answer · 2013-08-15 18:05:05Z

1

You can use jQuery's .change()

<input type="text" id="txt_name"  />

<script type="text/javascript">
$(document).ready(function(){
    $("#txt_name").change(function(){
        var blah = $(this).val();
        $('#id_of_cell').val(blah);
    });
})
</script>

answered Aug 15, 2013 at 18:05

mrkre

1,54815 silver badges43 bronze badges

2 Comments

SeanCannon Over a year ago

That won't reflect new text until the field is blurred.

mrkre Over a year ago

@AlienWebguy that's right. Your answer is the correct one. Will leave the erroneous answer here anyway.

Farhan · Accepted Answer · 2013-08-15 18:01:54Z

0

$('#input1').keyup(function() {
 $('#input2').val($(this).val());
});

answered Aug 15, 2013 at 18:01

Farhan

7525 silver badges10 bronze badges

Collectives™ on Stack Overflow

JavaScript or jQuery dynamically show form input

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related