Prendere il valore di una select senza ricaricare la pagina

**paskuale** · 24-11-2013, 15:09

Salve a tutti, ho una pagina in cui mostrare un form html, solo che il form cambia in base ad una scelta che l'utente fa da una select, come posso inviare il form giusto in base alla scelta fatta dalla select però senza che l'utente clicchi sul pulsante invio.

Mi spiego meglio, l'utente entra nella pagina e trova una select, sceglie il valore e appena lo ha fatto in basso compare il form giusto, che varia in base alla scelta fatta. Tutto questo senza che l'utente prema alcun tasto, il tasto submit alla fine mi invia i dati del rispettivo form scelto.

ho trovato, su un vecchio post, questo codice che dovrebbe fare ciò che voglio, ma non ho capito come usarlo:
function loadPage(list) {
location.href = list.options
[list.selectedIndex].value
}

Come posso fare????
grazie a tutti.

**Alhazred** · 24-11-2013, 15:18

Il "form giusto" chi lo decide?
C'è uno script PHP che lo deve generare?
Sulla pagina ci sono già tutti i form solo che vengono nascosti per mostrare solo quello "giusto" al momento giusto?

Nel primo caso devi inviare una richiesta AJAX (quindi Javascript) contenente il valore della scelta effettuata allo script, recuperare la risposta dello script PHP (che sarà una stringa contenente il codice del form) e metterla sulla pagina, sempre con AJAX.

Nel secondo caso devi usare solo Javascript.

Detto questo, si intuisce che la sezione PHP è sbagliata, ti sposto in Javascript.

**paskuale** · 24-11-2013, 15:54

il form giusto lo decide l'utente in base al valore che sceglie nella select;
chi genera il form è indifferete posso usare entrmabe le soluzioni, o php o html e nascondere quelli che non devono essere visti.

Grazie dell'aiuto.

**Mali10** · 24-11-2013, 23:31

Ciao puoi fare tutto con js, io l'ho già fatto nel sito che sto realizzando, domani ti posto il codice!

**Enzaccio** · 25-11-2013, 16:46

Il pezzettino di codice che hai postato esegue (corretamente) il reindirizzamento a URL preso dalla SELECT, come VALUE dato alle varie OPTION.

Questo che invece ti ho fatto, si dovrebbe avvicinare a quello che chiedi; ma attenzione: se l' utente avesse JS disabilitato sul Browser (Netscape-Mozilla), non vede alcun FORM per cui, prevedere un avviso NOSCRIPT e/o un layout alternativo in solo PHP che invita a premere un SUBMIT dopo la scelta, e rimanda al Server che ti ri-manda la pagina col FORM adatto.

codice:

<script>
var vista="div0";

function mostra(quale){
 document.getElementById(vista).style.display="none";
 document.getElementById(quale).style.display="";
 vista=quale;
 }
</script>


<select name="prima" onchange="mostra(this.value);">
 <option value="div0">- scegli chi -
 <option value="div1">Mario
 <option value="div2">Enzo
 <option value="div3">Dina
 <option value="div2">Franco
</select>
<br><br>
<div id="div0">default</div>
<div id="div1" style="display: none">Un form</div>
<div id="div2" style="display: none">Un altro form</div>
<div id="div3" style="display: none">Un altro form ancora</div>

vista=quale; ci prepara nel caso di una scelta successiva (ripensamento), a nascondere l' ultimo lasciato aperto; altro sistema, è di nasconderli tutti (in ciclo) preventivamente, e poi dare il display="block"; a quello scelto.

**carlomarx** · 25-11-2013, 17:50

Giusto per info, si può fare il tutto in puro CSS senza javascript. Esempio (il look fa schifo):

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
fieldset.choose-form ul, input[type="radio"].form-connect, input[type="radio"].form-connect ~ div {
    display: none;
}

fieldset.choose-form:hover > ul, input[type="radio"].form-connect:checked + div {
    display: block;
}

fieldset.choose-form {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    overflow: visible;
    padding: 0;
    margin: 0;
    border: none;
}

fieldset.choose-form legend {
    display: block;
    border: 1px #666666 solid;
    background-color: #ccaaee;
    padding: 2px;
}

fieldset.choose-form ul {
    position: absolute;
    height: auto;
    /* vertical-menus width */
    width: 160px;
    border: 1px #666666 solid;
    background-color: #dddddd;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

fieldset.choose-form li {
    position: relative;
    float: none;
    display: block;
    height: 28px;
    width: 100%;
    border: none;
}

fieldset.choose-form label {
    display: block;
    height: 100%;
    width: 96%;
    padding: 0 0 0 4%;
    line-height: 28px;
    background-color: transparent;
    border: none;
    color: #000000;
    font-family: georgia, serif;
    font-size: 11px;
    font-style: normal;
    cursor: pointer;
}

fieldset.choose-form li:hover label {
    background-color: #cccccc;
    color: #ff0000;
}
</style>
</head>

<body>

<div>
    Tipo di form: 
    <fieldset class="choose-form">
        <legend>- scegli chi -</legend>
        <ul>
            <li><label for="form-conn-1">Mario</label></li>
            <li><label for="form-conn-2">Enzo</label></li>
            <li><label for="form-conn-3">Dina</label></li>
            <li><label for="form-conn-4">Franco</label></li>
        </ul>
    </fieldset>
</div>

<input class="form-connect" type="radio" name="prima" value="div1" checked id="form-conn-1" />
<div class="form-container">default</div>

<input class="form-connect" type="radio" name="prima" value="div2" id="form-conn-2" />
<div class="form-container">Un form</div>

<input class="form-connect" type="radio" name="prima" value="div3" id="form-conn-3" />
<div class="form-container">Un altro form</div>

<input class="form-connect" type="radio" name="prima" value="div4" id="form-conn-4" />
<div class="form-container">Un altro form ancora</div>

</body>
</html>

**paskuale** · 26-11-2013, 00:22

Grazie mille per le risposte, appena ho un attimo provo tutto !

Discussione: Prendere il valore di una select senza ricaricare la pagina

Strumenti discussione

Ricerca discussione

Visualizza

Prendere il valore di una select senza ricaricare la pagina

Permessi di invio