Jquery Updating input field value [Replace the old value with the new value]

Question

For the current code,when the button's clicked, it'll get the value from the done input and display them to the 3 input field respectively.

Let say i'd like to change the value in the done input field, and when the value is updated, the old values from the 3 input fields will be replaced by the new. Now, the updated value just added after the original value instead of replacing it. What's wrong with my code guys?

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if ( set ){
    $(this).closest('tr').find('.text').each(function(){
        $(this).val( $(this).val() + set );
    })
}
});

<table>
  <tr>
 
    <td>
      <input type="button"  value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text">hi</textarea> </td>
    <td>text2<textarea class="text">hello</textarea> </td>
    <td>text3<textarea class="text">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

remove this $(this).val( $(this).val() + set ); and write this $(this).val( set ); because $(this).val( $(this).val() + set ); is adding values beside input field — Pavan Baddi
– Pavan Baddi, Commented Jul 5, 2017 at 2:28

guradio · Accepted Answer · 2017-07-05 02:30:11Z

1

$(".ok").on('click', function() {
  var set = $(this).closest('tr').find('.done').val();
  if (set) {
    $(this).closest('tr').find('.text').each(function() {
      $(this).val($(this).attr("data-value") + set);
    })
  }
});

<table>
  <tr>

    <td>
      <input type="button" value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text" data-value="hi">hi</textarea> </td>
    <td>text2<textarea class="text" data-value="hello">hello</textarea> </td>
    <td>text3<textarea class="text" data-value="sup">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

Add a data-* on each textarea.
Use that value instead of the actual value

answered Jul 5, 2017 at 2:30

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

1 Comment

guradio Over a year ago

glad to help happy coding mate

Difster · Accepted Answer · 2017-07-05 02:24:05Z

0

Try this instead:

$(this).val( $(this).val(set));

answered Jul 5, 2017 at 2:24

Difster

3,2802 gold badges24 silver badges32 bronze badges

Comments

Dij · Accepted Answer · 2017-07-05 02:24:16Z

0

you don't need to add set to $(this).val(), just update value to set using $(this).val(set);. something like this:

$(".ok").on('click', function() {
var set = $(this).closest('tr').find('.done').val();
if ( set ){
    $(this).closest('tr').find('.text').each(function(){
        $(this).val(set);
    })
}
});

<table>
  <tr>
 
    <td>
      <input type="button"  value="ok" class="ok"></td>
    <td>done<input type="text" value="100" class="done" \> </td>
    <td>text1<textarea class="text">hi</textarea> </td>
    <td>text2<textarea class="text">hello</textarea> </td>
    <td>text3<textarea class="text">sup</textarea> </td>

  </tr>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

answered Jul 5, 2017 at 2:24

Dij

9,8184 gold badges21 silver badges35 bronze badges

2 Comments

epiphany Over a year ago

The thing is i have some prefilled text retrieve from the database that i'd like to keep, do u know how to on one hand keep those texts, while updating the value? Many thanks

Dij Over a year ago

you can access those values using $(this).val() before updating the values and store them in some variable.

Collectives™ on Stack Overflow

Jquery Updating input field value [Replace the old value with the new value]

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related