Возникли проблемы с функцией отправки кнопки

Question

, когда я пишу во втором поле текстовой области и нажимаю кнопку «Отправить», будет сохранено только первое поле текстовой области, а не второе. Я не могу понять, как подключить кнопки к соответствующим полям текстовой области.

<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>

Это мой код

$(".saveBtn").on('click',function (event){
    event.preventDefault();

    if ($("textarea").val() !== "") {    
      alert('saved');
      alert($("textarea").val());
      var textField = $('textarea').val();
      localStorage.setItem("textField", textField); 
    }
}); 

Answer 1

Вы можете попробовать это FIDDLE и попробовать обойти

 $(".saveBtn").on('click',function (){
 var textField="";
event.preventDefault();

if ($("textarea").val() != "") {

  $('textarea').each(function() {
if ($(this).val() != '') {
  textField += $(this).val();
}
  })
alert(textField)
localStorage.setItem("textField", textField); 

Answer 2

Когда вы используете $("textarea").val(), это займет первое значение текстовой области. Это отличается от .text() (на входах), который объединяет их все.

Демонстрация:

console.log($("textarea").val())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea>x</textarea>
<textarea>y</textarea>
<button type='button'>click</button>

как подключить кнопки к соответствующей текстовой области

В вашем случае вам нужночтобы найти связанную текстовую область, которую вы можете сделать с помощью некоторого обхода / обхода DOM:

var textarea = $(this).closest(".time-block").find("textarea")

Обновленный фрагмент:

$(".saveBtn").on('click', function(event) {
  event.preventDefault();

  var txt = $(this).closest(".time-block").find("textarea");

  if (txt.val() !== "") {

    console.log('saved');
    console.log(txt.val());

    var value = txt.val();
    //localStorage.setItem("textField", value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>

Answer 3

Есть две текстовые области, поэтому вы должны выполнить цикл для получения значений

$(".saveBtn").on('click',function (event){
event.preventDefault();
  let text_empty=1;
  $("textarea").each(function() {
      if($(this).val()==""){
         text_empty =0;
   }
 });
if (text_empty==0) {

 //alert('saved');
 //alert($("textarea").val());
    var no_of_text = 0;
   $("textarea").each(function(){
        var textField = $(this).val();

        localStorage.setItem("textField"+no_of_text, textField); 
   });

}});

Answer 4

Вам необходимо проверить значение из всей текстовой области. Так что переберите все текстовые области, а затем проверьте значение. Если значение не является пустой строкой, то объедините значение с переменной

$(".saveBtn").on('click', function(event) {
  event.preventDefault();
  var textField = '';
  $('textarea').each(function(a, b) {
    if ($(this).val() !== '') {
      textField += $(this).val();
    }
  })
  localStorage.setItem("textField", textField);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <div class='input-group'>
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
  <div class="time-block">
    <div class="row">
      <div class="col-1">
        <p class='hour'>10AM</p>
      </div>
      <div class="col-10">
        <textarea class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
        <div class="past"></div>
        <div class="present"></div>
        <div class="future"></div>
      </div>
      <div class="col-md-1">
        <button class=" input-group-addon input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
    </div>