CODEWITHSUNDEEP
jqueryhtml
CipherGhoul
CipherGhoul

Reputation: 21

Getting the value of Input and inserting the value to <td>

When I press the button, the data from the input is not transferring inside the <td>. The (tabios) name must change based on the value of the input, I have included the snippet here in my post. Thank for the answers and comments in advance 

$('buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();

  $('#datalastname').val(lastname);
  $('#datafirstname').val(firstname);
  $('#dataemail').val(email);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success" style="width: 250px;" class="buttonnext">Next</button><br><br>

<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 45

Answers (3)

Abhishek Gupta
Abhishek Gupta

Reputation: 109

to replace the td text use text() instead of val().check the updated code::

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();

  $('#datalastname').text(lastname);
  $('#datafirstname').text(firstname);
  $('#dataemail').text(email);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success buttonnext" style="width: 250px;">Next</button><br><br>

<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

rover cj
rover cj

Reputation: 96

Try this code it's working. To change the text of you could use $('#datalastname').text(lastname); Also <button class="btn btn-success" style="width: 250px;" class="buttonnext">Next</button><br><br>

Above code contains 2 class="" tags.

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();

  $('#datalastname').text(lastname);
  $('#datafirstname').text(firstname);
  $('#dataemail').text(email);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success buttonnext" style="width: 250px;">Next</button><br><br>

<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[email protected]</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Vinod Selvin
Vinod Selvin

Reputation: 379

You forgot to add dot as it is class. To select elements with a specific class, write a period (.) character, followed by the name of the class, so the selector will be $('.buttonnext')

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();

  $('#datalastname').val(lastname);
  $('#datafirstname').val(firstname);
  $('#dataemail').val(email);
});

Upvotes: 0

Related Questions