Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2015
    Messaggi
    107

    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
    26,131
    Edita e formatta il codice cosi è illeggibile
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2015
    Messaggi
    107
    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
    26,131
    E l'evento per richiamare lo script dov'è?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2015
    Messaggi
    107
    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
    26,131
    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
    5,674
    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
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2015
    Messaggi
    107
    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 © 2024 vBulletin Solutions, Inc. All rights reserved.