Get the value of an input field within multiple divs when clicking a submit button

0
votes

How would I go about correctly writing this so that the var input is the value of the content input field within the .overlay div when the submit button is pressed? Keep in mind that there's several .overlay divs, so it needs to be that separate div.

I know how to make it work assuming only 1 div exists, but this isn't the case. My jQuery is as follows:

$('.button').click(function() {
      var input = $(this).parents('.overlay')$(input[name=content]).val();
});

My HTML structure (assume this div is duplicated several times on the page):

<div class="overlay">
      <input name="content" value="value">
      <input type="submit" class="button" value="submit">
</div>
2
javascriptjqueryinputhtml

2 Answers

1
votes
$('.button').click(function() {
      var input = $(this).parent().find("input[name='content']").val();
});

should work.

Or, if you can rely on that exact structure:

$('.button').click(function() {
      var input = $(this).prev().val();
});
0
votes

like this 

$('.button').click(function() {
      var input_val = $(this).parent().find('input:first').val();
    alert(input_val)
});

here is ia working demo