Using form and post method to update database

Dan06 · November 2, 2008

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>

Dan06 · November 3, 2008

I have made a few corrections and adjustments, the code still doesn't work, but it seems like it's getting closer to working. 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:

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>

xtopolis · November 4, 2008

Your post doesn't have a content length being sent:

XHRO.setRequestHeader("Content-length", params.length);

Here's one I use:

(xhro src): http://xtopolis.com/_common/ajax/ajax.js

function post(val)
{
  var XHRO = new newXHRO();//xmlhttprequest object
  
  var author = document.getElementById('name').value;//text field inputs
  var quote = document.getElementById('quote').value;//text field inputs
  var url = 'addquote.php';// url to post to

  var x = document.getElementById(val);
    x.innerHTML = '<img src="http://www.xtopolis.com/imgs/loading.gif" alt="Loading..." />';

  var params = "author="+escape(author)+"&quote="+escape(quote);//escape params

  XHRO.open('POST', url, true);

  XHRO.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  XHRO.setRequestHeader("Content-length", params.length);
  XHRO.setRequestHeader("Connection", "close");

  XHRO.onreadystatechange=function()
  {
    if(XHRO.readyState==4 && XHRO.status==200)
    {
      x.innerHTML = XHRO.responseText;
    }
  }
  
  XHRO.send(params);

  return false; // function is called using a "return ___" on a form
}

Dan06 · November 4, 2008

Thanks xtopolis for pointing out that I wasn't sending content length nor was I closing the connection, and how to correctly do so.

I made those adjustment in addition to 2 other important changes to make the code work:

Firstly, I changed the code for retrieving values from the form. The code I now have is:

 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.

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.

Sign In

Using form and post method to update database

Recommended Posts

Dan06

Link to comment

Share on other sites

Dan06

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

Dan06

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information