CODEWITHSUNDEEP
javascriptjquery
ashis
ashis

Reputation: 381

dynamic collection of text from text field

this is html code

<div id="domTxtEntry">
    <strong>Your Name:</strong>
    <input type="text" name="txtdisplay" id="txtdisplay" value="" class="input" />
    <br />
    <br />

    <div id="domPrv"></div>
</div>

this jquery code

$(document).ready(function () {
    var nameNode = $('#domPrv'),
        name = $('#txtdisplay');
    //comment...easy
    $('#domTxtEntry input').bind('blur keyup', function () {
        //name
        if ($('#txtdisplay').val()) {
            nameNode.text(name.val() + ' modifies this');
        }
    });
});

this is here in this fiddle. http://jsfiddle.net/qSq37/1/

two problems

  1. on deletion of values from textfield the output windows does not update it or leaves at the last word.
  2. i tried many things to add the output to float on the right of the text field but it is displayed at the bottom of the text field.

Help needed.

Upvotes: 0

Views: 60

Answers (1)

Kaeros
Kaeros

Reputation: 1138

The first problem is that when the input is empty, calling .val() returns false, so the value in #txtdisplay is not updated. Try this: 

$('#domTxtEntry input').bind('blur keyup', function () {
  if ($('#txtdisplay').val()) {
    nameNode.text(name.val() + ' modifies this');
  } else {
    nameNode.text("Default value");
  }
});

The second problem you can solve like this (removed the <br /> tags):

<div id="domTxtEntry">
    <strong>Your Name:</strong>
        <input type="text" name="txtdisplay" id="txtdisplay" value="" class="input" />

    <div id="domPrv">Default value</div>
</div>

And in CSS:

#domPrv {
  display: inline-block;
}

Upvotes: 3

Related Questions