PDA

View Full Version : How to use a form & post method to update database?

Dan06
11-03-2008, 07:15 PM
I'm new to ajax and trying to put together code that will use a form and post method to update a database. In my first attempt, I declared and defined variables and had a submit button, when clicked, transfer the variable data - this worked just fine. However, when I tried to have the variables set via form input types, ie text box, radio buttons, etc. it does not work. First, the information typed/select in the form gets appended to the url - which defeats the post method purpose. Second, since the database is not updated, the php coded page seemingly is not receiving the variable information. Can anyone tell me where I've gone wrong? Thanks. Below is the code for the javascript/html components:


<html>
<head>
<title>Update Your Superhero</title>

<script language="javascript">
function sendData(){
var XMLHttpRequestObj = false;

var id;
var newname;
var newpower;
var newweapon;
var newtrans;

var data = "id=" + id + "&" + "newname=" + newname + "&" + "newpower=" + newpower + "&" + "newweapon=" + newweapon + "&" + "newtrans=" + newtrans;

if (window.XMLHttpRequest){
XMLHttpRequestObj = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObj = new ActiveXObject("Microsoft.XMLHttp");
}

if (XMLHttpRequestObj){
var url = "updatinghero.php";
XMLHttpRequest.open("POST", url, true);
XMLHttpRequest.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');

XMLHttpRequestObj.onreadystatechange = function(){
if(XMLHttpRequestObj.readystate == 4 && XMLHttpRequestObj.status == 200) {

}
}
XMLHttpRequestObj.send(data);
}
}
</script>
</head>

<body>
<form>
Select Id Number:
<input type="radio" id="id" name="id" value="0">0</input>
<input type="radio" id="id" name="id" value="1">1</input>
<input type="radio" id="id" name="id" value="2">2</input>
<input type="radio" id="id" name="id" value="3">3</input>
<input type="radio" id="id" name="id" value="4">4</input>
<input type="radio" id="id" name="id" value="5">5</input>
<input type="radio" id="id" name="id" value="6">6</input>
<br>
Change Name:<input type="text" id="newname" name="newname"></input><br>
Change Power:<input type="text" id="newname" name="newname"></input><br>
Change Weapon:<input type="text" id="newweapon" name="newweapon"></input><br>
Change Transportation:<input type="text" id="newtrans" name="newtrans"></input><br>
<input type="submit" id="submit" name="submit" value="Submit" onClick="sendData()"></input>
</form>
</body>
ohgod
11-03-2008, 07:54 PM
well, how are you planning on getting the variable data to the ajax request?

unless i'm missing something you're calling sendData() but aren't having it grab the values.


to get the form values...

var myinput = document.<formname>.<inputname>.value;
...replacing <formname> and <inputname> with the respective names.


also, and important to the above... you cannot have multiple elements with the same id!



so, if you're not sending the var data then the receiving page won't be able to get it
Dan06
11-03-2008, 09:39 PM
After making a few corrections and adjustments, I still can't get my code to work. Below are my errors and their corrections.

I was calling sendData(), but wasn't having it gather the input values. I corrected this with the following code:

var x = document.form['formname'].element['fieldname'].value;


I also mis-typed XMLHttpRequestObj as XMLHttpRequest when I was using the open method (line 19 in my code, in my previous posting).

My entire code with corrections is below. Any ideas where I might be still going wrong?
<html>
<head>
<title>Updating Heros with AJAX</title>
<script language="javascript">

function sendData(){
var XMLHttpRequestObj = false;

var id = document.form['heroUpdate'].element['id'].value;
var newname = document.form['heroUpdate'].element['newname'].value;
var newpower = document.form['heroUpdate'].element['newpower'].value;
var newweapon = document.form['heroUpdate'].element['newweapon'].value;
var newtrans = document.form['heroUpdate'].element['newtrans'].value;

var params = "id=" + id + "&" + "newname=" + newname + "&" + "newpower=" + newpower + "&"+ "newweapon=" + newweapon + "&" + "newtrans=" + newtrans;

if (window.XMLHttpRequest){
XMLHttpRequestObj = new XMLHttpRequest();
} else if (window.ActiveXObject){
XMLHttpRequestObj = new ActiveXObject("Microsoft.XMLHttp");
}

if (XMLHttpRequestObj){
var url = "updatinghero.php";
XMLHttpRequestObj.open("POST", url, true);
XMLHttpRequestObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

XMLHttpRequestObj.onreadystatechange = function(){
if (XMLHttpRequestObj.readystate == 4 && XMLHttpRequestObj.status == 200){

}
}
XMLHttpRequestObj.send(params);
}
}
</script>
</head>

<body>
<form name="heroUpdate" method="post">
Select Id Number:
<input type="radio" name="id" value="0">0</input>
<input type="radio" name="id" value="1">1</input>
<input type="radio" name="id" value="2">2</input>
<input type="radio" name="id" value="3">3</input>
<input type="radio" name="id" value="4">4</input>
<input type="radio" name="id" value="5">5</input>
<input type="radio" name="id" value="6">6</input>
<br>
Change Name:<input type="text" name="newname"/><br>
Change Power:<input type="text" name="newname"/><br>
Change Weapon:<input type="text" name="newweapon"/><br>
Change Transportation:<input type="text" name="newtrans"/><br>

<input type = "submit" name="submit" value="Submit" onClick="sendData()" />
</form>
</body>
</html>
Dan06
11-04-2008, 08:21 PM
I made 2 changes to make the code work:

Firstly, I changed the code for retrieving values from the form. The code I now have is:
Code: [Select]
var x = document.getElementById('formName').fieldName.value;

Secondly, in my form I was using radio buttons, to successfully retrieve the correct value I used the following.
Code: [Select]
interval = document.getElementById('formName').fieldName.length;
for (i=0; i<interval; i++){
if(document.getElementById('formName').fieldName[i].checked){
var id = document.getElementById('formName').fieldName[i].value;
}
}
With the aforementioned changes/corrections I got the code to work.