Как получить входные значения в al oop по jQuery

Question

Здесь выберите выпадающий список, это в l oop нескольких делений. как получить значение каждого элемента, когда мы нажимаем кнопку Cancel. вот пытаюсь вот так

    <?php  foreach ($_orders as $_order): ?>
<?php
       if($_order->getStatus() == 'complete' || $_order->getStatus() ==  'canceled'){}
else{ 
  ?>
  <div>
    <label class="select-label" for="cancel_reason">Choose a Reason:</label>

        <select class="cancel_reason" >
            <option value="R000001">Order Created by Mistake</option>
            <option value="R000002">Items would not arrive on time</option>
            <option value="R000003">Shipping cost is too high</option>
            <option value="R000004">Item price is too high</option>
            <option value="R000005">Need to change order details or payment method</option>
            <option value="R000006">Others</option>
        </select>
        <textarea class="reason_msg" rows="4" cols="50"></textarea></br>
  </div>
  <div class="cancel_order_block">
      <a href="javascript:void(0)" class="action view"><button class="green-btn track-order-btn cancel_order"><?php /* @escapeNotVerified */ echo __('Cancel') ?></button></a>
      <input type="hidden" value="<?php echo $_order->getId(); ?>" class="order_id">
  </div>
<?php } ?>
<?php endforeach; } ?>

jQuery:

<script type="text/javascript">
  require (["jquery","jquery/ui"], function($){
    $('.collapsable-accordion').collapsable({
        accordion: true,
        fx: 'slide',
        fxDuration: 300
    });
    $(".cancel_order").click(function(){
             $('.reason_msg').hide();

             var allreason_msg = $('.reason_msg'); // it will return array
                 var allorders = $('.order_id'); 
                 $.each(allreason_msg,function(){
                   console.log($(this).val());
                   });
                    $.each(allorders,function(){
                   console.log($(this).val());
                   });
      });
  });
</script>

Где я делаю неправильно Могу ли я получить помощь? Заранее спасибо.

Answer 1

вам нужно сделать что-то вроде ниже

для uniqueId, вы можете использовать что-то вроде этого.

<input type="hidden" value="order_<?php echo $_order->getId(); ?>" class="order_id">
<textarea class="reason_msg" rows="4" cols="50" id="reason_<?php echo $_order->getId(); ?>"></textarea>

$(document).ready(function(){
 var allreason_msg = $('.reason_msg'); // it will return array
 var allorders = $('.order_id'); 
 $.each(allreason_msg,function(){
   console.log($(this).val());
   })
    $.each(allorders,function(){
   console.log($(this).val());
   })
   })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea class='reason_msg'>test</textarea><input type='hidden' value='1' class='order_id'/>
<textarea class='reason_msg'>test22</textarea><input type='hidden' value='2' class='order_id'/>
<textarea class='reason_msg'>test33</textarea><input type='hidden' value='3'class='order_id' />
</div>

Answer 2

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

Пожалуйста, попробуйте это

    <div>
        <label class="select-label" for="cancel_reason">Choose a Reason:</label>
        <select class="cancel_reason" id="cancel_reason_<?php echo $_order->getId(); ?>">
            <option value="R000001">Order Created by Mistake</option>
            <option value="R000002">Items would not arrive on time</option>
            <option value="R000003">Shipping cost is too high</option>
            <option value="R000004">Item price is too high</option>
            <option value="R000005">Need to change order details or payment method</option>
            <option value="R000006">Others</option>
        </select>
        <textarea class="reason_msg" rows="4" cols="50" id="reason_msg_<?php echo $_order->getId(); ?>"></textarea>
        </br>
    </div>
    <div class="cancel_order_block">
        <a href="javascript:void(0)" class="action view">
            <button class="green-btn track-order-btn cancel_order" id="<?php echo $_order->getId(); ?>"> 
                <?php /* @escapeNotVerified */ echo __('Cancel') ?>
            </button>
        </a>
        <input type="hidden" value="<?php echo $_order->getId(); ?>" id="order_<?php echo $_order->getId(); ?>" class="order_id">
    </div>

В вашем JS

    <script>
        $(".cancel_order").on("click", function(){
            var id = $(this).attr("id"); /** order id */
            var cancel_reason = $("#cancel_reason_"+id).val();
            var reason_msg = $("#reason_msg_"+id).val();
            var order_id = $("#order_"+id).val(); /** same as id (order id) */
        });
    </script>