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">
    		<?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 Code:
    <?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
    Code:
    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.

  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 kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012