Comment faire ? et pourquoi ?

Il faut arrêter l’action par défaut grâce à : Return false qui équivaut à écrire preventDefault() et stopPropagation()

Pourquoi ? Cela peut être très pratique pour donner des informations directement à l’utilisateur sans pour autant recharger la page.

Un exemple sera bien plus parlant 🙂

Partie HTML

<form onsubmit="return resetForm()">
    <select name="demande" id="demande">
        <option value="heure">Qu'elle heure est-il ?</option>
        <option value="jour">Qu'elle jour somme nous ?</option>
    </select>
    <input type="submit" id="envoyer_demande" name="envoyer_demande" value="Envoyer la demande" />
</form>
<div id="resultat"></div>

Partie Javascript

function resetForm(){

    var select = document.getElementById('demande'),
        value = select.options[select.selectedIndex].value;

    switch(value){
        case "heure":
            dateA(); // va appeler notre function qui affichera le temps
            break;
        case "jour":
            jourJ(); // va appeler notre function qui affichera le jour de la semaine
            break;
        default: 
             dateA();
             break;
    }

    return false;
}

L’élément important est le return false !

Le switch va nous servir pour faire appel à une function par rapport à la valeur de notre select.