CODEWITHSUNDEEP
jquery
dazzle
dazzle

Reputation: 243

save entered text below the text field on hitting enter

I have a text field. When user enters some text & hits enter, the text should appear below with a cross (X) mark against it. User can enter as many texts in it and hit enter and can also cancel the text using the X mark. I will use the entered text to send to the server. Can you let me know how this can be done.

Upvotes: 0

Views: 3871

Answers (2)

Khoa Nguyen
Khoa Nguyen

Reputation: 1317

You can do like this:

HTML:

<input id="textbox" name="textbox" value="" />
<div id="textlist"></div>

Javascript

$('#textbox').keypress(function(event) {
  if (event.which == '13') {
     event.preventDefault();
     $('#text-list').append('<div>' + $(this).val() + ' <span onclick="$(this).parent().remove();">X</span> </div>');
      $(this).val('');
   }
});

http://jsfiddle.net/ynhat/sKaU4/

Upvotes: 0

CoolEsh
CoolEsh

Reputation: 3154

Here is a quick solution for you, but it can be upgraded:

HTML

<input type="text" id="textBox" value="" />
<div id="resultsDiv"></div>

JS

$( '#textBox' ).keyup( function( eventObj ) {
    if ( eventObj.which == 13 )
    {
        $( '<div><span>' + $( '#textBox' ).val() + '</span>&nbsp;<a href="javascript:;" onclick="$( this ).parent().remove();">X</a>' ).appendTo( '#resultsDiv' );
        $( this ).val( '' );
    }
} );

jsfiddle

Upvotes: 1

Related Questions