modificare form dinamicamente

paskuale

Nuovo Utente
23 Nov 2013
7
0
0
Salve a tutti ho provato a cercare un po ovunque ma senza esito, ho una pagina di registrazione utenti ma avendo diverse tipologie di utenti devo stabilire che utente registrare e quindi chiedere informazioni diverse in base al tipo di utente, la prima voce del form è un campo select in cui chiedo che tipo di user registrare, ora, quello che voglio è che in base alla scelta fatta dalla select il form che si trova sotto si modifichi automaticamente con i campi giusti.
E' possibile farlo senza dover inviare il form e ricaricare la pagina?

grazie mille
 
Ciao e benvenuto,
dovrai usare un po di javascript
ti posto un esempio semplice di come potresti fare
HTML:
<?php
if (isset($_POST['invia'])) {
    var_dump($_POST);
}
?>
<style>
    form {
        display:none;
    }
</style>
<script>
    function user_type(select) {
        var id = select.options[select.selectedIndex].value;
        document.getElementById("normale").style.display = "none";
        document.getElementById("utonto").style.display = "none";
        document.getElementById("smanetta").style.display = "none";
        document.getElementById(id).style.display = "block";
    }
</script>

tipo utente :
<select name="type" onchange="user_type(this)">
    <option value="normale">normale</option>
    <option value="utonto">utonto</option>
    <option value="smanetta">smanetta</option>
</select>
<form id="normale" method="post">
    <input type="text" name="nome" value="utente normale"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="utonto" method="post">
    <input type="text" name="nome" value="utente utonto"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="smanetta" method="post">
    <input type="text" name="nome" value="utente smanetta"/>
    <input type="submit" name="invia" value="invia"/>
</form>
non ci ho ragionato molto, è giusto per darti un idea
 
Ciao e benvenuto,
dovrai usare un po di javascript
ti posto un esempio semplice di come potresti fare
HTML:
<?php
if (isset($_POST['invia'])) {
    var_dump($_POST);
}
?>
<style>
    form {
        display:none;
    }
</style>
<script>
    function user_type(select) {
        var id = select.options[select.selectedIndex].value;
        document.getElementById("normale").style.display = "none";
        document.getElementById("utonto").style.display = "none";
        document.getElementById("smanetta").style.display = "none";
        document.getElementById(id).style.display = "block";
    }
</script>

tipo utente :
<select name="type" onchange="user_type(this)">
    <option value="normale">normale</option>
    <option value="utonto">utonto</option>
    <option value="smanetta">smanetta</option>
</select>
<form id="normale" method="post">
    <input type="text" name="nome" value="utente normale"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="utonto" method="post">
    <input type="text" name="nome" value="utente utonto"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="smanetta" method="post">
    <input type="text" name="nome" value="utente smanetta"/>
    <input type="submit" name="invia" value="invia"/>
</form>
non ci ho ragionato molto, è giusto per darti un idea

Grazie mille funziona quasi bene, ha solo un difetto, quando apri la pagina la select ha già una voce scelta e se la riscegli non compare il rispettivo form, mentre se scegli una voce diversa dalla prima e poi scegli la prima voce il forma compare.
Non so se mi sono spiegato.

Ciao
 
Per non cambiare molto potresti provare così.
HTML:
<?php
if (isset($_POST['invia'])) {
    var_dump($_POST);
}
?>
<style>
    form[id='utonto'],form[id='smanetta'] {
        display:none;
    }
</style>
<script>
    function user_type(select) {
        var id = select.options[select.selectedIndex].value;
        document.getElementById("normale").style.display = "none";
        document.getElementById("utonto").style.display = "none";
        document.getElementById("smanetta").style.display = "none";
        document.getElementById(id).style.display = "block";
    }
</script>

tipo utente :
<select name="type" onchange="user_type(this)">
    <option value="normale">normale</option>
    <option value="utonto">utonto</option>
    <option value="smanetta">smanetta</option>
</select>
<form id="normale" method="post">
    <input type="text" name="nome" value="utente normale"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="utonto" method="post">
    <input type="text" name="nome" value="utente utonto"/>
    <input type="submit" name="invia" value="invia"/>
</form>
<form id="smanetta" method="post">
    <input type="text" name="nome" value="utente smanetta"/>
    <input type="submit" name="invia" value="invia"/>
</form>
 
Salve a tutti ho provato a cercare un po ovunque ma senza esito, ho una pagina di registrazione utenti ma avendo diverse tipologie di utenti devo stabilire che utente registrare e quindi chiedere informazioni diverse in base al tipo di utente, la prima voce del form è un campo select in cui chiedo che tipo di user registrare, ora, quello che voglio è che in base alla scelta fatta dalla select il form che si trova sotto si modifichi automaticamente con i campi giusti.
E' possibile farlo senza dover inviare il form e ricaricare la pagina?

grazie mille

Bisognerebbe usare Javascript/Jquery
 

Discussioni simili