Dynamically setting the input value with jQuery

Question

I have a spreadsheet of data and input fields.

When the input field is empty, it should click the copy text button from the row with class "shipdate". I always copy the entry in the code. Can anyone tell me where I'm wrong.

This is my code

$(".btn-yes").click(function() {
  var $val = $(document).find('.date');
  $('.date').each(function() {
    var $val = $(this).val();
    if ($val === "") {
      $('tr').each(function() {
        var $this = $(this),
          daata = $this.find('td.shipdate').html();
        $this.find('input').val(anData);
      })

    } else(
      console.log("empty")
    )
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>Example1</th>
        <th>Example2</th>
        <th>Example3</th>
        <th>Example4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="btn-yes">
    Click here
    </button>
  </div>
</div>

I'm not sure that I understand the problem. Are you saying that you need the script to ONLY populate the input if it has not already been answered? — Moob
– Moob, Commented Oct 14, 2019 at 11:02
Yes, it is only when the field is empty that you need to fill in a click. — d.stan
– d.stan, Commented Oct 14, 2019 at 11:04

mplungjan · Accepted Answer · 2019-10-14 11:30:02Z

You likely meant this. Note I had to trim and remove the trailing dot in the shipdate

You can remove the .slice(0,-1) if the shipdate cell contains a date without a trailing dot

You can also freely change $(this).parent().next().text() to $(this).closest("tr").find(".shipdate").text() in case you want to move the cells around

$(".btn-yes").click(function() {
  $('.date').each(function() {
    var $val = $(this).val();
    var shipdate = $.trim($(this).parent().next().text()).slice(0,-1) 
    $(this).val($val === "" ? shipdate : $val)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table>
    <thead>
      <tr>
        <th>Example1</th>
        <th>Example2</th>
        <th>Example3</th>
        <th>Example4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
      <tr>
        <td> text1</td>
        <td> text2 </td>
        <td> <input type="text" value="" class="date" /> </td>
        <td class="shipdate"> 31.10.2019.</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button class="btn-yes">
    Click here
    </button>
  </div>
</div>

Collectives™ on Stack Overflow

Dynamically setting the input value with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related