Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Numero di input dipendenti da un valore di input precedente

  1. #1

    Numero di input dipendenti da un valore di input precedente

    Come da titolo il numero di input che vorrei inserire dipende dal valore di un input precedentemente richiesto, cercando su internet ho provato a mettere gi del codice ma non funziona
    codice HTML:
    <!doctype html><html lang="it">  
    <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    
    
      <script type="text/javascript">       
     var n_c = $(".num_c").val();
      var new_inputs = '';
       for (var i = 0; i < parseInt(n_c); i++) {        
    $('<div/>', {  new_inputs += '<label class="control-label col-sm-2" for="num_c">Il consegnaotore numero '+i+' consegna:</label>'           
    +'<div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="optradio" checked>A piedi </label>'          
      +' <label class="radio-inline"> <input type="radio" name="optradio">In bici </label>'         
     +' <label class="radio-inline"> <input type="radio" name="optradio">In motorino </label> '  
     +' <label class="radio-inline"> <input type="radio" name="optradio">In macchina </label> /div>';        });        }         
       $('.mezzi_c').html(new_inputs);
        </script>    
    </head>  
    <body><br><br>      
     <div class="row form-group">          
    <label class="control-label col-sm-2" for="num_c">Numero Consegnatori:</label>          
      <div class="col-sm-10">              <input type="number" class="form-control" id="num_c" placeholder="Numero Consegnatori" name="num_c" min="1"required="true">            </div>        </div>          <div class="row form-group" id="mezzi_c">                  </div>  
    </body>  
    </html>
    come mai?
    Ultima modifica di ROCCHEFILI; 12-10-2018 a 13:15

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,376
    Edita e formatta il codice cosi illeggibile
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Edita e formatta il codice cosi illeggibile
    Fatto

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,376
    E l'evento per richiamare lo script dov'?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    E l'evento per richiamare lo script dov'?
    codice:
    <script type="text/javascript">     $(function() {
            var numero_conse = $("#num_c");
         	numero_conse.change(function() {
        	var n_c = numero_conse.val();
        	var new_inputs = '';
        	for (var i = 0; i < parseInt(n_c); i++) {
            $('<div/>', {
          		new_inputs += '<label class="control-label col-sm-2" for="mezzi_c">Il consegnaotore numero '+i+' consegna:</label>'
                +'<div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="optradio" checked>A piedi </label>'
                +' <label class="radio-inline"> <input type="radio" name="optradio">In bici </label>'
                +' <label class="radio-inline"> <input type="radio" name="optradio">In motorino </label> '
                +' <label class="radio-inline"> <input type="radio" name="optradio">In macchina </label> </div>';
            });
        	}
        	   $('.mezzi_c').html(new_inputs);
    	});
        </script>
    Anche provando a fare in questo modo non funziona

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    28,376
    Non funziona non genera gli input oppure non funzionano gli input generati? Prova anche ad usare on(‘evento’.....)
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,058
    Ciao, il tuo script presenta un principale errore di distrazione e diversi errori di sintassi.

    Il primo sta qui:
    codice:
    $('.mezzi_c').html(new_inputs);
    Nel tuo html, quel "mezzi_c" un id non una classe, per cui il selettore jQuery dovrebbe essere "#mezzi_c" non ".mezzi_c".

    Gli errori di sintassi ti consiglio di individuarli e correggerli tu stesso utilizzando la console web del tuo browser. Puoi aprire la console premendo F12 oppure attraverso il menu strumenti o qualcosa del genere a seconda del browser che usi; aggiorna eventualmente la tua pagina una volta aperta la console, dovrebbero saltati fuori i messaggi di errore che avvengono durante l'esecuzione dello script. Verifica e cerca di correggere lo script. Fai qualche prova e fai sapere.

    Buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  8. #8
    L'ho risolta in questo modo:

    codice:
    <!doctype html><html lang="it">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
          function num_cons_mezz(val) {
            var new_inputs = '';
            for (var i = 1; i <= val ; i++) {
                new_inputs += '<label class="control-label col-sm-2" for="mezzi_c">Il consegnaotore numero '+i+' consegna:</label>'
                +'<div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="optradio'+i+'" checked>A piedi </label>'
                +' <label class="radio-inline"> <input type="radio" name="optradio'+i+'">In bici </label>'
                +' <label class="radio-inline"> <input type="radio" name="optradio'+i+'">In motorino </label> '
                +' <label class="radio-inline"> <input type="radio" name="optradio'+i+'">In macchina </label> </div>';
            }
            console.log(new_inputs);
            $('#mezzi_c').html(new_inputs);
          }
          
        </script>
        </head>
      <body><br><br>
      	 <div class="row form-group">
              <label class="control-label col-sm-2" for="num_c">Numero Consegnatori:</label>
                <div class="col-sm-10">
                  <input type="number" class="form-control" id="num_c" placeholder="Numero Consegnatori" name="num_c" min="1"required="true" onchange="num_cons_mezz(this.value)">
                </div>
            </div>
              <div class="row form-group" id="mezzi_c">
              
            </div>
      </body>
      </html>
    Grazie mille di avermi aiutato.

Tag per questa discussione

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 © 2018 vBulletin Solutions, Inc. All rights reserved.