Submit and display a comment without refreshing the page

[red-x]

Hello, I'm really new to javascript/ajax and I have no idea what I'm doing. Like the tittle says I want to make a script that submits and displays comments without refreshing the page. I have tried alot of things but I have fail in all of them. So I'm here cause I really need help and I hear you guys are the best

 

So here's what I have so far. (I found it in google)

 

Making the request

 

Code:

 

var req;

function SendData(name,comment) {
    var url = "yourPage.php";
    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
    	try {
		req = new XMLHttpRequest();
        } catch(e) {
		req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		req = false;
        	}
	}
    }
if(req) {
                         var params = "name" + name + "&" + "comment=" + comment;
	req.open("POST", url, true);
	req.onreadystatechange = processReqChange;
	req.send(params);
}
             else{
               //you need to do a normal form submission
             }
}

 

So you would call that like

SendData("Eric","Foo Bar Candy");

 

//you need to do a normal form submission << I don't know how to do a "Normal form submission with ajax" 

 

 

Getting the request back you set the innerHTML with the responseText where you want it to show up.

 

Code:

function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
          document.getElementById("youroutputid").innerHTML = req.responseText;
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

 

Is that really all I need to display the new comment? where do I put the div or tables to make it look like the ones in my website?  ???

 

And php..

print "Your elephant's name is: " . $_POST['name'];

 

That's what I have but I'm not sure how to make it work. I know alot of php so connecting to the database and writing the data wont be a problem is just ajax. Can someone fix my code to make it work I know is almost complete but I have no idea what needs to be added. Thank you in advance for any help.

[red-x]

Anyone? 

[corbin]

Have you read many AJAX tutorials?

 

 

 

But really the only problem I see with your code is:

 

 

var params = "name" + name + "&" + "comment=" + comment;

 

 

name and comment need to be escape so they don't break compliance with the HTTP protocol.  You'll need to find a recreation of urlencode() in PHP.

[jrr]

This is the way I do it, hope it helps

This is to pull a sales table by month

 

function getSales(str){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
	alert ("Your browser does not support AJAX!");
		return;
} 

var m = document.getElementById("month").value;
var y = document.getElementById("year").value;
var url="getsales.php?m="+m+"&y="+y;

xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() { 
if (xmlHttp.readyState==4){
	document.getElementById("info").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject(){
var xmlHttp=null;
try	{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
  	}
catch (e){
	// Internet Explorer
try{
	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
  	catch (e){
	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
}

 

In your HTML you'd need something like <div id="info"></div>

 

The only issue I have is that the javascript inside getsales.php doesn't work anyone know what's could be the problem?

 

Thanks,

Julio