Salve a tutti
Allora ho costriuto un form all'interno di un overlay ma ho notato che i campi RADIO e CHECKBOX è come se fossero disabilitati; inoltre nel medeismo form ci sono alcune operazioni in jquery da effettuare ma non vanno (chiaramente le medesime funzionano perfettamente nel caso in cui il form non fosse nell'overlay.
codice HTML:<script src="https://code.jquery.com/jquery-3.6.2.slim.min.js"</script> <script> $("#pop").click(function(){ {$("#myModal").show();}}); $(".close").click(function(){ {$("#myModal").hide();}}); $(document).on('click',"#myModal", function(e) { e.preventDefault(); if(e.target.id === "myModal"){ $('#myModal').hide();} }); $(document).ready(function(){ $('input[name=automunito]').change(function(){ if ( this.value == 'SI') {$("#3").show();} else {$("#3").hide();} }); $('input[name=settore]').change(function(){ $("#pos-animatore,#pos-risto,#pos-hotel").hide();if($(this).val() == '1'){$("#pos-animatore").show();} else if($(this).val() == '2'){$("#pos-risto").show(); } else if($(this).val() == '3'){$("#pos-hotel").show();} }); $('select[name=dispo]').change(function(){ if ( this.value == 'periodica') {$("#1").show();} else {$("#1").hide();} });});
questo è invece il pulsante che attiva il form
codice HTML:<style> /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ top:0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: hidden; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */} /* Modal Content/Box */.modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */} /* The Close Button */ .close { color: black; float: right; font-size: 28px; font-weight: bold;} .close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer;}</style> </head><body><!-- Trigger/Open The Modal --><button id="pop">Open Modal</button> <!-- Modal content --><div id="myModal" class="modal" style="display:none"><div class="modal-content"><span class="close">×</span><p> Form Overlay </p> <form id="myform" action="invia.asp" method="POST"> <input type="text" name="myName" /> <br/> <input type="text" name="myEmail" /> <br/> <textarea name="myMessage"></textarea> <br/><input type="checkbox" name="litaliano" value="A">Italiano<input type="checkbox" name="inglese" value="B">inglese<div> <input type="radio" name="settore" value="1"><label for"animazione"> Animazione</label> <input type="radio" name="settore" value="2"><label for"lavoro-an">Ristorante</label> <input type="radio" name="settore" value="3"><label for"lavoro-an">Hotel</label></div> <p></p> <div id="pos-animatore" style="display: none;"><select class="pos-lavoro" name="pos-lavoro-animatore"> <option>Animazione</option> <option value="1">capo animazione</option> <option value="2">miniclub</option> <option value="3">sport</option> </select> </div> <div id="pos-risto" style="display: none;"><select class="pos-lavoro" name="pos-lavoro-risto"> <option>Ristorante</option> <option value="sofa-1">cuoco</option> <option value="sofa-2">barman</option> <option value="sofa-3">cameriere</option> </select> </div><div id="pos-hotel" style="display: none;"> <select class="pos-lavoro" name="pos-lavoro-hotel"> <option>Hotel</option> <option value="sofa-1">Menos de 6 meses</option> <option value="sofa-2">De 6 meses a 2 anos</option> <option value="sofa-3">Mais de 2 anos</option> </select> </div> <label class="control-label" for="disponibilita">Disponiblità Lavorativa</label><select name="dispo"><option>Selezionare</option><option value="0">scegli</option><option value="occasionale">occasionale</option><option value="turni">turni</option><option value="periodica">periodica</option><option value="totale">totale</option></select> <div id="1" style="display: none;"> <div class="col-md-4"> <label class="control-label" for="estivo">Dal </label> <input type="date" name="estivodal" class="form-control" placeholder="gg/mm/aaaa"> </div> <div class="col-md-4"> <label class="control-label" for="estivo">Al </label> <input type="date" name="estivoal" class="form-control" placeholder="gg/mm/aaaa"> </div></div><p></p> <label class="control-label">Patente</label> <div> <label class="radio-inline "><input type="radio" name="automunito" class="fa.fa-circle-o" value="SI">SI</label> <label class="radio-inline "><input type="radio" name="automunito" class="fa.fa-circle-o" value="NO">NO</label> </div> <div id="3" style="display:none;"> <div class="col-md-4"> <label class="control-label">Tipologia Patente</label> <div> <label class="radio-inline "><input type="checkbox" name="tipo_patente" class="fa.fa-circle-o" value="A">A</label> <label class="radio-inline "><input type="checkbox" name="tipo_patente" class="fa.fa-circle-o" value="B">B</label> <label class="radio-inline "><input type="checkbox" name="tipo_patente" class="fa.fa-circle-o" value="C">C</label> <label class="radio-inline "><input type="checkbox" name="tipo_patente" class="fa.fa-circle-o" value="D">D</label> <label class="radio-inline "><input type="checkbox" name="tipo_patente" class="fa.fa-circle-o" value="E">E</label></div> </div></div><input type="submit" method="post" value="submit" action="invia.asp" /></form></div> </div></div> </body></html>
Rispondi quotando
