Form Data

[bob_the _builder]

Hi,

 

I am using the ajax example from here

 

When I use the ajax request in a form no post data seems to be generated, have is missed something?

 

 

<form name="maincat" action="javascript: AjaxRequest(\'main\',\'./includes/gallery.php?action=addmaincat\')" method="post">
  <input name="maincat" type="hidden" value="maincat" />
  <input type="text" name="maincatname" /><br /><br />
  <input type="submit" value="Submit" name="Submit">
</form>

 

Thanks

[Ken2k7]

Can you show more code please? Also, since you're using AJAX, you don't need <form>.

[bob_the _builder]

Hi,

 

that is all the code relevant.. other than the ajax in the link from the first post..

 

That ajax code is only designed to work with get. I manage to get it to work but can only pass one variable across using get and OnSubmit:

 

<form name="addsubcat" method="get" action="javascript: AjaxRequest(\'main\',\'./includes/gallery.php?action=addsubcat\')" OnSubmit="javascript: AjaxRequest(\'main\',\'./includes/gallery.php?action=addsubcat&subcatname=\',\'subcatname\')">
    <b>Add Sub Category:</b><br /><br />
Select Main Category:<br /><br />
    <select id="maincatid" name="maincatid">
<option value="">Choose</option>';
$sql = mysql_query("SELECT * FROM gallerymaincat ORDER BY maincatname ASC");
while ($row = mysql_fetch_array($sql)) {
echo '<option value="'.$row['maincatid'].'">'.stripslashes($row['maincatname']).'</option>'; 
}
echo '</select><br /><br />
    Type category name:<br /><br />
    <input type="text" id="subcatname" name="subcatname" /><br /><br />
    <input type="submit" value="submit" name="submit">
</form>

 

Most of the variables are pased across the url, but have a few forms as well. Is there away to pass more variables with the form?

 

Thanks

[Zane]

show us the AjaxRequest() function

 

did you set the setRequestHeader function

for posting/forms you need it to be

"Content-type", "application/x-www-form-urlencoded"

[bob_the _builder]

function MyAjaxRequest(target_div,file,check_div)
{
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}



if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
MyHttpRequest = false;
}
}
}
else
{
MyHttpRequest = false;
}



if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php') // no query string, just calling a php file
{
  var query_string = '?rand=' + random;
}
else if(file_array[1] == 'htm' || file_array[1] == 'html') // calling a htm or html file
{
  var query_string = '';
}
else // we have presumable a php file with a query string attached
{
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else 
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}

[Zane]

put this before MyHttpRequest.send

MyHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 

[haku]

Can you show more code please? Also, since you're using AJAX, you don't need <form>.

 

Actually, good ajax programming means setting up everything so it will work without ajax, then applying the ajax overtop. This allows for graceful degradation, in the case that the user has javascript turned off, or that they are using an older browser. This means that the form tag is necessary so as to be able to provide that fallback functionality.

 

The form tag is also required for valid XHTML strict (and maybe transitional, though I don't use transitional so I'm not sure).

[bob_the _builder]

Hi,

 

Like so?

 

}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
MyHttpRequest.send(null);
}
else 
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}

 

[Zane]

Well, you put it above the send...so yeah

now you tell me...does it work

 

 

P.S. you should learn to indent your code....it helps A LOT

 

[bob_the _builder]

Hi,

 

Its the same result..

 

Only processes the one variable..

 

OnSubmit="javascript: AjaxRequest(\'main\',\'./includes/gallery.php?action=addsubcat&subcatname=\',\'subcatname\')"

 

No data is picked up for the other variable maincatid

 

Thanks

[Ken2k7]

I have a question: if you defined the AjaxRequest function to have 3 parameters, why does your form action have only two?