#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0

    Load file in loaded page


    Hi,

    Something does not want to work with my script.
    I have 1 html page and 1 html file and 1 php file.

    On the html page, I click a link to load the htm file, within this htm file I want to load the php file in the same table td item using submit button, but it doesn't work. What am I doing wrong?

    index.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    var file;
    function loadXMLDoc(file)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myTD").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET",file,true);
    xmlhttp.send();
    }
    </script>
    </head>
    
    <body>
    
    <table>
     <tr>
      <td><button type="button" onclick="loadXMLDoc('read.htm')">Read</button></td>
      <td id="myTD">Read your name using PHP!</td>
     </tr>
    </table>
    
    </body>
    </html>
    read.htm
    Code:
    <form action="" method="post">
    Name: <input type="text" name="fname">
    <input type="submit" value="Read" onclick="loadXMLDoc('welcome.php')">
    </form>
    welcome.php
    PHP Code:
    Welcome <?php echo $_POST["fname"]; ?>!<br>

    Thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    I also tried:
    Code:
    xmlhttp.open("POST",file,true);
    Still not working. file.htm loads in table td element, but welcome.php doesn't!
  4. #3
  5. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    welcome.php does actually load, you just can't see it because you're submitting the form and reloading index.html.

    There are three ways you can prevent the form from being submitted:
    1) return false from the onclick event handler attached to the submit button
    2) return false from an onsubmit event handler attached to the form element
    3) don't use a submit button element for your button

    If you do one of those, then when you click on the second Read button you'll see the text "Welcome !".

    You don't actually see the name you entered though, because an AJAX request will not automatically submit values from your form. You need to manually pass the values you want to submit into the xhr. Here's a simple tutorial that shows that: http://www.openjs.com/articles/ajax_...using_post.php
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    Thanks E-Oreo,
    In that case I have to write a second Ajax function in the head of the page. I'll try that. Thanks.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    Originally Posted by E-Oreo
    1) return false from the onclick event handler attached to the submit button
    3) don't use a submit button element for your button
    I did this and still I don't get the "welcome.php" file ('welcome' without name).


    Code:
    <form action="" method="post" onsubmit="return false;">
    Name: <input type="text" name="fname">
    <input type="button" value="Read"
       onclick="loadXMLDoc('welcome.php'); return false;">
    </form>
    Last edited by chofift; January 14th, 2013 at 08:53 AM. Reason: added return false to onsubmit element
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2009
    Location
    Jakarta, Indonesia.
    Posts
    197
    Rep Power
    31
    Don't you think that someone needs to click on the generated form first,
    so that the 2nd loadXMLDoc() could call welcome.php?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    Originally Posted by hdewantara
    Don't you think that someone needs to click on the generated form first,
    so that the 2nd loadXMLDoc() could call welcome.php?
    But that is what happens there!
  14. #8
  15. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    Have you implemented any code to address this part:

    If you do one of those, then when you click on the second Read button you'll see the text "Welcome !".

    You don't actually see the name you entered though, because an AJAX request will not automatically submit values from your form. You need to manually pass the values you want to submit into the xhr. Here's a simple tutorial that shows that: http://www.openjs.com/articles/ajax..._using_post.php
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    Originally Posted by E-Oreo
    Have you implemented any code to address this part:
    Yes, I did and now it works (but I do not understand why. I did lots of trial and error attempts).

    1- There is one part of the PHP code which isn't working.
    PHP Code:
    if (isset($_POST['fname'])) 
    2- I don't return falsee from the onclick event handler attached to the submit button; only on onsubmit form's element.
    Code:
    onsubmit="return false;"
    but if I don't do this, it works too.


    Source
    index page
    read file
    welcome file

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <script>
                var file;
                var m; //methode: get 1 or post 2
                function Foo(file, m)
                // function loadXMLDoc(file, m)
                {
                    var xmlhttp;
                    if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                    }
                    else
                    {// code for IE6, IE5
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function()
                    {
                        if (xmlhttp.readyState==4 && xmlhttp.status==200)
                        {
                            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                        }
                    }
                    
                    if (m==1){
                        xmlhttp.open("GET",file,true);
                        xmlhttp.send(); 
                    }
                    if (m==2){
                        
                        xmlhttp.open("POST",file,true);
                        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                        xmlhttp.send("fname="+document.myForm.fname.value);
                    }
                       
                    
                    
                    
                }
            </script>
        </head>
    
        <body>
    
            <table>
                <tr>
                    <td><button type="button" onclick="Foo('read.htm',1)">Read</button></td>
                    <td id="myDiv">Read your name using PHP!</td>
                </tr>
    
            </table>
    
        </body>
    </html>

    Code:
     <form name="myForm" id="myForm" action="welcome.php" method="post">
    Name: <input type="text" name="fname">
    <input type="button" value="Read" 
       onclick="Foo('welcome.php',2);">
    </form>
    PHP Code:
     <?php 
     
    if (isset($_POST['fname'])){ // doesnt do; welcome always echos.
         
    $fname $_POST['fname'];
         echo 
    "Welcome $fname";
     }
    ?>
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    28
    Rep Power
    0
    Code:
    xmlhttp.send("fname="+document.myForm.fname.value);
    makes
    PHP Code:
    isset($_POST['fname']) 
    true; So, I have to do
    PHP Code:
    if ($_POST['fname'] != ""
    !

IMN logo majestic logo threadwatch logo seochat tools logo