Jump to content

Changing forms over to ajax


Zeradin

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.

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

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

Link to comment
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;
}
}

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

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

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

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

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

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

Link to comment
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()); 

?>

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.