如何在jquery中获取两个动态文本框值

时间:2016-12-12 11:14:24

标签: javascript php jquery html

在此先感谢,实际上我有一个包含两个隐藏文本框字段的表单,一个是<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;?>">,该值是从PHP代码到循环中的隐藏字段内部动态获取的。那么当单击id =“placeOrder”的图像按钮时,如何使用Jquery以逗号分隔“item_name”文本框字段和“amount”文本框字段的动态值。 例如:对于金额 - > 200,300和课程名称 - &gt; PMP,CAPM。我已经编写了一些代码,它将在每个循环中获取jquery中的值,但是我必须通过ajax作为json格式传递,如此data : {cname:course_name,priceBox:textboxVal}所以带逗号分隔值的值应该通过course_name&amp; textboxVal。

我的页面是

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

3 个答案:

答案 0 :(得分:0)

您可以使用jQuery和属性选择器来获取值:

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

var result = item_name + ',' + amount;

现在您可以将它放在点击处理程序中。

答案 1 :(得分:0)

您可以执行以下操作:

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

答案 2 :(得分:0)

如果你的输入被包含在表单元素中,你可以使用它将表单输入值序列化为json对象,然后将其传递给ajax调用。

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

并在脚本中添加对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;

};

只需演示https://plnkr.co/edit/7maJAUSdakDuvVqXhnzi?p=preview

感谢Convert form data to JavaScript object with jQuery