how to get two dynamic textbox value in jquery

Question

Thanks in advance, Actually i have a form with two hidden textbox fields one is <input type="hidden" name="item_name" class="course_name" value="<?php echo $cartData['exam'];?>"> and the other is <input type="hidden" name="amount" class="amount" value="<?php echo $priceTotal;?>">, the the value is taken inside the hidden field dynamically from PHP code through loop. So how can i get the dynamic values of "item_name" textbox field and "amount" textbox field in comma seperated using Jquery when clicking the image button with id="placeOrder". For example like this : for amount-->200,300 and for course name -->PMP,CAPM . I have written some code it will take the values within the jquery each loop but i have to pass through ajax as json format like this data : {cname:course_name,priceBox:textboxVal} so value with comma seperated value should pass through course_name & textboxVal.

My Page is

<html>
 <head>
  <title></title>
  <script>
    $(document).ready(function(){
      var myArray = [];
      $('.amount').each(function(){        

         var textboxVal = $(this).val(); 
         //alert(textboxVal);          

        });

       var myCourse = [];
         //dynamic course name
         $('.course_name').each(function(){

            var course_name = $(this).val();  
            //alert(course_name); 

           });

           if(textboxVal!="")
          {

                $.ajax({ 

                   type : "POST",     
                   url : "/invl_exams/cart",                  
                   cache : "false",
                   data :      {cname:course_name,priceBox:textboxVal},           
                   success : function(result){       

                     console.log(result);                                    

                   } 


              }); 


          }   


    });
  </script>
 </head>
</html>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">

         <td>            
            <input type="hidden" name="cmd" value="_xclick">
            <input type="hidden" name="business" value="shopbusiness@myshop.com">      
            <input type="hidden" name="upload" value="1">   
            <?php             

               if(isset($cartDatas)) 
                 { 
                   $itm_no = 1;
                   $amt = 0;                              
                   foreach($cartDatas as $key=> $cartData)  
                   {

                     $prices = $cartData['price'];     
                     $prd_price = ltrim($prices,'$');
                     $priceTotal = number_format((float)$prd_price, 2, '.', '');   


            ?>

              <input type="hidden" name="item_number" value="<?php echo $itm_no++;?>">        
              <input type="hidden" name="item_name" class="course_name" value="<?php echo $cartData['exam'];?>">     
              <input type="hidden" name="amount" class="amount" value="<?php echo $priceTotal;?>"> 
              <input type="hidden" name="shipping" value="shipping Address">  
              <input type="hidden" name="quantity" value="<?php echo $cartData['orders'];?>">      

            <?php                 

                  $price = ltrim($prices,'$');  
                  $orders = $cartData['orders'];              
                  $amt_Total = $price * $orders;
                  $amt += $amt_Total;
                  $amt_Total = number_format((float)$amt, 2, '.', ''); 

                  ///$amt_Total = round($price * floatval( $orders ),2); 


                }               

            ?>

              <input type="hidden" name="currency_code" value="USD">              
              <input type="hidden" name="amount" value="<?php echo $amt_Total;?>">                    
            <?php

              }

            ?>
            <input type="image" src="http://www.paypal.com/en_US/i/btn/x-click-but03.gif" name="submit" id="placeOrder">              
      </td>
      </form>

Go through -- http://stackoverflow.com/questions/34366218/how-to-get-value-from- dynamically-created-hidden-field-in-jquery — Shan, Dec 12 '16 at 11:20

score 0 · Answer 1 · answered Dec 12 '16 at 11:21

0

You can use jQuery and attribute selectors to get the value:

var item_name = $('input[name=\'item_name\']').val();
var amount = $('input[name=\'amount\']').val();

var result = item_name + ',' + amount;

Now you can put this in your click handler.

answered Dec 12 '16 at 11:21

Yaser

5,609
1
15
27

score 0 · Accepted Answer · answered Dec 12 '16 at 11:28

You can do something like following:

$(function(){
    var amount = [];
  var course = [];
    $('.amount').each(function(){ 
    amount.push($(this).val());
  });
  $('.course_name').each(function(){
    course.push($(this).val());
  });
  console.log(amount.join(',')); //comma seperated value
  console.log(course.join(',')) //comma seperated value
});

DEMO

score 0 · Answer 3 · edited May 23 '17 at 12:13

If your inputs are enclosed within form element you can use this serialize the form input values to json object and then pass it to ajax call.

var postData = $("#enclosing_form_elm").serializeObject();

and in your script add reference to serialize object function after jquery

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(this.value || '');
    } else {
        o[this.name] = this.value || '';
    }
});
return o;

};

Just a demo https://plnkr.co/edit/7maJAUSdakDuvVqXhnzi?p=preview

Thanks to Convert form data to JavaScript object with jQuery

how to get two dynamic textbox value in jquery

3 Answers3