Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Duplicare una select con clone()

    Ciao a tutti,
    io utilizzo questo script per duplicare dei campi precisamente due input, in pratica l'utente ha una maschera dove può aggiungere degli input se devi inserire ulteriori info.


    codice:
    var scntDiv = $('#p_scents');        var i = $('#p_scents p').length + 1;            $('#addScnt').click(function() {
                            $('#p_scents p:first').clone().find('input').val('').attr('name', function(index, value) {                                            return value + i;                }).end().append('<a href="#" class="remScnt">Rimuovi</a>').appendTo(scntDiv);                                    new tcal({                    formname: 'NEW',                    controlname: 'startd' + i                });                            i++;                return false;
        });
    praticamente dopo aver richiamato la funzione questi input si duplicano

    e a questo si aggiunge
    codice:
    <input type="text" id="p_scnt" size="20" class="form-control" name="checklist_1" value="" placeholder="Nome Prodotto Correlato" style="width:400px;display: inline;">
    questo
    [CODE]
    codice:
    <input type="text" id="p_scnt" size="20" class="form-control" name="checklist_12" value="" placeholder="Nome Prodotto Correlato" style="width:400px;display: inline;">
    dove è tutto uguale tranne il mane

    ho avuto l'esigenza di aggiungere un campo select
    codice:
    <select name="checkTipo_1" id="p_scntTipo" class="form-control" style="width:150px;display: inline;">
                                                                         <option value="">Seleziona </option>    
                                                                         <option value="Q">Quantità </option>
                                                                        <option value="S">Scelta </option>
                                                                        <option value="O">Obbligatorio </option>
                                                                     </select>
    la funzione di sopra mi duplica la riga perchè è presente nel div ma non mi fa a cambiare il nome della select che mi rimane come l'originale.

    Mi potete dare qualche suggerimento?
    Grazie
    Ultima modifica di ciucciatiilcalzino; 09-09-2016 a 22:33

  2. #2
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,509
    mettilo in una variabile e poi fai il replace degli attributi id e name
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  3. #3
    Quote Originariamente inviata da ciro78 Visualizza il messaggio
    mettilo in una variabile e poi fai il replace degli attributi id e name
    Ciao Ciro78, grazie per avermi risposto.
    Purtroppo però non ho capito cosa devo mettere nella variabile e come

  4. #4
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,509
    Quote Originariamente inviata da ciucciatiilcalzino Visualizza il messaggio
    Ciao Ciro78, grazie per avermi risposto.
    Purtroppo però non ho capito cosa devo mettere nella variabile e come

    mi sono perso. mo che ci azzecca la select?
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  5. #5
    Quote Originariamente inviata da ciro78 Visualizza il messaggio
    mi sono perso. mo che ci azzecca la select?
    Ciao, ti ricapitolo tutto
    questo di seguito è il div che vado a clonare premendo sul tasto che richiama la funzione sotto


    codice HTML:
    <div id="p_scents">                                                 <p>                                                                                       <input type="text"  id="p_scnt" size="20"  class="form-control"  name="checklist_1" value="" placeholder="Nome Prodotto Correlato"  style="width:400px;display: inline;" />                                                             &euro; <input type="text" id="p_scntCosto" class="form-control" size="20" name="checkCosto_1" value="" placeholder="Prezzo Correlato"  style="width:150px;display: inline;" />                                                              Tipo <select name="checkTipo_1" id="p_scntTipo"  class="form-control"  style="width:150px;display: inline;" >                                                             		<option value="" >Seleziona </option>	                                                             		<option value="Q" >Quantità </option>                                                                    <option value="S" >Scelta </option>                                                                    <option value="O" >Obbligatorio </option>                                                             	</select>                                                  </p>                                                </div>


    codice:
    
    function tcal() {};
            
            
             new tcal({
            // form name
            'formname': 'NEW',
            // input name
            'controlname': 'startd'
            });
        
    
    
            var scntDiv = $('#p_scents');
            var i = $('#p_scents p').length + 1;
        
            $('#addScnt').click(function() {
                
                
                
                        
                        $('#p_scents p:first').clone().find('input').val('').attr('name', function(index, value) {
                            
                        return value + i;
                    }).end().append('<a href="#" class="remScnt">Rimuovi</a>').appendTo(scntDiv);
                    
                    
                    
        
        
        
        
                    new tcal({
                        formname: 'NEW',
                        controlname: 'startd' + i
                    });
                
                    i++;
                    return false;
                
            });
    La funzione , funziona bene in quanto a clonare glie elementi, realmente mi duplica il div, quello che non mi funziona bene e cambiare i name.
    Per i campi input mi fa cambia il nome correttamente per esempio
    questo
    name="checkCosto_1"
    nella duplica diventa questo
    name="checklist_12"

    cosa che invece non funziona per il campo select che come detto viene duplicato ma il name checkTipo_1 rimane checkTipo_1 invece di divenire checkTipo_12

    nella mia poca conoscenza di questa funzione clone credo che il problema sia che richiama solo .find('input')

    Spero di essere stato più chiaro
    Grazie
    Ultima modifica di ciucciatiilcalzino; 16-09-2016 a 12:08

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,132
    Non sunziona perché recuperi solo i find input devi fare la stessa cosa con le select
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Non sunziona perché recuperi solo i find input devi fare la stessa cosa con le select

    Ciao ho provato con questa soluzione (senza sapere il perchè)
    e sembra che funzioni
    codice:
        $('#p_scents p:first').clone().find('input').val('').attr('name', function(index, value) {
                            
                        return value + i;
                    }).end().find('select').val('').attr('name', function(index, value) {
                            
                        return value + i;
                    }).end().append('<a href="#" class="remScnt">Rimuovi</a>').appendTo(scntDiv);
    Ultima modifica di ciro78; 16-09-2016 a 16:49 Motivo: tag code

  8. #8
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,509
    ciucciatiilcalzino ricordati il tag code
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.