Changing forms over to ajax

[Zeradin]

I have an area where people submit things. It used to be iframes that would load a form and submit it. It worked great, it was just fugly and annoying. I want to change over to ajax so i made the iframes divs and changed it over that way. It loads all the forms great but when i submit nothing happens.

 

Can someone tell me why this:

<input type="submit" value="Submit" name="albumsubmit" class="btn"  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" onclick = "getData('upalbum.php', 'formload')/>

doesn't submit the data?

 

It should be handled by the

if(!isset($_POST['albumsubmit'])) { }
else {}

right? I'm new to ajax obviously.

 

Thanks guys.

[Philip]

You're missing an ending a "

 

onclick = "getData('upalbum.php', 'formload');"

[Zeradin]

You're missing an ending a "

 

onclick = "getData('upalbum.php', 'formload');"

 

so i did.

 

i changed it to

<input type="submit" value="Submit" name="albumsubmit" class="btn"  onmouseover="this.className='btn btnhov'" onmouseout="this.className='btn'" onclick = "getData('upalbum.php', 'formload');" />

 

it still just loads the default value for the div and doesn't submit anything.

[Philip]

What does the rest of your js script look like?

[Zeradin]

<!-- Standard AJAX code -->		
		var XMLHttpRequestObject = false;

		if (window.XMLHttpRequest) {
			XMLHttpRequestObject = new XMLHttpRequest();
			}
			else
			if (window.ActiveXObject){
			XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
			}
<!-- END Standard AJAX -->
			function getData(dataSource, divID) {
				if(XMLHttpRequestObject){
				var obj = document.getElementById(divID);
				XMLHttpRequestObject.open("GET", dataSource);

				XMLHttpRequestObject.onreadystatechange = function()
				{
					if(XMLHttpRequestObject.readyState == 1 && XMLHttpRequestObject.status == 200) {
					obj.innerHTML = '<img src="../images/loading.gif" />';
					}
					if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
					obj.innerHTML = XMLHttpRequestObject.responseText;
					}
				}

			XMLHttpRequestObject.send(null);
			}
		}

	</script>

[Philip]

So, the backend side of it - does it require any inputs? Right now, dataSource is just upalbum.php - do you need to post any variables to get a return?

 

Also, try putting in an alert to see if it is even sending the data

XMLHttpRequestObject.onreadystatechange = function()
{
        alert("State: "+XMLHttpRequestObject.readyState);
if(XMLHttpRequestObject.readyState == 1 && XMLHttpRequestObject.status == 200) {
	obj.innerHTML = '<img src="../images/loading.gif" />';
}
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
	obj.innerHTML = XMLHttpRequestObject.responseText;
}
}

[Zeradin]

Yeah there are inputs. I'm wondering if the problem is that there is no submit value when I do the submit button like that? Or maybe I need to make TWO ajax variables. I mean it doesn't go back to the page as if this was true:

if(!isset($_POST['albumsubmit'])) { ?>

 

the inputs are like

 

			    <form method="POST" action="<?php $_SERVER['PHP_SELF']?>">
				<strong>Title</strong><br />
				<input type="text" name="title" size="20"><br />

 

with the other side of it being like

else {

hypsqlconnect();

$title = mysql_real_escape_string($_POST['title']);

if isset($_POST['albumsubmit'])

maybe it's not getting posted. i have no idea why this stuff isn't working.

[Philip]

Okay I see your problem now.

 

You're pushing GET variables (the ones in the URL: somepage.php?var1=value) and not POST variables. You can do POST in ajax, its just a little harder.

http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

 

[Zeradin]

Okay I see your problem now.

 

You're pushing GET variables (the ones in the URL: somepage.php?var1=value) and not POST variables. You can do POST in ajax, its just a little harder.

http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

 

 

I don't understand what you mean I'm pushing GET variables? Why did it work when it wasn't ajax if they're different types of variables? How can I change them over to GET ones or something to get it to work? Thanks.

[Zeradin]

Wait, I'm not using get variables? there's nothing in the url like that?

[Philip]

$_POST['title'] vs $_GET['title'] are 2 different things, considering your ajax code is using GET:

XMLHttpRequestObject.open("GET", dataSource);

 

 

[Zeradin]

Ok so can I just change

$title = mysql_real_escape_string($_POST['title']);

to $_GET['title']

and then change the form method to SEND?

sorry, i never got this part of learning php apparently

[Zeradin]

I mean I was just thinking about it. How do normal ajax forms work? because it doesn't seem like it works like this. the usually have the state where they're waiting and show the waiting symbol. then they say submitted! this seems like it's not the same method and is probably why i'm messing it up.

[Zeradin]

Please help.

[Philip]

I'd suggest reading the working example in this forum

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

 

There are 2 different ways to send values from a form to a script.

 

First is with GET, where the variables are in the url. Downfalls of using this are limited sending space, each browser limits how long the url can be. Nonetheless, an example: foo.com/bar.php?variable=value

Second is with POST, where the variables are sent in the HTTP headers. I believe the max you can send is 2MB of data. (correct me if I'm wrong somebody.)

 

Whichever way you decide, make sure both ends match.

[Zeradin]

Thanks. I read that over, but it still has no submit->post/get data, so i can't really use it for forms? at least as far as my knowledge is telling me.

[Zeradin]

ok i am so annoyed right now. I found a really simple example and it makes sense and i'm trying to change just one of my forms over to it, and then i can figure out how to apply it to all my forms. it has this:

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){

[all that ajax request stuff removed for brevity]

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;
ajaxRequest.open("GET", "php_ajax_input_script.php" + queryString, true);
ajaxRequest.send(null);
alert(queryString);
}

//-->
</script>
<title>php + Ajax + SQL Tutorial</title></head>
<body>
<form>
Title
<input id="titles" value="" name="title" size="30" style="color:#990000; font-weight:bold"><br />
				<select id="typ"  size="1"  name="newstype">
					<option>External</option>
					<option>Internal</option>
				</select><br />
				<textarea id="story" rows="30" name="message" cols="80"></textarea><br />
<input class="button" onClick="ajaxFunction();" value="Enter" type="button">
</form>
</body>

then the file that it calls and sends all of those values to:

// Retrieve data from Query String
$title = $_GET['title'];
$newstype = $_GET['typ'];
$news = $_GET['story'];
$poster = "whatever";

// Escape User Input to help prevent SQL Injection
$title = mysql_real_escape_string($title);
$news = mysql_real_escape_strong($title);


// create query
$newsquery = "INSERT INTO news (title, typ, news, poster) VALUES ('$title', '$newstype', '$news', '$poster')";

 

has that in it and when i click on the enter button nothing at all happens

[Philip]

Your input id doesnt match what Javascript is looking for.

var title = document.getElementById('title').value;

Should be:

var title = document.getElementById('titles').value;

 

 

Also, move the

alert(queryString);

above the line

ajaxRequest.open("GET", "php_ajax_input_script.php" + queryString, true);

 

Now after you run it - check in the database to see if anything is in there. There should be something.

[Zeradin]

ok i changed those things, ran it, got no alert go no sql insertion

[Philip]

Can you post the whole request code? There might be something up with it

[Zeradin]

wait i got the alert, but no insert

[Zeradin]

<html>
<head>

<script language="javascript" type="text/javascript">
<!--
//Browser Support 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;
}
}
}

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);
ajaxRequest.open("GET", "php_ajax_input_script.php" + queryString, true);
ajaxRequest.send(null);
alert(queryString);
}

//-->
</script>
<title>php + Ajax + SQL Tutorial</title></head>
<body>
<form>
Title
<input id="title" value="" name="title" size="30" style="color:#990000; font-weight:bold"><br />
				<select id="typ"  size="1"  name="newstype">
					<option>External</option>
					<option>Internal</option>
				</select><br />
				<textarea id="story" rows="30" name="message" cols="80"></textarea><br />
<input class="button" onClick="ajaxFunction();" value="Enter" type="button">
</form>
</body>

</html>

 

and

 

<?php
// set database server access variables:
$host = "localhost";
$user = "**********";
$pass = "***********";
$db = "*********";

// open connection
$connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");
// select database
mysql_select_db($db) or die ("Unable to select database!");

// Retrieve data from Query String
$title = $_GET['title'];
$newstype = $_GET['typ'];
$news = $_GET['story'];
$poster = "whatever";

// Escape User Input to help prevent SQL Injection
$title = mysql_real_escape_string($title);
$news = mysql_real_escape_strong($title);


// create query
$newsquery = "INSERT INTO news (title, typ, news, poster) VALUES ('$title', '$newstype', '$news', '$poster')";
// execute query
$newsresult = mysql_query($newsquery) or die ("Error in query: $query. ".mysql_error());

//add story to xml feed
// set name of XML file
$file = "../general/hyprss.xml";
// load file
$xml = simplexml_load_file($file) or die ("Unable to load XML file!");
//write data
// modify XML data
$xml->channel->item->title = $title; 
$xml->channel->item->link = "http://thehyp.net";
$xml->channel->item->guid = "http://thehyp.net";
$xml->channel->item->pubDate = date('l jS \of F Y h:i:s A');
$xml->channel->item->description = substr($news, 0, 200)."\n";

// write new data to file
file_put_contents($file, $xml->asXML()); 

?>

[Zeradin]

caught that query error, didn't change a thing

[Philip]

You might want to edit out your password

[Zeradin]

can't! shit!