Forum Moderators: open
- John
[edited by: JAB_Creations at 10:55 pm (utc) on Oct. 26, 2006]
[edited by: bedlam at 10:59 pm (utc) on Oct. 26, 2006]
- John
Well this should do it:
<html>
<head>
<script type="text/javascript">
function makeRequest(url) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
}else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
//change to something like: yourlayer.visibility = 'hidden';
} else {
alert('There was a problem with the request.');
}
}
};
http_request.open('GET', url, true);
http_request.send(null);
}
function sendform(el){
var sub = el.getElementsByTagName('input');
query = new Array();
for(i in sub){
if(sub[i].name){
query.push(sub[i].name + '=' + sub[i].value);
}
}
query = '?' + query.join('&');
makeRequest("http://www.domain.local/test.php" + query);
}
</script>
<head>
<body>
<form action="/test.php" method="get" onsubmit="sendform(this);return false;">
<input type="text" value="hello" name="text">
<input type="submit">
</form>
</body>
</html>
It seems to work but I just threw it together so we'll see.
Andrew
[edited by: Little_G at 11:32 pm (utc) on Oct. 26, 2006]
- John
- John
Ok, it worked for me in both Firefox and IE7, just a few points, the XMLHttpRequest object can only send requests to the same domain the script is hosted (a page hosted on 127.0.0.1 cannot send a request to google.com).
Did you get any error messsages?
Andrew
eregi match found
preg_match match found
I'm not sure what this means?
- John
The PHP script you are sending the response to is called 'test.php' I just looked at the website in your profile and it gave me the same response:
eregi match found
preg_match match found
makeRequest("http://www.domain.local/test.php" + query);
<form action="/test.php" method="get" onsubmit="sendform(this);return false;">
Andrew
- John
Have a copy of your form in a hidden frame, then use a little javascript to copy the content of the fields to the hidden frame and submit it - then hide your layer.
...would be to use a hidden frame.
*Falls over and dies* Only one thing I use frames for and that is the music player on my site and that barely passes the validator! (dam all the fools who gave frames a bad perception!) Anyway everything I do HAS to work in application/xhtml+xml so I suppose AJAX is really the only option.
Ok so basically the script I last tested looks to see if the submission will work but has nothing to do with stopping the page from redirecting? I'll have a little more time to mess with this come this weekend. Thanks for the help so far! :)
- John
Ok so basically the script I last tested looks to see if the submission will work but has nothing to do with stopping the page from redirecting? I'll have a little more time to mess with this come this weekend. Thanks for the help so far! :)
If your form's onsubmit event handler returns false, the form will not be submitted. However, you should not that if you do something like this:
<form action="/test.php" onsubmit="doAjaxSubmit();return false;">
If there is an error processing doAjaxSubmit(), then return false may never get executed, thus your form would submit. In other words, make sure whatever method you call can only fail if it's not able to perform the Ajax submit for some reason.
Anyway everything I do HAS to work in application/xhtml+xmlJust out of curiosity - what's wrong with frames?
Use the correct doctype (XHTML 1.0 Frameset) and it validates just fine.
- John
<form action="javascript: return false;"
However I get an error in Firefox's JavaScript console.
- John
Here's how I'd start.
1. Create your form so that the action will submit the values. This is your base case and will work regardless of whether JavaScript is available.
<form action="processingpage.php" id='yourFormId'>
...
</form>
2. Next, enhance it by adding some JavaScript to intercept the form submission.
In your <head>:
<!-- Include the Yahoo files for AJAX -->
<script type="text/javascript" src="yahoo.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="connection.js"></script>
<script type="text/javascript">
/**
* The form processing method. This will prevent the
* form from submitting and make an AJAX call to the
* server to process the form.
* @param {Event} e The submit event
*/
function ajaxForm(e)
{
// AJAX stuff will go here.
// ...
// Stop the submit event to prevent the form from processing
YAHOO.util.Event.stopEvent(e);
return false;
}
/**
* Initialize page behaviors. Normally, I would put
* this in it's own namespace, but for simplicity I'm
* just declaring this as a global function.
*/
function init()
{
// Attach listener to the form's sumit event
YAHOO.util.Event.on('yourFormId','submit',ajaxForm);
}
// Call the init method when the page loads
YAHOO.util.Event.on(window,'load',init);
</script>
Next, you'd need to add in the connection methods and callback methods. Your success callback method would hide the layer. Your failure callback method might alert the user that there was a problem communicating with the server.
Try starting with this, and take a look at the examples [developer.yahoo.com] in the YUI Connection Manager [developer.yahoo.com].
