Ajout page l'une dans l'autre

**jeanmaki** · 16/03/2014, 20h53

Bonjour,

J'aimerai que la page essai.html s'affiche lorsque j'appuie sur le bouton "valider"

Voici mes pages :

index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/Services_JSON.php');
require_once('classes/CMySQL.php'); // including service class to work with database
require_once('classes/Ccalcul.php');
$sInput_calc = $GLOBALS['Ccalcul']->getInputForm_calc();
$sInput_infos = '';
$sChi1 = $GLOBALS['MySQL']->escape($_POST['n1']);
$sSi1 = $GLOBALS['MySQL']->escape($_POST['si1']);
$sChi2 = $GLOBALS['MySQL']->escape($_POST['n2']);
$sVotresultat_1 = $GLOBALS['MySQL']->escape($_POST['result']);
if ($sChi1 != "" && $sSi1 != "" && $sChi2 != "" && $sVotresultat_1 != ""){
    $Accept1 = $GLOBALS['Ccalcul']->calcul_box();
    $sInput_infos = $GLOBALS['Ccalcul']->getInputForm_infos();
}
$aKeys = array(
    '{input_calc}' => $sInput_calc,
    '{input_infos}' => $sInput_infos
);
echo strtr(file_get_contents('templates/main_page.html'), $aKeys);
?>

main_page.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html lang="en">
<head>
    <meta charset="iso-8859-1">
    <title>Calcul mental</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div>
        {input_calc}
    </div>
    <div>
    {input_infos}
    </div>
</body>
</html>

calcul.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html lang="en">
<head>
    <meta charset="iso-8859-1">
    <title>Calcul mental</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    <div class="row">
        <h1>Calcul Mental</h1>
        <div class="columns large-12">
            <h2>Quel est le résultat de ? </h2>
            <div class="container" id="con1">
    </div>
            <div class="columns large-6">
                <form class="mental_form2" method="post" id="mental_form2" action="index.php">
                    <div class="columns large-4">
                        <input class="champ" type="text" name="n1" id="n1">
                    </div>
                    <div class="columns large-4">
                        <input class="champ" type="text" name="si1" id="si1">
                    </div>
                    <div class="columns large-4">
                        <input class="champ" type="text" name="n2" id="n2">
                    </div>
                    <div class="columns large-4">
                        <label for="reponse">Votre réponse</label>
                    </div>
                    <div class="columns large-4">
                        <input type="text" name="result" id="result">
                    </div>
                    <div class="columns large-4">
                        <input type="submit"  id="validation" name="valider" value="Valider" class="button small right">
                    </div>
                </form>
            </div>
            <div class="columns large-6 res">
            </div>
        </div>
    </div>
    <span id="chronotime">0:00:00:00</span>
    <script src="js/api.js"></script>
</body>
</html>

essai.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<html lang="en">
<body>
    <div class="row">
        <h1>BIENVENUE</h1>
    </div>
</body>
</html>

Ccalcul.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
class Ccalcul {
    function Ccalcul() {}
    // Accept votresultat
    function calcul_box(){
        $sChi1 = $GLOBALS['MySQL']->escape($_POST['n1']);
        $sSi1 = $GLOBALS['MySQL']->escape($_POST['si1']);
        $sChi2 = $GLOBALS['MySQL']->escape($_POST['n2']);
        $sVotresultat_1 = $GLOBALS['MySQL']->escape($_POST['result']);
        if ($sChi1 != "" && $sSi1 != "" && $sChi2 != "" && $sVotresultat_1 != ""){
            $bRf = $GLOBALS['MySQL']->res("INSERT INTO `addition` SET
                `chiffre1` = '{$sChi1}',
                `signe1` = '{$sSi1}',
                `chiffre2` = '{$sChi2}',
                `votresultat` = '{$sVotresultat_1}'
            ");
        }
    }
    function getInputForm_calc(){
        return file_get_contents('templates/calcul.html');
    }
    function getInputForm_infos(){
        return file_get_contents('templates/essai.html');
    }
}
$GLOBALS['Ccalcul'] = new Ccalcul();

api.js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
    end = new Date()
    diff = end - start
    diff = new Date(diff)
    var msec = diff.getMilliseconds()
    var sec = diff.getSeconds()
    var min = diff.getMinutes()
    var hr = diff.getHours()-1
    if (min < 10){
        min = "0" + min
    }
    if (sec < 10){
        sec = "0" + sec
    }
    if(msec < 10){
        msec = "00" +msec
    }
    else if(msec < 100){
        msec = "0" +msec
    }
    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
    timerID = setTimeout("chrono()", 10)
}
 
function chronoStop(){
    clearTimeout(timerID)
}
function chronoContinue(){
    start = new Date()-diff
    start = new Date(start)
    chrono()
}
 
function chronoStart(){
    start = new Date()
    chrono()
}
 
function init(){
    var n1 = 0 + Math.floor(Math.random() * 10);
    var si1 = '+';
    var n2 = 0 + Math.floor(Math.random() * 10);
    $('#n1').val(n1);
    $('#si1').val(si1);
    $('#n2').val(n2);
}
function success(){
    $('.res').html('<div data-alert class="success alert-box">Bien joué ! <a href="#" class="close">&times;</a></div>');
}
function error(){
    $('.res').html('<div data-alert class="alert alert-box">Dommage ! même joueur joue encore ! <a href="#" class="close">&times;</a></div>'); 
}
 
function check(event) {
  var n1 = $('#n1').val();
  var si1 = $('#si1').val();
  var n2 = $('#n2').val();
  var r1 = parseInt(n1) + parseInt(n2);
  var r2 = $('#result').val();
  if (r1 == r2) {
  //la soumission se fera naturellement
    success();
 
  } else {
    // ici on empêche la soumission
    event.preventDefault();
    $('#result').val('');
    error();
  }
 
}
$(document).ready(function(){
  // on défini ce que l'on veut faire sur le submit
  $('.mental_form2').on('submit', function () {
 
                $.post('index.php', {
                          n1: $('.mental_form2 input[name=n1]').val(),
                          si1: $('.mental_form2 input[name=si1]').val(),
                          n2: $('.mental_form2 input[name=n2]').val(),
                          result: $('.mental_form2 input[name=result]').val()
                    });
            chronoContinue();
            $('#result').val('');
            init();
            return false;
 
          });
 
 
  // on défini l'action sur le bouton Valider
  $('#validation').click(function (event) {
    //   event.preventDefault();
    // on passe l'event pour la gestion dans check
    check(event);
    });
  init();
  chronoStart();
 
})

Merci de m'éclairer

**undead001** · 02/04/2014, 08h37

Bonjour,
En ajoutant un code comme celui-ci

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id='acacher' classe='cache'>
<?php
include("tonfichier.html")
?>
</div>
 
 
<script>
function valider()
{
$( "#acacher" ).removeClass( "cache" )
}
</script>

ça pourrai t'aller non? je ne comprends pas ton besoin.

Ajout page l'une dans l'autre

Langage PHP

Discussions similaires

Partager

Partager