The forums have permanently moved to This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.

Results 1 to 2 of 2

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

  1. #1

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

    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.
    HTML Code:
    <div class="entry">
    		$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 Code:
    $content $_POST['content'];
    $id $_POST['id'];
    $sql "UPDATE contacts SET first='$content' WHERE id='$id'";
    $result $conn->query($sql) or die(mysqli_error());

    The Javascript / AJAX
    Event.observe(window, 'load', init, false);
    function init(){
    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){
    	var textarea = '<div id="''_editor"><textarea id="''_edit" name="''" rows="4" cols="60">'+obj.innerHTML+'</textarea>';
    	var button	 = '<div><input id="''_save" type="button" value="SAVE" /> OR <input id="''_cancel" type="button" value="CANCEL" /></div></div>';
    	new Insertion.After(obj, textarea+button);	
    	Event.observe('_save', 'click', function(){saveChanges(obj)}, false);
    	Event.observe('_cancel', 'click', function(){cleanUp(obj)}, false);
    function showAsEditable(obj, clear){
    	if (!clear){
    		Element.addClassName(obj, 'editable');
    		Element.removeClassName(obj, 'editable');
    function saveChanges(obj){
    	var new_content	=  escape($F('_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=''&content='+new_content;
    	var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});
    function cleanUp(obj, keepEditable){
    	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.';
    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.

  2. #2
    First of all, you're not always escaping your data for HTML nor SQL and you are thus vulnerable to SQL injection and XSS attacks. Use mysqli::real_escape_string before using dynamic data in queries and htmlspecialchars or htmlentities before outputting dynamic data to your HTML page (and don't forget to specify the character encoding for htmlentities/htmlspecialchars!)

    As for grabbing the id using JS - you seem to be using jquery, so what I would do instead of passing the 'desc' element is to assign the form an id, and the use jquery's selectors to grab the id input field. You could for example use a dummy class name, and then use a selector like $('#' + form_id + ' .id_input_field'). Also, since you're using jquery, you should avoid using things like obj.innerHTML and use obj.html() instead (supposing 'obj' is a jquery'd variable).
    Wait, what?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Home About Meet the Moderators Advertise

 Link to Us


Copyright 1999 - 2012