CODEWITHSUNDEEP
javascriptjqueryhtml
Anivia
Anivia

Reputation: 53

How to find textarea value after input

How can I get the value of a textarea after input but not in same div with jQuery? I tried to do the foreach and find methods. I need to get the value and assign to JS object.

<div id="txtall">
<div class="subdiv">
    <input type = "text" value = "firstInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea"> firsttextareavalue </textarea>

<div class="subdiv">
    <input type = "text" value = "secondInput" class= "subinput">
</div>
<textarea class="textarea" class="subTextarea" /></textarea>

<div class="subdiv">
    <input type = "text" value = "thirdInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea" />second may be empty</textarea>

<div class="subdiv">
    <input type = "text" value = "forthInput" class= "subinput">
</div>
<textarea class="textarea"  class="subTextarea" />last text area value</textarea>

When I click a button I need to get value.

$('#txtall').find('.subinput').each(function() {
    console.log(this.value);
    console.log($(".subtextarea",this).val());
});

The output needs to be:

  • firstInput
  • firsttextareavalue
  • secondInput
  • (this should be empty)
  • thirdInput
  • second may be empty
  • forthInput
  • last text area value

I also have to assign value to JS object.

function newObject(input,textarea)
{
 this.input = input;
 this.textarea = textarea;
}
var list = [];
$('#txtall').find('.subinput').each(function() {
  var obj_1 = new newObject();
  obj_1.input = this.value;
   obj_1.textarea = $(".subtextarea",this).val();
  list.push(obj_1);
});

By the way, I need to use this and I can't assign a different id or class to each input or textarea.

Upvotes: 2

Views: 1154

Answers (4)

adeneo
adeneo

Reputation: 318182

The textarea comes after the input, so it's the next() element from the parent .subdiv

$('#txtall').find('.subinput').each(function() {
    console.log( this.value );
    console.log( $(this).closest('.subdiv').next('.subtextarea').val() );
});

When you do $(".subtextarea",this) it's the same as $(this).find(".subtextarea"), which will only find descendants, and inputs don't have descendants.

Note that your HTML is invalid, you can only have the class attribute once, and you shouldn't be closing the textareas twice

There's also no reason to create instances here, and you can just map the elements

var list = $('#txtall').find('.subinput').map(function() {
  return {
    input    : this.value, 
    textarea : $(this).closest('.subdiv').next('.subTextarea').val()
  }
}).get();

console.log(list)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="txtall">
  <div class="subdiv">
    <input type="text" value="firstInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea"> firsttextareavalue </textarea>

  <div class="subdiv">
    <input type="text" value="secondInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea"></textarea>

  <div class="subdiv">
    <input type="text" value="thirdInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea">second may be empty</textarea>

  <div class="subdiv">
    <input type="text" value="forthInput" class="subinput">
  </div>
  <textarea class="textarea subTextarea">last text area value</textarea>
</div>

Upvotes: 1

Liaqat Saeed
Liaqat Saeed

Reputation: 428

Try this Code use $(this).parent().next().val(); it will get the textarea next to the parent of input.

function newObject(input,textarea)
{
 this.input = input;
 this.textarea = textarea;
}
var list = [];
$('#txtall').find('.subinput').each(function() {

  var obj_1 = new newObject();
  obj_1.input = this.value;
   obj_1.textarea = $(this).parent().next().val();
  list.push(obj_1);
});

Working Fiddle

Upvotes: 0

Sudipta Mandal
Sudipta Mandal

Reputation: 245

$('#txtall').find('.subinput').each(function() {
  console.log( this.value );
  console.log( $(this).closest('.subdiv').next('textarea').val() );
});

Upvotes: 0

Barmar
Barmar

Reputation: 780974

Use .next() to get to the next element after the parent DIV.

function newObject(input, textarea) {
  this.input = input;
  this.textarea = textarea;
}
$("#button").click(function() {
  var list = [];
  $('#txtall').find('.subinput').each(function() {
    var input = this.value;
    var textarea = $(this).closest(".subdiv").next(".subTextarea").val();
    var obj_1 = new newObject(input, textarea);
    list.push(obj_1);
  });
  console.log(list);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="txtall">
  <div class="subdiv">
    <input type="text" value="firstInput" class="subinput">
  </div>
  <textarea class="subTextarea"> firsttextareavalue </textarea>

  <div class="subdiv">
    <input type="text" value="secondInput" class="subinput">
  </div>
  <textarea class="subTextarea" /></textarea>

  <div class="subdiv">
    <input type="text" value="thirdInput" class="subinput">
  </div>
  <textarea class="subTextarea" />second may be empty</textarea>

  <div class="subdiv">
    <input type="text" value="forthInput" class="subinput">
  </div>
  <textarea \class="subTextarea" />last text area value</textarea>
</div>
<button id="button">Click me</button>

Upvotes: 0

Related Questions