getting input values with jQuery

Question

I'm trying to get the values out of the input boxes after clicking the Remove button and before removing the row using jQuery. Right now I'm just trying to get the first box, but haven't had any luck with my selection attempts.

Here is the latest attempt at retrieving the input value having an .editing class. By the way, this is not all of the code. The removeIng function is firing like it's supposed to, I'm just not getting back what I need.

$('.remove_ing').click(removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

Here is the HTML, I have several rows like this (added dynamically)

<tr>
  <td><input type='text' name='ingredient' value='' class='editing' /></td>
  <td><input type="text" class='editing_amt' name="amount" size="8" value="100"/></td>
  <td><select name='meas' class='editing_meas'></select></td>
  <td><input type="button" name="remove_ing" class="remove_ing" value="Remove"/></td>

</tr>

Thanks for the help

I don't know if I'm misunderstanding, but the only elements that have a class of "editing" actually doesn't have a value! — benhowdle89
– benhowdle89, Commented Oct 21, 2013 at 16:28
Rather than .parent().parent(), you should probably do something a little more explicit, like closest. That way if you add a wrapper around your input later, you won't break your call. — Joe Enos
– Joe Enos, Commented Oct 21, 2013 at 16:28

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-21 16:26:53Z

2

Use .on()

As elements are added dynamically you can not bind events directly to them .So you have to use Event Delegation.

$(document).on('click','.remove_ing',removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

Syntax

$( elements ).on( events, selector, data, handler );

Use .closest()

Instead

$(this).parent().parent().remove();

use

$(this).closest('tr').remove();

answered Oct 21, 2013 at 16:26

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sam Ccp Over a year ago

How about $(this).parents("tr").first() ?

Tushar Gupta - curioustushar Over a year ago

@SamCcp $(this).parents("tr") will also work . but $(this).closest('tr') is faster .

user2879070 Over a year ago

Sorry, I didn't show that part of the code, I add the removeIng function, along with other things, when the row is created. Here the function seems to be working because after the alert returns 'undefined' or similar, the row is removed

Tushar Gupta - curioustushar Over a year ago

@user2879070 what you want than ?

user2879070 Over a year ago

Thanks for the help!!$(this).closest('tr').find('.editing').val() worked! (I could have swore I tried that!) Is .find the best way back down?

|

Sam Ccp · Accepted Answer · 2013-10-21 16:34:47Z

0

If your html is static ( it's not dynamic ) you should give the button an id and preferably the tr too. If that's not the case, then an event delegation is the way to go. @Tushar gave you an idea about event delegation.

Anyway, here's a little snippet that might help you.

var btn = $(".remove_ing");
btn.click( removeIng );
function removeIng(){
    // get the row
    var tr = $(this).parents("tr").first();
    //get the text boxes
    var txt = tr.find("input[type='text']");
    //loop through the texts
    txt.each(function(){
        alert( $(this).val() );
    });
}

In both cases ( dynamic or static html ) this function will get all your inputs text. Hope it helps.

answered Oct 21, 2013 at 16:34

Sam Ccp

1,1823 gold badges12 silver badges19 bronze badges

1 Comment

user2879070 Over a year ago

I'll definitely check that out! Thanks.

Collectives™ on Stack Overflow

getting input values with jQuery

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related