Ciao,
sto cercando di costruire un form costituito da un certo numero di campi input e con la possibilità di duplicarlo tramite un tasto.
i campi input sono numerici e alla fine del form, c'è un campo che fa la somma dei valori inseriti in tutti i campi.
in pratica, nella pagina html ci sono 2 script: uno per la duplicazione e l'altro per fare la somma.
lo script per la somma funziona finchè utilizzo la 1a riga (set di campi) quella di default, ma quando lo duplico, non funziona più.
mi sapreste dire se è una questione di conflitti, incompatibilità o altro?
vi posto la pagina completa di esempio. basta un copia/incolla e qui potete scaricare la versione di jquery-latest.zip
grazie
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <script type="text/javascript" src="jquery-latest.js"></script> <script type="text/javascript"> $(function(){ addDuplicateFormFuncs(); }); function addDuplicateFormFuncs(){ $(".inputs").each(function(i){//for each set of .inputs being set1, set2, set3 etc... repeat(this.id); // get the current id of the .inputs element and pass it to the repeat function function repeat(currentSet){ var totalInputs = $("#" + currentSet + " .formInputs").length;//get current length of .formInputs of the current set ex. = #set1 .formInputs $("#" + currentSet + " .formInputs:last .add:visible").click(function(){//add click handler to current sets .add ex. = #set1Input1 .add $("#" + currentSet + " .formInputs:last .add").css({"visibility":"hidden"});//hide button for current sets .add $("#" + currentSet + " .formInputs:last .add").unbind();//remove click event from the prior input $("#" + currentSet + " .formInputs:last").after("<span class='formInputs' id='"+currentSet+"Input"+($("#" + currentSet + " .formInputs").length + 1)+"'><label><input name='uno' alt='name' type='text' onFocus='startCalc();' onBlur='stopCalc();' /></label><label><input name='due' alt='lastName' type='text' onFocus='startCalc();' onBlur='stopCalc();' /></label><label><input name='tre' alt='email' type='text' onFocus='startCalc();' onBlur='stopCalc();' /></label><input type='text' style='width:50px' name='totale'>[img]removeBtn.gif[/img][img]addBtn.gif[/img]</span>")// add another set of inputs for a specific set if ($("#"+currentSet).parent()[0].scrollHeight != 100){//scroll box $("#"+currentSet).parent()[0].scrollTop = $("#"+currentSet).parent()[0].scrollHeight; } $("#" + currentSet + " .formInputs").removeClass("oddBg");//remove oddBg class $("#" + currentSet + " .formInputs:odd").addClass("oddBg");//add back in oddBg class $("#"+currentSet+" .formInputs input").each(function(){//update the name attribute of the new Input added this.name = ""; var inputName = ($(this).parent().parent().attr('id')) + this.alt; this.name = inputName; //this.value = inputName; }) $("#"+currentSet+"Input"+ (totalInputs + 1) +" .remove").click(function(){//bind click event to the remove button if($(this).parent().next().length == 0){//if there are no inputs after these inputs then you are the last one so... $(this).parent().prev().children(".add").css({"visibility":"visible"});//naviagte to the prior inputs and turn on the add } $(this).parent().remove();//remove this inputs for a specific set $("#" + currentSet + " .formInputs").removeClass("oddBg");//remove oddBg class $("#" + currentSet + " .formInputs:odd").addClass("oddBg");//add back in oddBg class $("#" + currentSet + " .formInputs").each(function(i){ this.id = currentSet + "Input" + (i + 1); $("#"+currentSet+" .formInputs input").each(function(){//update the name attribute of the new Input added this.name = ""; var inputName = ($(this).parent().parent().attr('id')) + this.alt; this.name = inputName; //this.value = inputName; }) }) repeat(currentSet); //run the repeat function again on the new instance of the DOM, with elements removed return false; //stop browser defalut event of href }) repeat(currentSet); //run this function again on the new instance of the DOM, with elements added return false;//stop browser defalut event of href })//end click handler }//end repeat function })//end each for .inputs } </script> <script type="text/javascript"> function startCalc(){ interval = setInterval("calc()",1); } function calc(){ uno = document.frmAddProduct.uno.value; due = document.frmAddProduct.due.value; tre = document.frmAddProduct.tre.value; document.frmAddProduct.totale.value = (uno * 1) + (due * 1) + (tre * 1); } function stopCalc(){ clearInterval(interval); } </script> <style type="text/css"> .inputs { padding-bottom:15px; } .inputs .formInputs a{display:inline;} .inputs .formInputs input{margin-left:5px;} .inputs .formInputs{margin:5px; 0;padding:3px; display:block;} img{border:0;} /*.overFlowAdds{height:100px;overflow:auto;width:750px;} */ h3{margin:10px 0 2px;} .oddBg{background-color:#FFFFD9;} </style> </head> <body> <div class="overFlowAdds"> <form action="prova.php" method="post" enctype="multipart/form-data" name="frmAddProduct" id="frmAddProduct"> <span id="set2" class="inputs"> <span class="formInputs" id="set2Input1"> <label><input name="uno" type="text" onFocus="startCalc();" onBlur="stopCalc();" /></label> <label><input name="due" type="text" onFocus="startCalc();" onBlur="stopCalc();" /></label> <label><input name="tre" type="text" onFocus="startCalc();" onBlur="stopCalc();" /></label> <input type="text" style="width:50px" name="totale"> [img]addBtn.gif[/img] </span> </span> <input type="submit" value="Submit" /> </form> </div> </body> </html>
Rispondi quotando
