CODEWITHSUNDEEP
javascriptjqueryreplace
Kurkula
Kurkula

Reputation: 6762

Jquery replace string in a textarea

I am trying to replace a string value in textarea while typing in textbox with jquery. I used keypress event to try achieving that. What may be the issue here in this fiddle?

<input type="text" id="textbox" />
<textarea id="txtArea">This is a sample test.</textarea>

jquery code

$("#textbox").keypress(function () {
    var txtAreaValue = $('#txtArea').val();
    var txtAreaValueAfterreplace = txtAreaValue.replace('sample', $(this).val());
    $('#txtArea').val(txtAreaValueAfterreplace);

});

Upvotes: 2

Views: 4890

Answers (2)

Jesse
Jesse

Reputation: 2848

The main problem is that, when using keypress you are getting the value of the input box before it is set, so nothing appears. However even if you change it to keyup you still will only get one value because once 'sample' is replaced it is gone so therefor it cannot be replaced again.

A new logic needs to be considered if you are wanting to replace sample with the full value of the textarea. Consider the following example:

$("#add").click( function () {
    $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample',  $("#textbox").val() ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textbox" /><br>
<input type='button' id='add' value='add'>
<textarea id="txtArea">This is a sample test.</textarea>

Or we replace when the user stopped typing 

var typing;

$("#textbox").keyup( function () {
    // Stop the change from being made since they typed again
    clearTimeout(typing);
    
    // They typed, so set the change to queue up in a 3rd of a second
    typing = setTimeout(function(){
        $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample',  $("#textbox").val() ) );
    },350);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textbox" /><br>
<textarea id="txtArea">This is a sample test.</textarea>

Upvotes: 4

Steven Lacks
Steven Lacks

Reputation: 904

  1. You want to look for keyup, not keypress (you want to make sure you get the whole string.
  2. You are trying to put the textbox value right? You're looking for the textarea value in line two of the javascript.
  3. If you replace sample on the first key stroke, there won't be anything to replace the second key stroke.
  4. You can simplify lines 3 and 4 into one line.
  5. replace can only be used on a string. So you need to get the value first, if you're going to do it that way. txtAreaValue.val().replace('sample', $(this).val());

Feel free to play around with it on this fiddle: http://jsfiddle.net/snlacks/abc6skp9/

$("#txtBox").on('keyup', function () {
    var txtValue = $(this).val();
    $('#txtArea').val("this is a " + txtValue);
});

If you have a longer string, replace might work better, but you still need to store the full string somewhere.

var longString = "some really long string... sample... more...";

$("#txtBox").on('keyup', function () {
    var txtValue = $(this).val();
    $('#txtArea').val(longString.replace('sample', txtValue);
});

Upvotes: 1

Related Questions