Load content within div without refreshing main page

php jquery iframe dynamic embed

20,215

You can achieve this by having three divs with say ids as '#home-page', '#result-page' and 'link-page'. Keep the last two pages hidden. Then make an ajax call on form submit and display the response to the #result-page div and hide the form. After few secs, you show the #link-page and hide the #result-page.

Here is a jsfiddle for you. I hope this is what you want.

HTML

<form method="post" action="results.php"> 
    <h2>Form Page</h2>
    Your form elements here
</form>
<div id="result-page" style="display:none">
    <h2>Result Page:</h2>
    Result of the ajax call here
</div>
<div id="link-page" style="display: none;">
    <h2>Link page:</h2>
    Link page content here
</div>

On load of page, attach an event for form submit where in you make an ajax call and append the response into the result-page div

JS

$("form[ajax=true]").submit(function (e) {
$.ajax({
        url: 'results.php',
        type: 'POST',
        success: function (data) {
            $("#result-page").append(data).show(); // appending data response to result-page div
            $('form').hide();  //hiding form
            setTimeout(function () {
                $("#result-page").hide(); 
                $("#link-page").show();
            }, 5000);
        }
    });
});

20,215

Author by

Benjamin

Updated on August 13, 2020

Comments

Benjamin over 3 years

Hello i have a 3 pages i want to run within one main page (index.html) sort of "app style"

the pages are: form.html, the form results.php and a link.html page

i want it to load like this demo: removed (site down) but not using embed or iframe.

Once the form on form.html is submitted it goes to the results.php page and that page pretends to load and then after 5 seconds or so it goes to the link.html page And i want this all to happen without reloading index.html

I have looked at dynamic pages & trying to hide/show things using jQuery But i can't seem to get anything to work with the timer and the form submit making things hard for me.

Any help would be Unbelievably Appreciated I've been messing around with this for awhile and i only really know html and css and have only played around with JavaScript and php a bit.

I would be great to see some-working code with a form and timer using the script below. but even getting pointed in the right direction could be helpful. thanks & sorry if this question not appropriate for this site.

My code: index.html

<html>
   <head>
      <title>index main page</title>
      <style>
         /** http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}
         body{
             background-image:url(http://i.imgur.com/z69OCGn.png);
             background-repeat:repeat; 
             height:100%;
             width:100%;
             position:fixed;
         }
         #wrap{
             background-image:url(http://i.imgur.com/Xuyys5X.png);
             background-repeat:repeat; 
             width:800px;
             height:100%;
         }
         #header{
             width:600px;
             height:100px;
         }
         #load{
             background-color:#fff;
             margin-top:100px;
             width:600px;
             height:300px;
         }
         .centre{
             margin-left:auto;
             margin-right:auto;
         }
      </style>
   </head>
   <body>
      <div id="wrap" class="centre">
         <div id="header">
            </br></br></br></br>
            <p align="center" style="color:#fff;"> The Page doesn't refresh or reload </p>
         </div>
         <div id="load" style=""  class="centre">
            <embed src="form.html" width="600px" height="300px" style="border:1px solid">
         </div>
      </div>
   </body>
</html>

form.html

<html>
   <head>
      <title>Page 1</title>
   </head>
   <body>
      <div id="div3">
         <div id="form">
            <form action="results.php" method="post" >
               <input id="field" name="field" required>
               <input id="submit" name="submit" type="submit" value="submit">
            </form>
         </div>
      </div>
   </body>
</html>

result.php

<html>
   <head>
      <title>Page 2</title>
      <script type="text/javascript">
         function countdown() {
             var i = document.getElementById('counter');
             if (parseInt(i.innerHTML)>=100) {
                 location.href = 'link.html';
                 clearInterval(t);
                 exit;
             }
             i.innerHTML = parseInt(i.innerHTML)+1;
         }
         var t = setInterval(function(){ countdown(); },100);
      </script>
   </head>
   <body>
      <div id="div1">
         <p>this will be displayed on the results page. its not, just for reference. </p>
         <p>Submit: </p>
         <font color="#33CC00"><?php echo $_POST["field"]; ?> </font>
         <div style="margin-left:55px; margin-top:20px;">
            <p>Page change in: <font color="#33CC00"><span id="counter"> 10</span></font></p>
         </div>
         <img src="http://i.imgur.com/LLzENHe.gif">
      </div>
   </body>
</html>

link.html

<html>
   <head>
      <title>Page 3</title>
   </head>
   <body>
      <div id="div3">
         <p>this is a link <a href="#">Link</a></p>
      </div>
   </body>
</html>