jquery Erstellformular Eingang

Question

Toggle entfernen

Ich habe folgende html und form Elemente

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

Grundsätzlich habe ich jquery dass, wenn die Div Klasse ‚Ticket‘ ausgewählt wird, wird die ‚Menge‘ Feld aktualisiert wird, basierend die Anzahl der ausgewählten Ticketelemente.

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()); 

Was würde ich tun, ist zugleich der Onclick-Funktion auf der div ‚Ticket‘, würde ich einen anderen Eingang Typ dh wie <input type="hidden" name="item_name" value="Selected ID from Div"> dynamisch in das Formular eingefügt („paypal_form“). Und wenn das 'ticket' DIV umgeschaltet wird, dh Clicked um das Element abzuwählen, sollte das hinzugefügte Element entfernt werden.

danke Craig.

Answer 1

Man könnte es ähnlich Annäherung an dieses. Es prüft, ob die Klasse selected dem ausgewählten div zugewiesen ist. Wenn dies der Fall ist, wird eine verborgene Eingabe mit einer bestimmten ID an das Formular angehängt. Wenn das div nicht ausgewählt ist, entfernt es diese Eingabe aus dem Formular.

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

Answer 2

es rechnete mit dem folgenden

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++); 
}); 

Dank für Ihre Hilfe aus :)