Updating the input value on button click Jquery

Question

For The code below, when the button is clicked, it's supposed to update the name of the text. ie hisally, hellosally, supsally, but instead the current is hitomsally, hellotomsally, suptomsally. i m wondering is there any way to update the name while keeping the text hi,hellop and sup. Many thanks

$(".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="sally" class="done" \> </td>
    <td>text1<textarea class="text" data-value="hitom">hitom</textarea> </td>
    <td>text2<textarea class="text" data-value="hellotom">hellotom</textarea> </td>
    <td>text3<textarea class="text" data-value="suptom">suptom</textarea> </td>

  </tr>
</table>
<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>

It seems to be working. You might need to clarify your question. — Difster
– Difster, Commented Jul 5, 2017 at 4:21
You are using name and text for everything. Please use the proper names of the elements. — Aakash Verma
– Aakash Verma, Commented Jul 5, 2017 at 4:33

Dij · Accepted Answer · 2017-07-05 04:22:16Z

you need to change your data-value to only the values that you want to prepend in textarea

$(".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="sally" class="done" \> </td>
    <td>text1<textarea class="text" data-value="hi">hitom</textarea> </td>
    <td>text2<textarea class="text" data-value="hello">hellotom</textarea> </td>
    <td>text3<textarea class="text" data-value="sup">suptom</textarea> </td>

  </tr>
</table>
<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>

31piy · Accepted Answer · 2017-07-05 04:23:07Z

The data-value contains wrong values for the textareas, and you are actually concatenating the value of the textbox to them. Correct the values in the data-value attributes, and you will be done!

$(".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="sally" class="done" \> </td>
    <td>text1<textarea class="text" data-value="hi">hitom</textarea> </td>
    <td>text2<textarea class="text" data-value="hello">hellotom</textarea> </td>
    <td>text3<textarea class="text" data-value="sup">suptom</textarea> </td>

  </tr>
</table>
<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>

Aakash Verma · Accepted Answer · 2017-07-05 04:28:15Z

I am deleting the 'tom' from every string.

$(".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").replace(/tom/g,"")+set);
    })
  }
});

<table>
  <tr>

    <td>
     <input type="button" value="ok" class="ok"></td>
    <td>done<input type="text" value="sally" class="done" \> </td>
    <td>text1<textarea class="text" data-value="hitom">hitom</textarea> </td>
    <td>text2<textarea class="text" data-value="hellotom">hellotom</textarea> </td>
    <td>text3<textarea class="text" data-value="suptom">suptom</textarea> </td>

  </tr>
</table>
<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>

Collectives™ on Stack Overflow

Updating the input value on button click Jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related