Changing forms over to ajax

[Zeradin]

thanks moderator

[ober]

Edited.

[Philip]

Okay, since I can't see anything wrong at the moment - let's see what PHP says when it returns. Your js should be now:

function ajaxFunction() {

var ajaxRequest; // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}

// Get our variables into nice variable names 
var title = document.getElementById("title").value;
var typ = document.getElementById("typ").value;
var story = document.getElementById("story").value;

var queryString = "?title=" + title + "&typ=" + typ + "&story=" + story;
alert(queryString); // See what the queryString says

// Start the Request process
ajaxRequest.onreadystatechange=function(){
	// This function will run whenever PHP says something back to our script.

	if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
		// If the ready state is final return, and the http status is OK

		alert(ajaxRequest.responseText);
		/* Of course you could change the above to show in a div on the page
			but for now, we'll just show it in an alert box */			
	}
}

// Open the page via get
ajaxRequest.open("GET", "php_ajax_input_script.php" + queryString, true);

// We don't need to send anything, since we're using GET and not POST
ajaxRequest.send(null);
}

 

I added in the onreadystatechange function - which will run whenever PHP returns a value

[Zeradin]

mysql_real_escape_strong

wow...

 

ok so now it almost works, but i don't know how to make it so that someone can put a huge block of text including html into the textarea, since it just throws literally what's there into the query string

[Philip]

Well, you could still use GET, but you're going to eventually be limited by the size of the text.

 

Or we can switch to POST, which would allow a lot more text sent.

 

Using post is just as easy as GET, but allows for more flexibility.

 

Your js code:

function ajaxFunction() {

var ajaxRequest; // The variable that makes Ajax possible!

try{
	// Opera 8.0+, Firefox, Safari
	ajaxRequest = new XMLHttpRequest();
} catch (e){
	// Internet Explorer Browsers
	try{
		ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try{
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (e){
			// Something went wrong
			alert("Your browser broke!");
			return false;
		}
	}
}

// Get our variables into nice variable names 
var title = document.getElementById("title").value;
var typ = document.getElementById("typ").value;
var story = document.getElementById("story").value;
var queryString = "title=" + title + "&typ=" + typ + "&story=" + story;


// Start the Request process
ajaxRequest.onreadystatechange=function(){
	// This function will run whenever PHP says something back to our script.

	if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
		// If the ready state is final return, and the http status is OK

		alert(ajaxRequest.responseText);
		/* Of course you could change the above to show in a div on the page
			but for now, we'll just show it in an alert box */			
	}
}

/* THIS IS WHAT WILL CHANGE FROM GET -> POST */
// Open the page, ready it for posting.
ajaxRequest.open("POST", "php_ajax_input_script.php", true);
// Lets tell the header what we are
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Now let's send the parameters.
ajaxRequest.send(queryString);
}

 

--

In your PHP script (<? and ?> just for highlighting), change:

<?php
$title = $_GET['title'];
$newstype = $_GET['typ'];
$news = $_GET['story'];
$poster = "whatever";
?>

 

<?php
$title = $_POST['title'];
$newstype = $_POST['typ'];
$news = $_POST['story'];
$poster = "whatever";
?>

 

 

Oh and the typos:

<?php
$title = mysql_real_escape_string($title);
$news = mysql_real_escape_strong($title);
?>

to:

<?php
$title = mysql_real_escape_string($title);
$news = mysql_real_escape_string($news);
// notice the $news instead of $title in the second string 
?>

 

 

[Zeradin]

you are so awesome i can barely stand it. thanks so much.

[Zeradin]

ok sorry for posting so much code. i'm trying to change all my forms over now and i basically just changed one form over and now nothing happens when i click

<input class="button" onClick="albumrevFunction();" value="Enter" type="button">

 

i added this function, which is basically the same thing as the old one:

function albumrevFunction() {
   
   var ajaxRequest; // The variable that makes Ajax possible!

   try{
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e){
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
   
   // Get our variables into nice variable names 
   var title = document.getElementById("title").value;
   var subtitle = document.getElementById("subtitle").value;
   var alldate = document.getElementById("alldate").value;
   var rcomp = document.getElementById("rdate").value;
   var add1 = document.getElementById("add1").value;
   var add2 = document.getElementById("add2").value;
   var text1 = document.getElementById("text1").value;
   var text2 = document.getElementById("text2").value;
   var info = document.getElementById("info").value;
   var rating = document.getElementById("rating").value;
   var queryString = "title=" + title + "&subtitle=" + subtitle + "&alldate=" + alldate + "&rcomp=" + rcomp + "&add1=" + add1 + "&add2=" + add2 + "&text1=" + text1 + "&text2=" + text2 + "&info=" + info + "&rating=" + rating;
   
   
   // Start the Request process
   ajaxRequest.onreadystatechange=function(){
      // This function will run whenever PHP says something back to our script.
      
      if (ajaxRequest.readyState==4 && ajaxRequest.status==200){
         // If the ready state is final return, and the http status is OK
         
         alert('It worked, trust me. I just need to figure out how to change the page... for now I think it\'s more important that I get everything working.');
         /* Of course you could change the above to show in a div on the page
            but for now, we'll just show it in an alert box */         
      }
   }
   
   /* THIS IS WHAT WILL CHANGE FROM GET -> POST */
   // Open the page, ready it for posting.
   ajaxRequest.open("POST", "albumscript.php", true);
   // Lets tell the header what we are
   ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   // Now let's send the parameters.
   ajaxRequest.send(queryString);
}

 

for the albumscript.php i just copied the last newsscript except with the different variables. whyyy