JQuery Find Element with Id in Row

Question

I have a simple table, I'm trying to send text value from cells .name and .date into form using jQuery. This script works pretty well, but I don't know how find only text with class for example .name in only this row, where the user cliced on Book-button.

My table structure:

      <table id="myTable"> 
<thead> 
<tr> 
    <th>Name</th> 
    <th>Date</th> 
    <th>Place</th> 
    <th>Price</th> 
    <th>Hours</th> 
    <th>Book</th> 
</tr> 
</thead> 
<tbody> 
      <tr> 
    <td class="name"><a href="#" title="title1">Camp1</a></td>  //send to form this value
    <td class="date">10.09 - 15.09.2014 r.</td>   //send to form this value
    <td>Brighton</td> 
    <td>555 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td>   //when user click on this button
</tr> 

          <tr> 
    <td class="name"><a href="#" title="title1">Camp2</a></td> 
    <td class="date">02.09 - 22.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>432 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr>     
<tr> 
    <td class="name"><a href="#" title="title1">Camp3</a></td> 
    <td class="date">23.09 - 27.09.2014 r.</td> 
    <td>Brighton</td> 
    <td>123 EURO</td> 
    <td>20</td> 
    <td class="book"><button>Book<button></td> 
</tr> 
</tbody></table>

          </tbody> 
</table>

My script:

<script>
$( "button" ).click(function() {
var text = $( '.name' ).text();
$( "#name" ).val( text );
var text = $( '.date' ).text();
$( "#date" ).val( text );
});
</script>

My form:

<fieldset id="contact_form" style="display:none;">
<div id="result"></div>
    <label for="name"><span>Name</span>
    <input type="text" name="name" id="name" placeholder="Enter Your Name" />
    </label>

    <label for="email"><span>Email Address</span>
    <input type="email" name="email" id="email" placeholder="Enter Your Email" />
    </label>

        <label><span>&nbsp;</span>
        <button class="submit_btn" id="submit_btn">Submit</button>
        </label>
    </fieldset>
        <button c

lass="submit_btn" id="submit_btn">Submit</button>
    </label>
</fieldset>

Accepted Answer

$( "button" ).click(function() {
    var text = $(this).closest('tr').find('.name').text();
    $( "#name" ).val( text );
    text = $(this).closest('tr').find('.date').text();
    $( "#date" ).val( text );
});

Better yet, surround each button with a <form> with <input type="hidden"> elements containing that data, and it will work even without JavaScript enabled.

Answer 2

The problem is in your JavaScript. You need to target only what the user clicked. This can be done by using the this object in in the click callback function.

$( ".book button" ).click(function() {
    var tr = $( this ).parents('tr');
    $( "#name" ).val( tr.find('.name').text() );
    $( "#date" ).val( tr.find('.date').text() );
});

Other notes:

You can only use var to declare a variable once. Afterwards, use the variable without var.
// Cannot be used for commenting in HTML. You must use

Answer 3

$("button").click(function() {
var text1 = $(this).closest('tr').find('.name').text();
alert(text);
$("#name").val( text1 );
var text2 = $(this).closest('tr').find('.date').text();
$("#date").val( text2 );
});

Demo:

Answer 4

This ahould work.
$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});

Answer 5

Check out this jsfiddle

Basically when you click a button, you need to get it's parent element, which is the row, then get siblings of that row with the given jquery selector.

$("button").click(function () {
    var _this = $(this);
    var text = _this.parent().siblings('.name').text();
    console.debug(text);
    $("#name").val(text);
    var date = _this.parent().siblings('.date').text();
    console.debug(date);
    $("#date").val(date);
});

Answer 6

Find elements with id in row and assign to other elements using jquery

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

JQuery Find Element with Id in Row

6 Answers

Must Read

Your Answer

Sarah Jenkins

JQuery Find Element with Id in Row

6 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Sarah Jenkins