JavaScript / PHP / AJAX / SQL - pulling ID from a form

programming
1

Ok so here’s the scenario…

I’m using JS / AJAX to let me edit in place. On this page I have lists of contacts that pulls from an SQL database. When I click a person’s name JS changes the text to a form input and I can edit the content.

When I hit save, the information isn’t being sent to the database. The field (lets call it name) is being transferred to the PHP script by JS, and works, however I can’t figure out how to pull the ID from the form using JS.

Code snippets of the PHP insert and the JavaScript / AJAX below.

The form being called from the db - works fine by itself.

<div class="entry">
		<?php
		$sql="SELECT * FROM contacts";
		$result = $conn->query($sql) or die(mysqli_error($link));
		while($row = $result->fetch_object())
  			{
  			echo "<form action='delete.php' method='post'>";
  			echo '<input id="id" type="hidden" name="id" value="'.$row->id.'" />';
  			echo "<h1 id='desc'>$row->first $row->last</h1>";
  			echo "<input type='submit' value='Delete' />";
  			echo "</form>";
  			echo "<br /><br />";
  			}
		?>

The save.php script that is run when I click save button.

<?php
 	
	require("../../includes/php/config.php");
    $content = $_POST['content'];
    $id = $_POST['id'];
	$sql = "UPDATE contacts SET first='$content' WHERE id='$id'";
	$result = $conn->query($sql) or die(mysqli_error());
	if($result){
		 echo htmlspecialchars($content);	
	}	


?>

The Javascript / AJAX

Event.observe(window, 'load', init, false);

function init(){
	makeEditable('desc');
}

function makeEditable(id){
	Event.observe(id, 'click', function(){edit($(id))}, false);
	Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
	Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}

function edit(obj){
	Element.hide(obj);
	
	var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="4" cols="60">'+obj.innerHTML+'</textarea>';
	var button	 = '<div><input id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></div></div>';
	
	new Insertion.After(obj, textarea+button);	
		
	Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
	Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
	
}

function showAsEditable(obj, clear){
	if (!clear){
		Element.addClassName(obj, 'editable');
	}else{
		Element.removeClassName(obj, 'editable');
	}
}

function saveChanges(obj){
	
	var new_content	=  escape($F(obj.id+'_edit'));

	obj.innerHTML	= "Saving...";
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}

  	var url = 'save.php';
	var pars = 'id='+obj.id+'&content='+new_content;
	var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});

}

function cleanUp(obj, keepEditable){
	Element.remove(obj.id+'_editor');
	Element.show(obj);
	if (!keepEditable) showAsEditable(obj, true);
}

function editComplete(t, obj){
	obj.innerHTML	= t.responseText;
	showAsEditable(obj, true);
}

function editFailed(t, obj){
	obj.innerHTML	= 'Sorry, the update failed.';
	cleanUp(obj);
}

I’d give a link but the information is sort of confidential - sorry to be snoody and I know a working page is always 10x easier to work with but I’m slightly limited in that regard.