How to get input values in a loop by jQuery

Question

Here is select dropdown, this is in loop of multiple divs. how to get value of each element when we click Cancel button. here am trying like this

    <?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>

Where am doing wrong Can I get help? Thank you in advance.

if you want to get the value of a select box when you click the cancel button then you can use jquery .closest(), selector. — Harsimranjit Singh
– Harsimranjit Singh, Commented Feb 25, 2020 at 7:08

Negi Rox · Accepted Answer · 2020-02-25 09:22:16Z

1

you need to do some thing like below

for uniqueId you can use something like this.

<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>

edited Feb 25, 2020 at 9:22

answered Feb 25, 2020 at 7:08

Negi Rox

3,9421 gold badge14 silver badges18 bronze badges

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

2 Comments

Praveen Negimani Over a year ago

Thank you @Negi Rox for replying. here it consoling the value of only first loop, for other loops it fetching first value

Praveen Negimani Over a year ago

thank you for helping me, that other method worked for me.

Alok Mali · Accepted Answer · 2020-02-25 07:29:15Z

0

You need to put a unique id in all your inputs. So that whenever you click on a button, you can get the respective values.

Please try this

    <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>

In your 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>

answered Feb 25, 2020 at 7:29

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

4 Comments

Praveen Negimani Over a year ago

Thank you @Alok Mali for answering, by this modification am getting undefined log for all values

Alok Mali Over a year ago

alert id. is it undefined? or it is giving a value? And also inspect your HTML by pressing f12 what is the id of a button.

Praveen Negimani Over a year ago

thank you for helping me, this method worked for me.

Praveen Negimani Over a year ago

instead of var id = $(this).attr("id"); /** order id */ I used this var id = $(this).val();

Collectives™ on Stack Overflow

How to get input values in a loop by jQuery

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related