Jump to content

Archived

This topic is now archived and is closed to further replies.

Zeradin

Changing forms over to ajax

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 
?>

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.