AJAX with multiple forms

Hi, im new to the forum and a fairly inexperienced javascript programmer. I'm decent with php. Anyway, i have a php page displaying results from a mysql db, and next to each row, i have a delete button meant to delete that one row from the table. Anyway, since the js code im using uses getElementById, whenever i press the "delete" button, the first row in the table is removed because the javascript only gets the first form inputs with that specific id. I dont know if im explaining this well, so here's a snippet of my code that outputs the table:

<tr><td>Richard Jefferson</td><td>NJN</td><td><form name='del><input type='hidden' id='dlast' value='Jefferson' /><input type='hidden' id='dfirst' value='Richard' /><input type='button' onclick='ajaxFunction2()' value='Delete' /></form></td></tr>
<tr><td>Vince Carter</td><td>NJN</td><td><form name='del><input type='hidden' id='dlast' value='Carter' /><input type='hidden' id='dfirst' value='Vince' /><input type='button' onclick='ajaxFunction2()' value='Delete' /></form></td></tr>

HTML:

I just want to know how i can make the javascript distinguish between the 2 records when it gets the id. When i clickt he delete button on the row next to Vince Carter, i want it to realize that i want the calue for the "dfirst" id that is contained in THAT form, not the other form above it. If anything needs to be clarified, let me know. Thanks so much!

-Matt

Oh, heres my javascript code:

function ajaxFunction2(){
	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
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}

	var last = document.getElementById('dlast').value;
	var first = document.getElementById('dfirst').value;
	var queryString = "?last=" + last + "&first=" + first + "&dlt=true";
	ajaxRequest.open("GET", "outlive2.php" + queryString, true);
	ajaxRequest.send(null); 
}

Code (markup):

 

You shouldn't have the id the same for two elements - ID's are meant to be unique. Probably the best way is to firstly rename the two elements (for example dlast_1 and dlast_2), then pass them through the function itself.

<input type="button" onclick="ajaxFunction2('dlast_1', 'dfirst_1')" value="Delete" />

// javascript

function ajaxFunction2(dlast, dfirst)

...

var last = document.getElementById(dlast).value;
var first = document.getElementById(dfirst).value;

Code (markup):

 

You don`t need a form to do this, just a button. But you have to pass the variables to the script when calling the function.
Like decepti0n said, but no form at all:

and

 

Thanks a ton, both of you. I was just trying to implement passing the variables but it was getting caught because when passing the variables, the getElementById didnt work anymore because it was unnecessary. Anyway thanks maiq for making it that much easier for me, rather than taking way too long tinkering with things.

-Matt

oh, btw is firebug the best tool for debugging js?

 

Not sure, could be! I don't use it, the only thing I use to debug js is the firefox console (and the Console2 addon, but that's if I was building a firefox addon)