jquery在切换时添加删除表单输入答案

【问题标题】：jquery add remove form input on togglejquery在切换时添加删除表单输入
【发布时间】：2017-11-14 10:44:44
【问题描述】：

我有以下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>

Basically, I have jquery that when the Div class 'ticket' is selected, the 'amount' field is updated based on the number of 'ticket' elements selected.

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"> 动态添加到表单（“paypal_form”）。如果'ticket' DIV被切换，即点击取消选择项目，添加的元素应该被删除。

谢谢克雷格。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以像这样处理它。它检查类 selected 是否分配给选定的 div。如果是这样，它会将具有特定 ID 的隐藏输入附加到表单中。如果未选择 div，则会从表单中删除该输入。

$(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");
  });
});

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

【讨论】：

谢谢，但 .remove 函数不会从表单中删除该行。 $('#paypal_form #input_' + id).remove();
@CraigJohnstone -- 您是否尝试在 StackOverflow 本身中运行代码 sn-p？它工作得很好。
嗨，我已经用你建议的更新更新了上面的原始帖子..它几乎可以工作..虽然当我删除中间项目时它没有正确重新排序编号。
@CraigJohnstone -- 确实有必要订购。对于服务器而言，您提供参数的顺序并不重要。
我用下面的 var ii = 1; $("input[name^='item_name']").each(function(i){ $(this).attr('name', 'item_name_' + ii++); });变量 ii = 1; $("input[name^='amount']").each(function(i){ $(this).attr('name','amount_' + ii++); });谢谢你的帮助:)

【解决方案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++); 
});

感谢您的帮助:)

【讨论】：