Forum : Probleme formulaire ajax

Bonjour,

j'ai suivi le Tutoriel vidéo jQuery : Poster un formulaire en Ajax..

le système fonctionne très bien alors j'ai voulu l'adapter un peu pour faire des prévisualisations et c'est la ou j'ai un petit problème.

alors voila mon formulaire :

<form method="POST" action="#" id="formcreer" class="formaccueil">
    <label for="title">Titre :</label>
    <input type="text" name='titre' id='titre'/>
    <hr/>
        <textarea class="txta" id="txtarea" name='txtarea' ></textarea>
    <hr/>
    <input class='sub' id="register" name="register" type="submit" value="Enregistrer">
    <input class='sub' id="preview" name="preview" type="submit" value="Prévisualiser">
</form>

et voila le js :

function accueil(){
    $(".formaccueil").submit(function(){
        var title = $(this).find("input[name=titre]").val();
        var id = $(this).find("input[name=id]").val();
        var txt = $(this).find("textarea[name=txtarea]").val();
        var preview = $(this).find("submit[name=previewModif]").click();
        var register = $(this).find("submit[name=register]").click();

        if (preview){
            $("#resultajax").empty().hide().append(txt).slideDown();

            return false;
        }
        if (register){
            $.post("index.php?p=admin&pa=accueil",{title : titre,id : id, txt: txtarea},function(data){
                if(data != "ok"){
                    $(".error").empty().append(data);
                }else {
                    $("#resultajax").hide().append("<strong>Commentaire de :"+guest+"</strong><div id=\"showCom\">"+com+"</div>").slideDown();
                }
                return false;
            });
        }

    });
}

alors le problème est que je suis obligé de cliquer deux fois sur prévisualiser pour afficher mon texte ...

Pourriez-vous m'aider s'il vous plait s'il vous plait ?

Merci d'avance.

Amicalement.

6 réponses

soohikei

Auteur

Réponse acceptée

Voila Voila c'est résolu :

$(".sub").click(function(){

        //on recupere le bouton sur lequelle on a click !
        var btn = $(this).attr('id');

        //on recupere le formulaire parent !
        var form = $(this).parents("form");
        var div = form.parents("div");

        //on recupere le contenu des champs !
        var title = form.find("input[name=title]").val();

        var id = form.find("input[name=id]").val();

        var txta = form.find("textarea").attr("id");

        var valEdit = CKEDITOR.instances[txta].getData();

        //partie traitement

        if(btn == "preview"){
            //do preview
        }if(btn == "register"){
            //do save ajax
        }

        return false;
    });

en faite il faut récupérer l'id du textarea et l'utiliser dans une petite syntaxe qui convient a ckeditor :

var id = form.find("input[name=id]").val();

        var txta = form.find("textarea").attr("id");

        var valEdit = CKEDITOR.instances[txta].getData();

Pewel-OutOfNutella

Salut !

Dans ton code js, tu essaye de récupérer un input avec comme nom "id" mais je ne le vois pas dans ton code html.
Idem pour preview dans ton code hmtl qui est différent de previewModif dans ton code js.

soohikei

Auteur

Bonjour a toi,

Oui j'ai remarquer j'ai avancé depuis tout a l'heure, en faite j'ai tout changé

$(".sub").click(function(){

        //on recupere le bouton sur lequelle on a click !
        var btn = $(this).attr('id');

        //on recupere le formulaire parent !
        var form = $(this).parents("form");

        //on recupere le contenu des champs !
        var title = form.find("input[name=title]").val();
        /* permet de recuperer l'id d'un formulaire à modifier 
                **(il n'y est pas dans tous les formulaires)
                **et c'est un input de type hidden ! 
                */
        var id = form.find("input[name=id]").val(); 

        var txt = form.find("textarea[name=txtarea]").val();

        //partie traitement

        if(btn == "preview"){
            $("#resultajax").empty().hide().append(txt).slideDown();
        }if(btn == "register"){
            alert('save');
        }

        return false;
    });

un de mes formulaires :

<form method="POST" action="#" id="formcreer" class="formaccueil">
    <label for="title">Titre :</label>
    <input type="text" name='title' id='title'/>
    <hr/>
    <textarea class="txta" id="txtarea" name='txtarea' ></textarea>
    <hr/>
    <input class='sub' id="register" name="register" type="submit" value="Enregistrer">
    <input class='sub' id="preview" name="preview" type="submit" value="Prévisualiser">
</form>

alors le problème qui se pose maintenant est que je n'arrive pas à récupérer le contenue du textarea alors que je récupère bien le contenu du titre

par contre dans mon autre formulaire j'arrive à le récupérer :

<p class="toggle">
        <dt><?php echo $row'titre'];?></dt>
        <dd class = "target" name="<?php echo $row'titre'];?>">
            <form method="POST" action="#" id="formmodif" class="formaccueil">
                <label for="title">Titre :</label>
                <input type="text" name='titre' id='titre' value="<?php echo $row'titre'];?>" />
                <hr/>
                    <textarea class="txta" id="txtarea" name='txtarea' ><?php echo $row'texte'];    ?></textarea>
                <hr/>
                <input type="hidden" name='titre' id='titre' value="<?php echo $row'id'];?>" />
                <input class='sub' id="register" name="register" type="submit" value="Enregistrer">
                <input class='sub' id="preview" name="previewModif" type="submit" value="Prévisualiser">
            </form>
        </dd>
        <hr class="hr" >
    </p>

Merci encore

soohikei

Auteur

Bon apparament le problème viendrait du faite que je me sers de ckeditor alors j'ai trouvé une doc mais je n'ai pas l'impression que cela fonctionne ou alors je n'ai pas bien compris la doc (ce qui est surement le cas).

Enfin bon pourriez-vous m’éclaircir a se sujet ? merci

Pewel-OutOfNutella

J'ai testé avec ta méthode, que je ne connaissais pas, c'est à dire celle là :

var txt = form.find("textarea[name=txtarea]").val();

et il n'y a rien dans la variable txt, je ne sais pas comment ça fonctionne.
En revanche, je te conseille cette technique :

$("#txtarea").val();

Edit : je n'avais pas vu que tu avais trouvé la solution, bravo !

soohikei

Auteur

merci ce n'était pas sans mal et comme j'avais plusieur formulaire il fallait absolument que je récupère l'id du textarea du formulaire ou j’étais.

enfin j'espere que ca aidera quelqu'un d'autre en tous les cas :) merci de ton aide en tous les cas.