I'm pulling my hair out because I have checked, checked and checked again and I cannot find the problem!!
Here's my code...
Code:
<script language="JavaScript">
function createInstance()
{
var req = null;
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e)
{
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e)
{
alert("XHR not created");
}
}
}
return req;
};
function delcat()
{
var req = createInstance();
var cat_id = document.delcatform.delcatid.value;
var data = "action=delete_cat&cat_id=" + cat_id;
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
}
else
{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", "ajax-test2.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(data);
alert(data);
};
</script>
<?php
include ('../dbconfig.php');
$result = mysql_query("SELECT * FROM category ORDER BY cat_id ASC");
while ($row = mysql_fetch_array($result))
{
echo $row['cat_name'];
echo '<form name="delcatform" method="POST" action="">
<input type="text" name="delcatid" value="'.$row['cat_id'].'" /><br />
<input type="submit" value="Delete Category" onClick="delcat()">
</form<br />';
}
?>
I am having a few problems with trying to get three different forms to work from the one page but I'll go into that after I have this one fixed!!...I have set it to alert the data so that I can see the information is being submitted properly. In the alert box it tells me "action=delete_cat&cat_id=undefined".
var cat_id = document.delcatform.delcatid.value;
alert(cat_id);
what does that say?
Eric
Hi Eric
It outputs "undefined". I have just thought that it has something to do with the whole form being within the while statement, which means it's echoing each form onto the page with the same name....I don't know how to get around that though.....any ideas?
Ok, I successfully managed to get it all working with 3 different forms in play too!!
My next issue though is with file uploading. I need to upload a csv doc and then php puts the data into the database. Can I use the same ajax code to pass on the file details to the php script?
I have tried with this but although the file is uploading, I don't think the variables are being sent correctly.
Here's my code...
Code:
<script>
var req = createInstance();
var action = frm.action.value;
if (frm.action.value == 'uploadcsv')
{
var uploaded = frm.uploaded.value;
var data = "action=" + action + "&uploaded=" + uploaded;
}
</script>
<form enctype="multipart/form-data" action="" method="POST">
Please choose a file: <input name="uploaded" type="file" /><br />
<input type="hidden" name="action" value="uploadcsv" />
<input type="submit" value="Upload CSV" onClick="uploadcsv(this.form)" />
</form>
I have used action as a variable on my other forms which submit data to the server and it hasn't failed so I don't think it is an issue.
Not following this part.... :/
OK, let's detail:
1.
Code:
<script>
//...
</script>
You miss the type. Should be:
Code:
<script type="text/javascript">
2.
Code:
<script type="text/javascript">
var action = frm.action.value;
//..
</script
- frm was not defined. What is frm?
- even it would have been defined elsewhere, it looks like it refers an HTML element, probably a form. But the HTML elements were not loaded yet the moment you wrote that code line. As a general rule you have to use functions and wrote the code lines inside the functions, not outside them.
- if frm refers a FORM element, action should be the HTML attribute action of the form. But the attribute action can not have again a value attribute of his own. It has simply a value, but not a property called value.
Could be, maybe:
Code:
function myFunction(){
var action=document.getElementById('frm').action;
}
Ok, sorry I must have caused confusion, I posted only a snippet of the entire code as I had already posted the entire code in the earlier post. I only posted the part that was relevant.
To save confusion, here is the entire code...
PHP Code:
<script type="text/javascript">
function createInstance()
{
var req = null;
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e)
{
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e)
{
alert("XHR not created");
}
}
}
return req;
};
function uploadcsv(frm)
{
var req = createInstance();
var action = frm.action.value;
if (frm.action.value == 'uploadcsv')
{
var uploaded = frm.uploaded.value;
var data = "action=" + action + "&uploaded=" + uploaded;
}
Oh, I see. If so, the same line brings you problems:
Code:
var action = frm.action.value;
The form has already a native HTML attribute called action, but it has also an element (an INPUT element) with the name="action", which will confuse the interpreter.
I have changed from action to task although I understand where you're coming from but action has never failed me before.
Anyway, with using task instead, it still doesn't work. I have included alert(data); which says action=uploadcsv&uploaded=C:\fakepath\prices.csv
I'd like to check the PHP side....
PHP Code:
if ($_POST['action'] == 'uploadcsv')
{
$target = "";
$target = $target . basename( $_FILES['uploaded']['name']) ;
$ok=1;
if(move_uploaded_file($_FILES['uploaded']['tmp_name'], $target))
{
echo "The file ". basename( $_FILES['uploadedfile']['name']). " has been uploaded";
}
else
{
echo "Sorry, there was a problem uploading your file.";
}
}
I know it isn't secure, right now I just want to get it working!! I don't think it's the PHP because the file upload works without the javascript if I just post straight to the php script. But I need it to work from the current page without a refresh.
Bookmarks