Jump to content

Changing forms over to ajax


Zeradin

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

Link to comment
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 
?>

 

 

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.