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>
<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><a href="#" title="title1">Camp1</a></td> //send to form this value <td>10.09 - 15.09.2014 r.</td> //send to form this value <td>Brighton</td> <td>555 EURO</td> <td>20</td> <td><button>Book<button></td> //when user click on this button
</tr> <tr> <td><a href="#" title="title1">Camp2</a></td> <td>02.09 - 22.09.2014 r.</td> <td>Brighton</td> <td>432 EURO</td> <td>20</td> <td><button>Book<button></td>
</tr>
<tr> <td><a href="#" title="title1">Camp3</a></td> <td>23.09 - 27.09.2014 r.</td> <td>Brighton</td> <td>123 EURO</td> <td>20</td> <td><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>
<div></div> <label for="name"><span>Name</span> <input type="text" name="name" placeholder="Enter Your Name" /> </label> <label for="email"><span>Email Address</span> <input type="email" name="email" placeholder="Enter Your Email" /> </label> <label><span> </span> <button>Submit</button> </label> </fieldset> <button c
lass="submit_btn">Submit</button> </label>
</fieldset>6 Answers
$( "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.
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
varto declare a variable once. Afterwards, use the variable withoutvar. //Cannot be used for commenting in HTML. You must use<!--and-->
$("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:
This ahould work.$("button").click(function(){var text = $(this).parent("tr").children(".name").text();});
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);
});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 ); });
});
