Comment effectuer un calcul sans recharger la page?

Question

abeille

7 Oct 2016 à 14:32

bonjour,
besoin de votre aide!
Sur une page html, je voudrais que l'internaute entre une valeur numérique, ensuite le calcul est effectué automatiquement et la réponse affichée.

Je sais faire le formulaire Php, le calcul, mais je n'arrive pas, même avec de l'Ajax à faire en sorte que le résultat arrive sans que la page se recharge.

Cela fait 3 jours que je galère avec ça, si vous pouviez me donner un petit coup de main: juste me donner les quelques lignes de codes nécessaires en Ajax pour ne pas que la page se recharge!

Merci pour votre aide.

_laurent

Modérateur

7 Oct 2016 à 14:37

Salut abeille !

Tu peux nous coller ton appel AJAX (et éventuellement le form html php aussi) qu'on voit un peu ou t'en es et ce qui manque ?

Tu peux pas faire les calcul en Js coté client sinon ?
Modifié par _laurent (07 Oct 2016 - 14:40)

abeille

7 Oct 2016 à 15:04

_laurent a écrit :
Salut abeille !

Tu peux nous coller ton appel AJAX (et éventuellement le form html php aussi) qu'on voit un peu ou t'en es et ce qui manque ?

Tu peux pas faire les calcul en Js coté client sinon ?

Merci de te pencher sur mon problème, parce que là j'ai pas le courage d'apprendre Ajax, déjà Html, Css, Php en quelques mois, en plus Ajax!

Donc voila mon code Html, avec le Java et le pHp:


<!-- +++++++++++++++++ CALCUL PHP   ++++ -->
            
<form method="post" id="formcom" action="#">
			
<label class="calculs" for "base">Entrez l'altitude de votre point d'observation en mètres: </label> 
<input type="text" name="base" id="base">	<br />	<br />			

<label class="calculs" for "horizon">Entrez la distance de l'objet observé en <span class="souligner">mètres</span></label> 
<input type="text" name="horizon" id="horizon">	<br />	<br />	
		
				<button class="envoyer" type="submit"> Envoyer</button>
<p style="margin-bottom: 5%"></p>

</form>
 <?php
$base=($_POST['base']);
$horizon=($_POST['horizon']);

$d=sqrt($base*$base + 2*$base*6371000);
$dprime=($horizon)-$d; 
$rdelta=sqrt(4*6371000*6371000+4*$dprime*$dprime);
$H=($rdelta-2*6371000)/2;

?> 
 <!-- FIN CALCUL PHP   ----------------- -->

L'Ajax (il doit y avoir des erreurs car j'ai essayé de bidouiller dedans!

<script type="text/javascript" src="http://googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#formcom").submit(function(){
	base = $(this).find("input[name=base]".val();
	horizon=$(this).find("input[name=horizon]".val();
	$.post("addCom.php",{base: base, horizon: horizon},function(data){
})
	return false;
});
});

</script>

Et le fichier addCom.php:

<?php
	extract($_POST);
?>

Voila où j'en suis!
Merci pour ton aide!

_laurent

Modérateur

7 Oct 2016 à 15:09

Pour empécher le refresh qui est un comportement du form par défaut il faut un preventDefault il me semble :

