Changing forms over to ajax

Zeradin · December 27, 2008

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 · December 27, 2008

You're missing an ending a "

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

Zeradin · December 29, 2008

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 · December 29, 2008

What does the rest of your js script look like?

Zeradin · December 30, 2008

<!-- 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 · December 30, 2008

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 · December 31, 2008

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 · December 31, 2008

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 · January 2, 2009

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 · January 2, 2009

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

Philip · January 2, 2009

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

XMLHttpRequestObject.open("GET", dataSource);

Zeradin · January 2, 2009

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 · January 2, 2009

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 · January 4, 2009

Please help.

Philip · January 5, 2009

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 · January 8, 2009

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 · January 8, 2009

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 · January 8, 2009

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 · January 8, 2009

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

Philip · January 8, 2009

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

Zeradin · January 8, 2009

wait i got the alert, but no insert

Zeradin · January 8, 2009

<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 · January 8, 2009

caught that query error, didn't change a thing

Philip · January 8, 2009

You might want to edit out your password

Zeradin · January 8, 2009

can't! shit!

Sign In

Changing forms over to ajax

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information