Jump to content

Archived

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

Zeradin

Changing forms over to ajax

Recommended Posts

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.

Share this post


Link to post
Share on other sites

You're missing an ending a "

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

What does the rest of your js script look like?

Share this post


Link to post
Share on other sites
<!-- 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>

Share this post


Link to post
Share on other sites

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;
}
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

XMLHttpRequestObject.open("GET", dataSource);

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

<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()); 

?>

Share this post


Link to post
Share on other sites

You might want to edit out your password ;)

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.