$("#formcom").submit(function(e){
        e.preventDefault();
[...]

Modifié par _laurent (07 Oct 2016 - 15:11)

JENCAL

7 Oct 2016 à 15:21

mais si tu fais un e.preventDefault(); tu ne verra pas le résultat ? Si ?

Le but est de faire un aller retour via du php, et d'afficher le résultat en html.

JENCAL

7 Oct 2016 à 15:25

Voici un exemple avec prevenDefault; mais pour moi, tu n'a même pas besoin d'un formulaire php pour faire de l'ajax (donc pas de prevenDefault) mais c'est une autre histoire Smiley cligne


$('#searchForm').submit(function(event) {

  // Stop la propagation par défaut
  event.preventDefault();

  // Récupération des valeurs
  var $form = $(this),
       term = $form.find( "input[name='s']" ).val(),
       url = $form.attr( "action" );

  // Envoie des données
  var posting = $.post( url, { s: term } );

  // Reception des données et affichage
  posting.done(function(data) {
    var content = $(data).find('#content');
    $('#result').empty().append(content);
  });

});

_laurent

Modérateur

7 Oct 2016 à 15:32

JENCAL a écrit :
mais si tu fais un e.preventDefault(); tu ne verra pas le résultat ? Si ?

Bah si ça empêche le traitement par défaut mais le code traite les donnée par lui même.

JENCAL a écrit :
Voici un exemple avec prevenDefault; mais pour moi, tu n'a même pas besoin d'un formulaire php pour faire de l'ajax (donc pas de prevenDefault) mais c'est une autre histoire

Toujours la même histoire : En théorie non mais sémantiquement c'est mieux que des inputs posés dans des divs...
Et on peut imaginer un fallback défaut via php si le Js est désactivé (je dis ca mais j'ai jamais testé)

~~supprimé~~

7 Oct 2016 à 18:10

Bonjour, tu va être déçu, mais je déteste les jquery ou autres usines a gaz !
Du reste j'ais vu que tu ne tenait pas a apprendre AJAX, forcément avec ces 3.000 lignes pour écrire toto a l'écran Smiley cligne

Alors moi je te proposes du vrais Ajax fait a la main et tu va voir c'est enfantin !!
En premier testes ceci !
http://www.fox-infographie.com/ww1.php

Si cela te plait en voici le code complet :
ww1.php qui est la page complète, ne t’affoles pas, le plus lourd c'est le CSS intégré pour faire beau !
Ce fichier appel ww2.php qui fait le calcul et le renvoie a la page qui donc n'a pas été rechargée !!!
C'est le mécanisme basique AJAX
Voici le ww2.php tu peux le copier/collé tel quel.


<?PHP
header('Content-Type: text/html; charset=utf-8'); 
$base = (isset($_POST['base'])) ? intval($_POST['base']) : 9999;
$horizon = (isset($_POST['horizon'])) ? intval($_POST['horizon']) : 9999;
if ($base!=9999 && $horizon!=9999) {
$d=sqrt($base*$base + 2*$base*6371000);
$dprime=($horizon)-$d; 
$rdelta=sqrt(4*6371000*6371000+4*$dprime*$dprime);
$H=($rdelta-2*6371000)/2;
echo "le resultt est ".$H."";
}
else { echo "Erreur de saisie";}
?>

Tu voit c'est enfantin alors ww1.php


<!DOCTYPE html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css"> 
html, body {  height: 100%; }
body { background-color : #557bac; font-family :Georgia, "Times New Roman", Times, serif; color :#eeeeee; font-size :18px; text-align :center; }
div.centre2blanc { top:0px;height :auto;width :auto; max-width :900px; margin :auto; text-align :center; } 
div.arrondi {width: auto;padding: 10px;background-color :#4F4F4F;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
p.Leleft {  text-align:left;font-family:"Times New Roman", Times, serif; color :#eeeeee; font-size :28px  ! important; }
p.Center {  text-align:center;font-family:"Times New Roman", Times, serif; color :#eeeeee; font-size :28px  ! important; }
img.bande { width :90%; } 
span.leTitre { font-size :3em; color :#eeeeee; } 
input    {font-family: Verdana; font-size: 16px; color : #000000; }
textarea {font-family: Verdana; font-size: 16px; color : #000000; }
input.Boutons_Saisie {background-color: #267474;}
form.blogsaisie {border-bottom:rgb(255,255,255) 1px solid;border-left:rgb(255,255,255) 1px solid;
padding-bottom:20px;padding-left:20px;padding-right:20px;border-top:rgb(255,255,255) 1px solid;border-right:rgb(255,255,255) 1px solid;
padding-top:20px;-webkit-box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;
box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;border-top-left-radius:20px;
border-top-right-radius:20px;border-bottom-right-radius:20px;border-bottom-left-radius:20px;width:auto;}
label.saisie_commentaire {text-align:right;width:100px;display:inline-block;font-size:14px;vertical-align:top;font-weight:bold;margin-right:20px;}
input.saisie_commentaire {border-bottom:rgb(170,170,170) 1px solid;border-left:rgb(170,170,170) 1px solid;padding-bottom:4px;
background-color:rgb(242,242,242);padding-left:4px;WIDTH:200px;padding-right:4px;VERTICAL-ALIGN:top;
border-top:rgb(170,170,170) 1px solid;border-right:rgb(170,170,170) 1px solid;
padding-top:4px;-webkit-box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;
box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;border-top-left-radius:10px;border-top-right-radius:10px;
border-bottom-right-radius:10px;border-bottom-left-radius:10px;}
textarea.saisie_commentaire {border-bottom:rgb(170,170,170) 1px solid;border-left:rgb(170,170,170) 1px solid;padding-bottom:4px;
background-color:rgb(242,242,242);padding-left:4px;WIDTH:400px;padding-right:4px;VERTICAL-ALIGN:top;HEIGHT:200px;
border-top:rgb(170,170,170) 1px solid;border-right:rgb(170,170,170) 1px solid;
padding-top:4px; -webkit-box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;
box-shadow:rgb(221, 221, 221) -1px -1px 0px, rgb(221, 221, 221) -1px -1px 0px inset;border-top-left-radius:10px;border-top-right-radius:10px;
border-bottom-right-radius:10px;border-bottom-left-radius:10px;}
input.lesubmite {background:#6F6F6F;align:center;}
</style>
</head><body>
<div class="centre2blanc" >
<br><br>
<img src="http://www.fox-infographie.com/logos/bande.jpg" alt="Christele Rubneau " class="bande">
<br><br>
<span class="leTitre">Ton calcul</span>
<br><br>
<!-- =========================tout ce qui est au dessus ne sert qu'a la belle presentation============== -->
<script type="text/javascript">
<!--
function maFonctionAjax(base, horizon)
{
  var MonAjax;
  if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
  else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    MonAjax = false;   }
  MonAjax.open('POST',"ww2.php",true);
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
         document.getElementById('LeRetour').innerHTML='<b>'+MonAjax.responseText+'</b>';  
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('base='+base+'&horizon='+horizon);                  
}
//-->
</script>

<br /><br /><br />
<form method="post" onsubmit="maFonctionAjax(this.base.value,this.horizon.value);return false" action="#">
<label class="calculs" for "base">Entrez l'altitude de votre point d'observation en mètres: </label> 
<input type="text" name="base" id="base">	<br />	<br />			
<label class="calculs" for "horizon">Entrez la distance de l'objet observé en <span class="souligner">mètres</span></label> 
<input type="text" name="horizon" id="horizon">	<br />	<br />	
<button class="envoyer" type="submit"> Envoyer</button>
</form>
<div id="LeRetour"></div>
</div>
</body></html>

Voila gardes cela car tout tes ajax peuvent partir de cette ossature Smiley confused

Modifié par Christele (08 Oct 2016 - 11:03)

Sujet clos

Questions générales et questions de débutants

Comment effectuer un calcul sans recharger la page?