在div中显示JQuery表单的结果

Question

I'm making a calculator via a Jquery form and I'd like to display the result in a div but I can not find any solution to do it, someone would have a solution? For the moment I use inputs to display the results.

$(document).ready(function() {
      $("form#formulaire_calcul_pack").submit(function() {
           $.getJSON("wp-content/mu-plugins/calc-agri/controleur.php",
           {"actionReapro" : "calculer",
            "nombre_conso_vl_pack" : $("input#nombre_conso_vl_pack").val(),
            "nombre_jour" : $("input#nombre_jour").val(),
            "nombre_date_pack" : $("input#nombre_date_pack").val(),
            "nombre_vache" : $("input#nombre_vache").val() },
            function(data) {
                $("input#resultat_jour").val(data['resultat_jour']);
                $("input#resultat_pack_litre").val(data['resultat_pack_litre']);
                $("input#resultat_gobelet").val(data['resultat_gobelet']);
                $("input#resultat_besoin").val(data['resultat_besoin']);
            }
           );
           return false;
    });
});

<p><i class="fa fa-tint" aria-hidden="true"></i> Je dois commander :
        <input id="resultat_pack_litre" type="text" readonly="readonly"/>
</p>   
<p><i class="fa fa-tint" aria-hidden="true"></i> Soit :
        <input id="resultat_besoin" type="text" readonly="readonly"/>
</p>
<p><i class="fa fa-tint" aria-hidden="true"></i> Soit l'&eacute;quivalent de :
        <input id="resultat_gobelet" type="text" readonly="readonly"/>
</p>

</div>

Answer 1

Please ask in English

Use jquery text function.

JS:

$(document).ready(function() {
      $("form#formulaire_calcul_pack").submit(function() {
           $.getJSON("wp-content/mu-plugins/calc-agri/controleur.php",
           {"actionReapro" : "calculer",
            "nombre_conso_vl_pack" : $("input#nombre_conso_vl_pack").val(),
            "nombre_jour" : $("input#nombre_jour").val(),
            "nombre_date_pack" : $("input#nombre_date_pack").val(),
            "nombre_vache" : $("input#nombre_vache").val() },
            function(data) {
                $("div#resultat_jour").text(data['resultat_jour']);
                $("div#resultat_pack_litre").text(data['resultat_pack_litre']);
                $("div#resultat_gobelet").text(data['resultat_gobelet']);
                $("div#resultat_besoin").text(data['resultat_besoin']);
            }
           );
           return false;
    });
});

HTML :

<p><i class="fa fa-tint" aria-hidden="true"></i> Je dois commander :
    <div id="resultat_pack_litre"></div>
</p>   
<p><i class="fa fa-tint" aria-hidden="true"></i> Soit :
    <divid="resultat_besoin"></div>
</p>
<p><i class="fa fa-tint" aria-hidden="true"></i> Soit l'&eacute;quivalent de :
    <div id="resultat_gobelet"></div>
</p>