Help with getting information from text fields that are generated with ajax.

[migroo]

Okay when you declare a function it looks like this right:

function updateObit()

Now if you want you can add a parameter:

function updateObit(ttx)

So then you would create an instance to use your function such as a button:

<input type="button" value="Send Revision" onclick="updateObit('3')" />

Now when a person clicks on the button it will call the function and tell it that ttx = 3 right?okay does anyone see anything wrong whit this bit of code:

function updateObit(ttx){ var ajaxRequest;  // The variable that makes Ajax possible!	 try{   // Opera 8.0+, Firefox, Safari   ajaxRequest = new XMLHttpRequest(); }catch (e){   // Internet Explorer Browsers   try{	  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");   }catch (e) {	  try{		 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");	  }catch (e){		 // Something went wrong		 alert("Your browser broke!");		 return false;	  }   } } // Create a function that will receive data  // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function(){   if(ajaxRequest.readyState == 4){	  var ajaxDisplay = document.getElementById(ajaxDiv);	  ajaxDisplay.innerHTML = ajaxRequest.responseText;   } } // Now get the value from user and pass it to // server script. var update = "yes"; var obits = "obits"; var people = "people"; var id = document.getElementById('obid' + ttx).value; var fname = document.getElementById('obfn' + ttx).value; var lname = document.getElementById('obln' + ttx).value; var age = document.getElementById('obage' + ttx).value; var dob = document.getElementById('obdob' + ttx).value; var dod = document.getElementById('obdod' + ttx).value; var about = document.getElementById('obab' + ttx).value;  var queryString = "?update=" + update; queryString +=  "&id=" + id; queryString +=  "&fname=" + fname; queryString +=  "&lname=" + lname; queryString +=  "&age=" + age; queryString +=  "&dob=" + dob; queryString +=  "&dod=" + dod; queryString +=  "&about=" + about; queryString +=  "&db=" + obits; queryString +=  "&dt=" + people; ajaxRequest.open("GET", "edit_old_post-ajax.php" + 							  queryString, true); ajaxRequest.send(null); }

It won't do anything...There are some text fields on the page with the id of : obfn3, obln3, obage3, obdob3, obdod3, and obab3. That are inside a <div> tage:

<div id="ajaxDiv">ID: <input type="text" readonly="readonly" value="36" id="obid3" />  <br />First Name: <input type="text" value="James" id="obfn3" /> <br />  Last Name: <input type="text" value="Haring" id="obln3" /> <br /> Age: <input type="text" value="36" id="obage3"/> <br /> Date of Birth: <input type="text" value="1900" id="obdob3" />  <br /> Date of Death: <input type="text" value="1936" id="obdod3" /> <br /> <br /> </div><div style="float:left;"><textarea id="obab3" name="h1" rows="15" cols="85">Some information about this guy.</textarea> </div><input type="button" value="Send Revision" onclick="updateObit('3')" /></div>

So when I click the button on the page this code should send the value of each of the above fields to edit_old_post-ajax.php right?Thanks I hope some one knows what I am doing wrong because I am lost...

[dsonesuk]

The id reference is being treated as a reference to a variable, instead of name of idvar ajaxDisplay = document.getElementById(ajaxDiv);should bevar ajaxDisplay = document.getElementById("ajaxDiv");

[migroo]

I fixed that and I am still having trouble.This works:

function write1(y){ var ajaxRequest;  // The variable that makes Ajax possible!	 try{   // Opera 8.0+, Firefox, Safari   ajaxRequest = new XMLHttpRequest(); }catch (e){   // Internet Explorer Browsers   try{	  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");   }catch (e) {	  try{		 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");	  }catch (e){		 // Something went wrong		 alert("Your browser broke!");		 return false;	  }   } } // Create a function that will receive data  // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function(){   if(ajaxRequest.readyState == 4){	  var ajaxDisplay = document.getElementById('ajaxDiv');	  ajaxDisplay.innerHTML = ajaxRequest.responseText;   } } // Now get the value from user and pass it to // server script.var x = "obid";var id = document.getElementById('obid' + y).value;var fname = document.getElementById('obfn' + y).value;var lname = document.getElementById('obln' + y).value;var age = document.getElementById('obage' + y).value;var dob = document.getElementById('obdob' + y).value;var dod = document.getElementById('obdod' + y).value;var about = document.getElementById('obab' + y).value; var queryString = "?update=yes&id=" + id + "&fname=" + fname + "&lname=" + lname + "&age=" + age + "&dob=" + dob + "&dod=" + dod + "&about=" +about; ajaxRequest.open("GET", "edit_old_post-ajax1.php" + 							  queryString, true); ajaxRequest.send(null);  }

With:

<div id="ajaxDiv"> First Name: <input type="text" readonly="readonly" value="36" id="obid3" />  <br /> First Name: <input type="text" value="James" id="obfn3" />  <br /> Last Name: <input type="text" value="Haring" id="obln3" />  <br /> Age: <input type="text" value="36" id="obage3"/>  <br /> Date of Birth: <input type="text" value="1900" id="obdob3" />  <br /> Date of Death: <input type="text" value="1936" id="obdod3" />  <br />  <br />				  <div style="float:left;">	 <textarea id="obab3" name="h1" rows="15" cols="85">Some information about this guy.</textarea> </div>  <input type="button" value="Send Revision" onclick="write1(3)" /><br /><hr /><br />First Name: <input type="text" readonly="readonly" value="50" id="obid4" /> <br />First Name: <input type="text" value="James" id="obfn4" /> <br />Last Name: <input type="text" value="Haring" id="obln4" /> <br />Age: <input type="text" value="36" id="obage4"/> <br />Date of Birth: <input type="text" value="1900" id="obdob4" /> <br />Date of Death: <input type="text" value="1936" id="obdod4" /> <br /> <br />				    <div style="float:left;">	  <textarea id="obab4" name="h1" rows="15" cols="85">Some information about this guy.</textarea>   </div> <input type="button" value="Send Revision" onclick="write1(4)" /></div>

And here is my PHP coding:

<?php$id = $_GET['id'];$fname = $_GET['fname'];$lname = $_GET['lname'];$age = $_GET['age'];$dob = $_GET['dob'];$dod = $_GET['dod'];$about = $_GET['about'];$update = $_GET['update'];echo 'Update: '.$update.'<br />ID: '.$id.'<br />Fname: '.$fname.'<br />Lname: '.$lname.'<br />Age: '.$age.'<br />DOB: '.$dob.'<br />DOD: '.$dod.'<br />About: '.$about.'<br />';?>

But the same code doesn't seem to work if the content of the page is generated by Ajax.It will come up with several buttons: obituary, weddings, and births. If you click Obituarys you will get a list of people the just click one of the rows and you will get several text fields and a send revision button.Don't worry you can click anything you want and not heart my site I don't have the mysql set up for editing the database right now.Also when you first go to the link there will be a few text fields and when you click the send revision button for them they do what the others should.Thanks for taking the time to help me! I have bean messing around with this same problem for the last 3 days and I am about sick of it.

[justsomeguy]

There's a Javascript error when you click the Send Revision button. Are you using a tool that helps you find errors?

[dsonesuk]

it can't find document.getElementById('obid' + y).value; so it gives an error, try adding hidden input field with this id value.

[migroo]

WOW!!! Thank you! Thank you! Thank you! That was it I just forgot to add the ID input field! Wow 3 days over a dang input field. I am not using a program to help me find Javascript errors. I don't know of a good one do you have any recommendations? I am not very good with javascript so a program to help find errors such as the one I just encountered would be great.Again, thank you!

[dsonesuk]

I use Firefox with addon 'web developer' and 'firebug'.Web developer points out javascript and css errors by displaying red icon with exclamation mark, clicking this will show you where the error is located, i have this toolbar shown all the time, and it gives lots of features to gain information about current web page.I mainly use firebug to find out the layout of the page, adjust css settings, and test what information is passed from one page to the other as in get and post values.

[Synook]

If you use a Webkit-based browser like Safari or Chrome, you can also use the Webkit Inspector.

[migroo]

I use both FireFox and Chrome. I just downloaded firebug and web developer your right they are awesome! Also I do see what you mean if you right click you can select "inspect element" in Chrome that is sweet and will make my life much easier.Thanks guys!