Bonjour,

J'ai une fonction Jquery qui est la suivante :

function calc(){
    $("#calc_result").fadeOut(200);
    $("#p_form input[type=text]").each(function(){
        if($(this).val()>0){
            res+=$(this).attr("alt")*$(this).val();
        }
    });
    if(res>0){
        //$("#calc_result").fadeIn(500,function(res){
        $("#calc_result").html("<h1>"+formatCurrency(res)+" m<sup>3</sup></h1>");
        $("#calc_result").fadeIn(300);
        //});
    }    
res=0;  // Resetting 
    return false;
}

Je souhaite passer la variable calc_result en cliquant sur un bouton à une page php via un get

je ne connais pas la bonne methode, serai ce quelque chose du genre :

<input type="button" value="Demander un devis gratuit" onClick="location.href='devis.php?val='+calc_result;">

quelqu'un peut m'éclairer ?

merci

14 réponses


patk29
Auteur
Réponse acceptée

Finalement j'ai trouvé c'est cette solution qui fonctionne :

function goDevis(){ 
                calc();
                var url = 'devis.php?val=' + $("#calc_result").val();
                console.log(url);               
                location.href = url;
            }
        function calc(){
            $("#calc_result").fadeOut(200);
            $("#p_form input[type=text]").each(function(){
                if($(this).val()>0){
                    res+=$(this).attr("alt")*$(this).val();
                }
            });
            if(res>0){
                //$("#calc_result").fadeIn(500,function(res){
                $("#calc_result").html("<h1>"+formatCurrency(res)+" m<sup>3</sup></h1>");
        $("#calc_result").val(res);
                $("#calc_result").fadeIn(300);
                //});           
            }
            res=0;  // Resetting 
            return false;
        }

il manquait ça à la fonction calc() :

$("#calc_result").val(res);

Si tu ajoutes l'ID #btn a ton bouton:

$('#btn').click(function(e){
    e.preventDefault();
    var calc_result = /* Ou est stockée ta variable dans le DOM, ou bien un appel a la fonction qui devra retourner ton résultat */;
    location.href = 'devis.php?val=' + calc_result;
});
patk29
Auteur

dans ce cas on met quoi dans onClick ?

Pas de onclick du tout ^^
En règle général on évite le JS dans les balises html, et on met tout dans un fichier a coté. C'est bien plus simple pour la maintenance.

patk29
Auteur

ok mais bon ça ne marche pas

ben dis comme ca ca va pas etre simple de t'aider ... que dis la console ? comment récupères-tu la variable calc_result ? essayes-tu de faire des console.log(variable) ? as-tu une url accessible pour nous ?

patk29
Auteur

voila le début du form :

<form id="p_form" onSubmit="return calc();">
                                    <table align="left" cellpadding="4" cellspacing="0">
                                        <tr>
                                            <td colspan="2"><h5>
                                                    <input type="reset" name="Submit2" value="Reset">
                                                    <input type="submit" name="Submit" value="Calculer le volume total">
                                                    <input id="btn" type="button" value="Demander un devis gratuit">                                                    
                                                </h5></td>
                                            <td align="left"><div class="result" id="calc_result">
                                                    <h1> </h1>
                                                </div></td>
                                            <td align="left"> </td>
                                        </tr>

Bon, plusieurs choses:

1/ Passer une variable en get se fait très bien sans javascript, avec un champ caché par exemple:

<form name='bla' method='get' action='devis.php'>
    <input type='hidden' />
    <input type='submit' />
</form>

Je ne comprends pas bien pourquoi tu ne passes pas par ça avec, dans la fonction calc, une modification de la valeur du champ caché.

2/ Il y a des choses qui ne vont pas dans ton code, mais sans nécessairement que ça affecte vraiment quoi que ce soit. En particulier:

  • Le type submit devrait etre réservé pour la soumission d'un formulaire, pas pour un calcul JS a la fin duquel tu retourn false pour empecher la soumission. Il serait parfait pour ta demande de devis par exemple.
  • La remise a 0 de la variable res a la fin de ta fonction JS est totalement inutile: elle ne sort pas du scope de la fonction, et elle est détruite a la fin de l’exécution de la-dite fonction
  • Le JS dans tes balises est a proscrire.

3/ Si tu veux absolument soumettre ton formulaire en jQuery, voila ce que je te suggère:

le HTML:
  • J'ai mis le type 'submit' a la demande de devis, et 'button' au calcul
  • J'ai viré tout le JS des balises

    <form id="p_form">
    <table align="left" cellpadding="4" cellspacing="0">
    <tr>
    <td colspan="2">
    <h5>
    <input type="reset" name="reset" value="Reset">
    <input id="calculate" type="button" name="submit" value="Calculer le volume total">
    <input id="submit" type="submit" value="Demander un devis gratuit">
    </h5>
    </td>

        <td align="left">
            <div class="result" id="calc_result">
                <h1> </h1>
            </div>
        </td>
    
        <td align="left"> 
        </td>
    </tr>

    </table>
    </form>

Le JS:
  • Le JS marche dans mes conditions (il fait la redirection correctement)
  • Le déclenchement du calcul est effectué ici, pas depuis les balises html
  • Il est d'ailleurs fait au clique du bouton pour calculer et aussi a la soumission
  • La fonction calc() retourne la valeur calculée pour qu'elle puisse être directement utilisé dans le location.href, sans avoir a la récupérer depuis ta div et s’embêter avec le formating que tu y ajoutes.
  • j'ai utilisé www.google.com pour mes essais (qui marchent), remplace par ta page.
  • Je console.log l'url pour mes tests aussi, tu peux t'en servir pour vérifier que tout va bien, mais tu peux le virer aussi.
  • N'oublie pas d'encapsuler tout ca dans la fonction jQuery

    $('#calculate').click(function(e){
    calc();
    });
    $('#submit').click(function(e){
    e.preventDefault();
    var url = 'www.google.com?val=' + calc();
    console.log(url);
    location.href = url;
    });
    function calc(){
    $("#calc_result").fadeOut(200);

    $("#p_form input[type=text]").each(function(){
        if($(this).val()>0){
            res+=$(this).attr("alt")*$(this).val();
        }
    });
    
    if( res > 0 ){
        //$("#calc_result").fadeIn(500,function(res){
        $("#calc_result").html("<h1>"+formatCurrency(res)+" m<sup>3</sup></h1>");
        $("#calc_result").fadeIn(300);
        //});
        return res;
    }

    }

patk29
Auteur

désolé mais ça marche encore moins bien j'ai plus d'affichage du volume et le bouton "demander un devis" ne marche toujours pas !

le code d'origine n'est pas le mien cela fait partie d'un site à refondre et vu le budget je recherche la solution la plus rapide sans avoir à tout refaire. Je serai sans doute passé par PHP et pas avec du JQuery aussi.

Bah encore une fois comme je le disais quelques lignes plus haut, si tu ne donnes aucune indication sur ce que te retourne le JS (console) et que tu ne fais pas un minimum de tests avec les pistes qu'on te donnes (breakpoints, affichage de variables a la console, voire même des alert('kiki'), ou ce que tu veux ...) on pourrait y mettre la meilleure volonté du monde ca serait quand même pas simple de t'aider.

Le truc a faire c'est simplement un location.href dans une fonction dans laquelle tu fais <u>aussi</u> ton calcul, pour avoir la résultat a portée (dans le scope) et donc pouvoir l'utiliser dans le location.href.

Au pire du pire, tu peux faire une fonction jQuery qui modifie la valeur de l'attribut onClick de ton bouton "Demander un devis", pour que cette valeur soit la nouvelle url (avec la variable que tu veux) a chaque fois qu'on clique sur "Calculer le volume total". Ca serait très très laid comme façon de faire mais ca marcherait.

patk29
Auteur

j'ai essayé ça :

function goDevis(){ 
                calc();
                var url = 'devis.php?val=' + calc_result;
                console.log(url);
                location.href = url;
            }

avec

<input type="button" value="Demander un devis gratuit" onclick="goDevis();">

là on va bien à la page concernée mais pas de valeur transmise.

rien s'affiche dans la console pourtant il y a bien un log mais pas moyen de voir l'url transmise.

patk29
Auteur

si j'essaye avec :

function goDevis(){ 
                calc();
                var url = 'devis.php?val=' + $("#calc_result").val();
                console.log(url);
                location.href = url;
            }

c'est pareil

Créé un jsfiddle ici : http://jsfiddle.net/

Cela permettra à Vallyan à mieux comprendre ta demande, commente certaine ligne là où il y a eu ambiguïté :')

Quand je vois la tartine (une belle tartine :)) qu'il a fait ça serait dommage de s’arrêter maintenant.

++

Bon, si ca marche, tant mieux :)
N'oublie pas de valider ta réponse !