Ajax

Discussion in 'PHP' started by Tom12361, Sep 12, 2009.

  1. #1
    Hi,
    Here's my index.php file
    
    <? session_start(); ?>
    <html>
    <body>
    <script type="text/javascript">
    var xmlhttp
    
    function ajax()
    {
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Your browser does not support XMLHTTP!");
      return;
      }
      
    var url = "try.php";
    var name =  document.getElementById("name").value;
    var age =  document.getElementById("age").value;
    	xmlhttp.onreadystatechange=stateChanged;
    	xmlhttp.open("POST",url,"TRUE");
    	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    	xmlhttp.send("name="+name+"&age="+age);
    }
    
    function GetXmlHttpObject()
    {
    if (window.XMLHttpRequest)
      {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      return new XMLHttpRequest();
      }
    if (window.ActiveXObject)
      {
      // code for IE6, IE5
      return new ActiveXObject("Microsoft.XMLHTTP");
      }
    return null;
    }
    
    function stateChanged() {	
    	
    	if (xmlhttp.readyState == 4) {
    		
    	  document.getElementById("ats").innerHTML = xmlhttp.responseText;
    	  
    	}
    	
    }
    </script>
    <form>
    Your name: <input type="text" id="name"/><p>
    <b id="answer"></b>
    Age: <input type="text" id="age"/><p>
    <input type="button" value="Submit" onClick="ajax()">
    </form> 
    <span id="ats"></span>
    </body>
    </html>
    
    Code (markup):
    Here's my try.php file:
    
    <?php
    
    if(empty($_POST['name'])) { 
    
        echo "<script type='text/javascript'>alert('Write your name, please')</script>";
    	
    } else {
    	
    	echo "<p>Hi ".$_POST['name'].", you're ".$_POST['age']." years old";
    	
    }
    
    ?>
    
    
    Code (markup):
    Why, when I don't write my name and submit the form, it doesn't give me alert 'Write your name, please' ? Thank you very much for help.
     
    Tom12361, Sep 12, 2009 IP
  2. killaklown

    killaklown Well-Known Member

    Messages:
    2,666
    Likes Received:
    87
    Best Answers:
    0
    Trophy Points:
    165
    #2
    change the id="name" and id="age" to name="name" and name="age" respectfully in the index.php file. (or add name="name" and name="age" if your using the id for something else like javascript or css)
     
    killaklown, Sep 12, 2009 IP
  3. Tom12361

    Tom12361 Active Member

    Messages:
    442
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    There's no difference if I add these things or I don't...
     
    Tom12361, Sep 12, 2009 IP
  4. dweebsonduty

    dweebsonduty Active Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    71
    Digital Goods:
    1
    #4
    I would use jquery for ajax.

    <html>
    <head>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/JavaScript">
    function submitme()
    	{
    	 var myname = $("#name").val();
    	 var myage = $("#age").val();
    	 //alert (myname);
    	 if (myname == 0 || myage == 0)
    		{
    		alert("Fill In Name And Age");
    		}
    		else
    		{
    		$("#result").html("Hi "+ myname + " you are " + myage + " years old");
    		}
    	}
    </script>
    </head>
    <body>
    Name: <input type="text" id="name">
    Age:  <input type="text" id="age">
    <input type="submit" id="submitit" onclick="submitme()">
    <div id="result"></div>
    
    </body>
    </html>
    Code (markup):
    http://www.dweebsonduty.com/new/jquerydemo.php
     
    dweebsonduty, Sep 12, 2009 IP
  5. dweebsonduty

    dweebsonduty Active Member

    Messages:
    131
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    71
    Digital Goods:
    1
    #5
    Here is how to pass it to php via post

    <html>
    <head>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/JavaScript">
    function submitme()
    	{
    	 var myname = $("#name").val();
    	 var myage = $("#age").val();
    	 //alert (myname);
    	 if (myname == 0 || myage == 0)
    		{
    		alert("Fill In Name And Age");
    		}
    		else
    		{
    		$.post("name.php", 
    			 {
    			 'name' : myname,
    			 'age' : myage
    			 }, 
    			 function(data)
    			 {
    				$("#result").html(data);
    			 }
    			 );
    		}
    	}
    </script>
    </head>
    <body>
    Name: <input type="text" id="name">
    Age:  <input type="text" id="age">
    <input type="submit" id="submitit" onclick="submitme()">
    <div id="result"></div>
    
    </body>
    </html>
    Code (markup):

    PHP PAGE(name.php):
    <?php
    $name = $_POST["name"];
    $age = $_POST["age"];
    echo "Hi $name you are $age years old"
    ?>
    PHP:
     
    dweebsonduty, Sep 12, 2009 IP
  6. Tom12361

    Tom12361 Active Member

    Messages:
    442
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #6
    I want to do it by my own, not using libraries.
     
    Tom12361, Sep 13, 2009 IP
  7. matthewrobertbell

    matthewrobertbell Peon

    Messages:
    781
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If you want to do it to expand your knowledge, that's fine, but if you think it'll be faster / easier, I doubt it :)
     
    matthewrobertbell, Sep 13, 2009 IP
  8. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #8
    Probably has more to do with the fact you are trying to execute a javascript alert versus just echoing text.
    Here's a tutorial dealing with callbacks....
    http://www.hunlock.com/blogs/AJAX_for_n00bs

    And here's the code somewhat working(somewhat in that it triggers an alert for the data returned, would have to tweak it to accomplish your goal):

    try.php
    Edited this to return text and it worked fine.

    <?php
    
    if(empty($_POST['name'])) { 
    
        //echo "<script type='text/javascript'>alert('Write your name, please')</script>";
    	echo "Write your name, please";
    } else {
    	
    	echo "<p>Hi ".$_POST['name'].", you're ".$_POST['age']." years old";
    	
    }
    
    ?>
    Code (markup):
    index.php

    <? session_start(); ?>
    <html>
    <body>
    <script type="text/javascript">
    var xmlhttp
    
    function ajax()
    {
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null)
      {
      alert ("Your browser does not support XMLHTTP!");
      return;
      }
      
    var url = "try.php";
    var name =  document.getElementById("name").value;
    var age =  document.getElementById("age").value;
    	xmlhttp.onreadystatechange=stateChanged;
    	xmlhttp.open("POST",url,"TRUE");
    	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    	xmlhttp.send("name="+name+"&age="+age);
    }
    
    function GetXmlHttpObject()
    {
    if (window.XMLHttpRequest)
      {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      return new XMLHttpRequest();
      }
    if (window.ActiveXObject)
      {
      // code for IE6, IE5
      return new ActiveXObject("Microsoft.XMLHTTP");
      }
    return null;
    }
    
    function stateChanged() {	
    	
    	if (xmlhttp.readyState == 4) {
    		
    	  document.getElementById("ats").innerHTML = xmlhttp.responseText;
          callback(xmlhttp.responseText, xmlhttp.status);             // Pass the response to our processing function
    	  
    	}
    	
    }
    function callback(serverData, serverStatus) {
       alert(serverData);
    }
    
    
    
    </script>
    <form>
    Your name: <input type="text" id="name"/><p>
    <b id="answer"></b>
    Age: <input type="text" id="age"/><p>
    <input type="button" value="Submit" onClick="ajax()">
    </form> 
    <span id="ats"></span>
    </body>
    </html>
    Code (markup):
     
    shallowink, Sep 13, 2009 IP