Question

我有以下html和form元素

<div class='ticket-sold' id='1' >RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>

<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
    <input type="hidden" name="cmd" value="_xclick" />
    <input type="hidden" name="no_note" value="1" />
    <input type="hidden" name="lc" value="UK" />
    <input type="hidden" name="currency_code" value="GBP" />
    <input type="hidden" name="payer_email" value="customer@example.com"  />
   <input name="item_name_1" value="TICKET NUMBER 5" id="input_5" type="hidden">
   <input name="item_name_2" value="TICKET NUMBER 20" id="input_20" type="hidden">
   <input name="item_name_3" value="TICKET NUMBER 27" id="input_27" type="hidden">
   <input type="hidden" name="amount_1" value="10" id="input_5" />
   <input type="hidden" name="amount_2" value="10" id="input_20" />
   <input type="hidden" name="amount_3" value="10" id="input_27" />
   <input type="submit" name="submit" value="Submit Payment"/>
</form>

基本上，我有一个jquery，当选择Div类'ticket'时，'amount'字段会根据所选'ticket'元素的数量进行更新。

var counter = 0;
$(".ticket").on("click", function() {
$(this).toggleClass("green");
$(this).toggleClass('selected');
var selectedIds = $('.selected').map(function() {
        return this.id;
}).get();
var id = $(this).attr('id');  
if(!$(this).hasClass('selected')) {
    $('#paypal_form #input_' + id).remove();
    counter--;
} else {
    counter++;
    $('#paypal_form').append('<input type="hidden" name="item_name_'+counter+'" value="TICKET NUMBER ' + id + '" id="input_'+id+'">');
    $('#paypal_form').append('<input type="hidden" name="amount_'+counter+'" value="' + $(".ticketprice").text() +'" id="input_'+id +'">');
    }   
    $(".totaltickets").text(selectedIds.length -1);
    $(".totalprice").text((selectedIds.length - 1)*$(".ticketprice").text());

我想做的是，在'ticket'div上的onclick函数的同时，我想要另一种输入类型，即<input type="hidden" name="item_name" value="Selected ID from Div">动态添加到Form（“paypal_form”）。如果切换“票证”DIV，即单击以取消选择该项目，则应删除添加的元素。

感谢克雷格。

Answer 1

你可以像这样接近它。它检查是否将类selected分配给选定的div。如果是这样，它会向表单附加一个带有特定ID的隐藏输入。如果取消选择div，它将从表单中删除该输入。

＆＃13;

$(document).ready(function() {
  $(".ticket").on("click", function() {
    $(this).toggleClass("green");
    $(this).toggleClass('selected');
    
    var selectedIds = $('.selected').map(function() {
      return this.id;
    }).get();
    
    var id = $(this).attr('id');
    
    if(!$(this).hasClass('selected')) {
      $('#paypal_form #input_' + id).remove();
    } else {
      $('#paypal_form').append('<input type="hidden" id="input_' + id + '">');
    }
    
    $('[name=amount]').val((selectedIds.length - 1) * $(".ticketprice").text());
    $('[name=item_name]').val((selectedIds.length - 1) + " Ticket(s) selected");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='ticket-sold' id='1'>RAFFLE-1-NOVEMBER</div>
<div class='ticket' id='2'>RAFFLE-2-NOVEMBER</div>
<div class='ticket' id='3'>RAFFLE-3-NOVEMBER</div>
<div class='ticket' id='4'>RAFFLE-4-NOVEMBER</div>
<div class='ticket' id='5'>RAFFLE-5-NOVEMBER</div>

<form class="paypal" action="./includes/gateways/payments.php" method="post" id="paypal_form" target="_blank">
  <input type="hidden" name="cmd" value="_xclick" />
  <input type="hidden" name="no_note" value="1" />
  <input type="hidden" name="lc" value="UK" />
  <input type="hidden" name="currency_code" value="GBP" />
  <input type="hidden" name="payer_email" value="customer@example.com" />
  <input type="hidden" name="item_name" value="" />
  <input type="hidden" name="amount" value="0" />
  <input type="submit" name="submit" value="Submit Payment" />
</form>

＆＃13;

Answer 2

用以下

计算出来

var ii = 1; 
$("input[name^='item_name']").each(function(i){ 
    $(this).attr('name', 'item_name_' + ii++); 
}); 
var ii = 1; 
$("input[name^='amount']").each(function(i){ 
    $(this).attr('name','amount_' + ii++); 
});

感谢您的帮助：）

jquery在切换上添加删除表单输入

2 个答案: