Afficher un DIV caché après la soumission d'un formulaire d'action

Je suis en train d'afficher un div caché après l'envoi d'un formulaire de données

En dessous de mon formulaire html où la section d'entrée aura un formulaire pour saisir les données et après avoir soumis le formulaire, j'ai à montrer caché section de sortie et montrer le résultat, il y

code html:

<div id="input">


----- some form datas here ----

<div id="submit">
        <input type="submit"  id="generate" name="script" value="generate" />

    </div>

</div>


<div id="output" style="display: none;">


--- php echo from above form------

</div>


</form>

css:

#input{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}


#output{
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;

}

Après quelques discussion précédente sur les mêmes sujets, ci-dessous est l'un des répondu solution pour ce

créer un JavaScript, comme afficher un div caché après la soumission du formulaire.

$('form').submit(function(){
    $('#output').show();  

});

ou

$('form').submit(function(e){
    $('#output').hide();  
    e.preventDefault();
    //Or with: return false;        
});

Mais les deux solutions ne sont pas de travail pour moi.le second est capable de montrer le caché div output mais il ne montre pas réel des données de formulaire.

Comment puis-je afficher correctement ? J'ai besoin de montrer ce après la soumission du formulaire (type="submit")

Mise à JOUR:

  1. Supprimé les css pour masquer div

  2. Ajouté la fonction css dans la feuille de style pour cacher div

    #output{
display:none;
width:800px;
margin: auto;
border-width:1px;
border-style:solid;
border-color:#ddd;
}

  3. Ajoutée en dessous de jquery pour afficher la div sur la soumettre le formulaire

    $('form').submit(function(){
$('#output').css({
  'display' : 'block'
}); 

});

Encore je une pas en mesure d'atteindre le résultat. Aucune idée ici ?

  • je ne pense pas que $('#doutput') existe dans votre code, ou est-il?
  • DKM : C'était une faute de frappe. corrigé..
  • vous avez mentionné que la deuxième option est de ne pas montrer les données de formulaire, mais comment faites-vous la définition de la forme de la valeur de données pour la section de sortie? êtes-vous configurer les valeurs sur soumettre?
  • Harry l'aide de PHP echo
  • ok, pouvez-vous montrer un échantillon de ce PHP echo déclarations? aussi, ne serait pas PHP echo exécuté uniquement sur la page de la charge quand les valeurs d'un formulaire serait vide? êtes-vous d'exécuter tout code pour actualiser le contenu sur soumettre?
InformationsquelleAutor acr | 2013-08-01
  1. 2

    utilisation

    <form id="form" action="">
</form>

    Pour afficher la sortie

     $(document).ready(function() {
        $('#output').hide();
        $('#form').submit(function(){
                 $('#output').show();   
        });
    });
    InformationsquelleAutor
  2. 1
    $('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    //Or with: return false;        
});

    Ici, dans votre script, vous êtes orthographe doutput. la remplacer par une sortie

    et à l'usage .css() de la fonction et de définir display: block !important; parce que vous les avez exposées dans votre style en ligne afin de remplacer cette, vous devez définir le !important.

    Sinon, définir display: none; dans la feuille de style au lieu de l'utiliser dans de style en ligne et faire le reste sans réglage !important

    • Peut-être qu'il ne faut pas utiliser les css à tous. Il suffit de définir la display: none dans sa feuille de style et faire le reste en JS. De cette façon, !important n'est pas nécessaire, ce qui, je pense, ne doit pas être utilisé jamais...
    • Il est à l'aide de css à sa question. et oui, vous avez raison, il peut le définir dans sa feuille de style et faire le reste sans réglage !important.
    • Joshua : je vais essayer avec la fonction css après le passage de l'actuel inline css feuille de style
    • Joshua : j'ai essayé avec au-dessus de code mis à jour à l'aide de feuilles de style css. toujours pas de travail
    InformationsquelleAutor Bhojendra Rauniyar
  3. 0

    Supprimer Display: none;

    Et faire ce code 

    $('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    //Or with: return false;        
});

    à se cacher et à 

    $('form').submit(function(e){
    $('#doutput').hide();  
    e.preventDefault();
    //Or with: return false;        
});

    pour montrer

    InformationsquelleAutor Salman Ali Khan
  4. 0

    Vous pouvez utiliser .hide() et .show() plutôt que d'éditer des attributs CSS via .css().

    $('document').ready(function() {
    $('#output').hide();
    $('form').submit(function(e) {
        $('#output').show();
        e.preventDefault();
    });
});
    InformationsquelleAutor JoshMc
  5. 0

    si vous voulez afficher les résultats à l'intérieur de la DIV, il y a beaucoup de façons de le faire.

    1. Javascript
      Donner de toutes vos données de forme d'un ID, et puis écrire une fonction javascript pour remplir les réponses dans le dit DIV.
    2. Ajax
      Postez votre formulaire à l'ajax, le retour de la réponse à votre DIV
    3. Nouvelle requête de page
      Après la soumission, vérifie si $_POST est de définir et de montrer ensuite la div avec $_POST contenu.
    InformationsquelleAutor Garytje
  6. 0

    Si j'ai bien compris vous ne voulez pas de recharger la page.
    Dans ce cas, vous devez envoyer les données du formulaire via l'appel ajax.
    Que vous pouvez afficher la réponse et le caché div.

    CSS

    #output {
    display:none;
}

    jQuery

    $(document).ready(function(){

    $('form').submit(function(e){

        //Prevent the default submit
        e.preventDefault();

        //Collect the data from the form
        var formData =  $('form').serialize();

        //Send the from
        $.ajax({
            type: "POST",
            url: "generator.php",
            data: formData,

            success: function(msg){
                //Insert the response into the div
                $('#ajaxResponse').html(msg);

                //Show the hidden output div
                $('#output').slideDown();
            }
        });    
    });

});

    HTML

    <div id="output">

    --- php echo from above form------

    <div id="ajaxResponse"></div>

</div>
    InformationsquelleAutor pszaba
  7. 0

    Vous pouvez essayer d'utiliser l'attribut "action" de l'élément de formulaire ou vous pouvez essayer le jquery serializeArray méthode à l'élément de formulaire à droite après le soumettre.

    <form>
    <input type="text" name="giveNameHere" />
    <input type="submit"  id="generate" name="script" value="generate" />
</form>
<div id="output" style="display: none;">
    Output Content
</div>

$('form').submit(function () {
    $('#output').show();
    console.log($(this).serializeArray());
    return false;
});

    Veuillez voir cette jsfiddle

    • Thanassis_K le caché div mais pas de collecte de données de formulaire(essayé avec la méthode post trop)
    • Oui vous avez raison je n'ai pas démontré le bien. S'il vous plaît essayez maintenant JSFiddle.
    • Voici un autre exemple. Espérons que vous aurez de travail 🙂 Tests de Soumettre le Formulaire JSFiddle
    • pas de travail....
    • Êtes-vous de mettre l'attribut "name" dans vos champs, de façon à obtenir sérialisé juste après? <input type="text" name="a" value="1" id="a" />
    InformationsquelleAutor Thanassis_K