Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    img tag and onclick event

    Hi All

    Please be gentle on me if this is a silly question but can somebody see any issues with the below:

    I am using php to generate a table and its contents from a DN which are then out putted into a div. The issue is when I output an IMG file with an onclick event it doesn't actually do anything when i try click on it.

    The PHP code is
    Code:
    echo "<td><img src='images/cancel.png' id = ". $row['Item_No'] . " onClick = 'javascript:deleterecord(this)'></td>";
    This outputs the following HTML code
    Code:
    <td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(this)"></td>
    Can anybody see why the onclick event is not being called\working with the img tag?

    Regards
    Tommy
    Last edited by tommycahir; 05-04-2009 at 09:38 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Validate your html markup first using http://validator.w3.org
    I don't see any big issues in your output,
    Code:
    <td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(this)"></td>
    though javascript: is not required.

    Are you getting any errors? Get a copy of firebug for your firefox (if you haven't one), which will help you to solve the errors in your script, if any.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    tommycahir (05-04-2009)

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The problem may lay in the fact that class names and id values which start with a numeral aren't valid. It may be messing with the browser's perception of the DOM.

    Are you referencing the img element's id value after you've passed back the element/object in the js?

    Without seeing the js, it's not easy to get where the problem lays.

    Link to the page online and those willing/able to help will be able to get a better idea where the problem might stem from.

  • #4
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am currently developing the page on a wamp server on my machine so I am not able to give an online link.

    I have even gone as far as removing all the JS actions and just putting in the following

    function deleterecord(value)
    {
    alert("ppp");
    }

    I have tried it with and without the javascript: item but it doesnt seem to make a difference.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    function deleterecord(value)
    {
    alert("ppp");
    }

    I have tried it with and without the javascript: item but it doesnt seem to make a difference.
    Then there must be some error somewhere in your code. have you tried my other suggestion? Could you post your complete code(html+javascript)?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    OK here goes and forgive me for the length of this.

    Here is the PHP file that generates the table

    PHP Code:
    <?php
        
    //Start session
        
    session_start();
        
        
    //Include database connection details
        
    require_once('config.php');
        
        
    //Array to store validation errors
        
    $errmsg_arr = array();
        
        
    //Validation error flag
        
    $errflag false;
        
        
    //Connect to mysql server
        
    $link mysql_connect(DB_HOSTDB_USERDB_PASSWORD);
        if(!
    $link) {
            die(
    'Failed to connect to server: ' mysql_error());
        }
        
        
    //Select database
        
    $db mysql_select_db(DB_DATABASE);
        if(!
    $db) {
            die(
    "Unable to select database");
        }
        
        
    //Function to sanitize values received from the form. Prevents SQL injection
        
    function clean($str) {
            
    $str = @trim($str);
            if(
    get_magic_quotes_gpc()) {
                
    $str stripslashes($str);
            }
            return 
    mysql_real_escape_string($str);
        }
        
        
    //Sanitize the POST values
        
    $type clean($_GET['Type']);
        
    $make clean($_GET['Make']);
        
    $model clean($_GET['Model']);
        
    $Quantity clean($_GET['Quantity']);
        
    $comments clean($_GET['Comments']);
        
    $member $_GET['Member_ID'];
        
        
        
    //Input Validations
        
    if($type == '') {
            
    $errmsg_arr[] = 'Please select a Type';
            
    $errflag true;
        }
        if(
    $make == '') {
            
    $errmsg_arr[] = 'Make name missing';
            
    $errflag true;
        }
        if(
    $model == '') {
            
    $errmsg_arr[] = 'Model name missing';
            
    $errflag true;
        }
        if(
    $Quantity == '') {
            
    $errmsg_arr[] = 'Quantity is Missing';
            
    $errflag true;
        }
        if(
    $member == '') {
            
    $errmsg_arr[] = 'Unique Member ID is Missing';
            
    $errflag true;
        }
        
        
    //Check for valid Member ID 
        
    if($member != ''
      {
            
    $qry "SELECT * FROM members WHERE member_id='$member'";
            
    $result mysql_query($qry);
            
        if(
    $result
        {
                if(
    mysql_num_rows($result) == 0
          {
                    
    $errmsg_arr[] = 'Unique Member ID is not Valid, Please Log-out and Try again';
                    
    $errflag true;
                }
                @
    mysql_free_result($result);
            }
            else 
        {
                die(
    "Query failed");
            }
        }
        
        
    //If there are input validations, redirect back to the registration form
        
    if($errflag) {
            
    $_SESSION['ERRMSG_ARR'] = $errmsg_arr;
            
    session_write_close();
            exit();
        }

      
      
    //Check whether the session variable SESS_ORDERID is EMPTY or not
        
    if(!isset($_SESSION['SESS_ORDERID'])) 
      {
         
    $mysqldate date('Y-m-d');
           
    $batchqry "INSERT INTO batch( Member_ID, Date) VALUES('$member', '$mysqldate')";
           
    $batchresult = @mysql_query($batchqry);
           
    $Query_no mysql_insert_id();
           
    $_SESSION['SESS_ORDERID'] = $Query_no;
        }else
        {
           
    $Query_no $_SESSION['SESS_ORDERID'];
      }
      
        
    //Create INSERT query
        
    $qry "INSERT INTO orders(Type, Make, Model, Quantity, Comments, member_id, Query_No) VALUES('$type','$make','$model','$Quantity','$comments','$member','$Query_no')";
        
    $result = @mysql_query($qry);
        
        
    $sql="SELECT * FROM orders WHERE member_id = '$member'AND Query_No = '$Query_no' ORDER BY Item_No";
      
    $result2 mysql_query($sql);

    echo 
    "<table border='1' align='center' cellpadding='2' cellspacing='0'>
    <tr>
    <th>Item No</th>
    <th>Type</th>
    <th>Make</th>
    <th>Model</th>
    <th>Quantity</th>
    <th>Comments</th>
    <th>Action</th>
    </tr>"
    ;

    while(
    $row mysql_fetch_array($result2))
     {
     echo 
    "<tr>";
     echo 
    "<td>" $row['Item_No'] . "</td>";
     echo 
    "<td>" $row['Type'] . "</td>";
     echo 
    "<td>" $row['Make'] . "</td>";
     echo 
    "<td>" $row['Model'] . "</td>";
     echo 
    "<td>" $row['Quantity'] . "</td>";
     echo 
    "<td>" $row['Comments'] . "</td>";
     echo 
    "<td><img src='images/cancel.png' id = "$row['Item_No'] . " onClick = 'javascript:deleterecord(id)'></td>";
     echo 
    "</tr>";
     }
    echo 
    "</table>";
        
        
    //Check whether the query was successful or not
        
    if($result) {
            exit();
        }else {
            die(
    "Query failed");
        }
    mysql_close($link);
    ?>
    here is the HTML form that is used to enter the data into the DB and contains the div "insert_response" where the table is generated
    Code:
    <?php
    	session_start();
    
    	//Check whether the session variable SESS_MEMBER_ID is present or not
    	if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) {
    		header("location: access-denied.php");
    		exit();
    	}
    
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Order Form</title>
    <link href="loginmodule.css" rel="stylesheet" type="text/css" />
    <!-- Include AJAX Framework -->
    <script src="ajax/ajax_framework.js" language="javascript"></script>
    </head>
    <body>
    <p>&nbsp;</p>
    <?php
    	if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
    		echo '<ul class="err">';
    		foreach($_SESSION['ERRMSG_ARR'] as $msg) {
    			echo '<li>',$msg,'</li>'; 
    		}
    		echo '</ul>';
    		unset($_SESSION['ERRMSG_ARR']);
    	}
    ?>
    <form id="orderform" name="orderform" action="javascript:insert()">
      <table width="900" border="0" align="center" cellpadding="2" cellspacing="0">
        <tr>
          <td><b>*Type</b></td>
          <td><SELECT name="Type" id="Type" />
                          <OPTION value=Sensor>Sensor</OPTION>
                          <OPTION value=Valve>Valve</OPTION>
                          <OPTION value=Pump>Pump</OPTION>
                          <OPTION value=circuit_board>Circuit Board</OPTION>
                          </SELECT>
          </td>
        </tr>
        <tr>
          <td><b>*Make</b></td>
          <td><input name="Make" type="text" class="textfield" id="Make" /></td>
        </tr>
        <tr>
          <td><b>*Model</b></td>
          <td><input name="Model" type="text" class="textfield" id="Model" /></td>
        </tr>
        <tr>
          <td><b>*Quantity</b></td>
          <td><input name="Quantity" type="text" class="textfield" id="Quantity" /></td>
        </tr>
        <tr>
          <td><b>Additional Comments</b></td>
          <td><textarea name="Comments" rows="5" cols="40" id="Comments"></textarea></td>
        </tr>
        <tr>
          <td><b>*Unique Member ID</b></td>
          <td><input name="Member_ID" type="text" class="textfield" id="Member_ID" /></td>
        </tr>    
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" name="Submit" value="Submit"/> <input type="reset" value="Clear fields"></td>
        </tr>
        
        <tr>
          <td COLSPAN=2><br><br><!-- Show Message for AJAX response --> <div id="insert_response"></div></td>   
        <tr>
            <td><br><button type="button" OnClick="parent.location='sendorder-exec.php'">Send completed Order</button></td>
        </tr>
      
      </table>
    </form>
    <br>
    <br>
    </body>
    </html>
    and finally here is the ajax file that is called to add entries to the DB\process other DB items in future

    Code:
    /* ---------------------------- */
    /* XMLHTTPRequest Enable */
    /* ---------------------------- */
    function createObject() {
    var request_type;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
    request_type = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
    request_type = new XMLHttpRequest();
    }
    return request_type;
    }
    
    var http = createObject();
    
    /* -------------------------- */
    /* INSERT */
    /* -------------------------- */
    
    /* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
    var nocache = 0;
    
    function insert() 
    {
      // Optional: Show a waiting message in the layer with ID login_response
      document.getElementById('insert_response').innerHTML = "Just a second..."
    
      // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
      var Type = encodeURI(document.getElementById('Type').value);
      var Make = encodeURI(document.getElementById('Make').value);
      var Model = encodeURI(document.getElementById('Model').value);
      var Quantity = encodeURI(document.getElementById('Quantity').value);
      var Comments = encodeURI(document.getElementById('Comments').value);
      var Member_ID = encodeURI(document.getElementById('Member_ID').value);
    
      // Set te random number to add to URL request
      nocache = Math.random();
    
      // Pass the login variables like URL variable
      http.open('get', 'order-exec.php?Type='+Type+'&Make='+Make+'&Model='+Model+'&Quantity='+Quantity+'&Comments='+Comments+'&Member_ID='+Member_ID+'&nocache = '+nocache);
      http.onreadystatechange = insertReply;
      http.send(null);
    }
    
    function checkname() 
    {
      // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
      var login = encodeURI(document.getElementById('login').value);
    
      // Set te random number to add to URL request
      nocache = Math.random();
    
      // Pass the login variables like URL variable
      http.open('get', 'exisitinguser.php?login='+login+'&nocache = '+nocache);
      http.onreadystatechange = insertReplyname;
      http.send(null);
    }
    
    function deleterecord(value) 
    {
      alert("ppp"); 
    }
    
    function insertReply() 
    {
      if(http.readyState == 4)
      { 
        var response = http.responseText;
        // else if login is ok show a message: "Site added+ site URL".
        document.getElementById('insert_response').innerHTML = response;
      }
    }
    
    function insertReplyname() 
    {
        if(http.readyState == 4)
        {
            var response = http.responseText;
            document.getElementById('insert_img').innerHTML = response;
            document.getElementById("login").select();
            document.getElementById("login").focus();
        }
    }
    There is quiet possibly a better and easier way of achiving what I am looking to do above and if so I would like to get your advice on it.

    Regards
    Tommy

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    We can't execute that code at our end. Post the parsed output taken from your browsers' view source option.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here is the output once the table has been generated

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Order Form</title>
    <link href="order-form.php_files/loginmodule.css" rel="stylesheet" type="text/css">
    <!-- Include AJAX Framework -->
    <script src="order-form.php_files/ajax_framework.js" language="javascript"></script>
    </head><body>
    <p>&nbsp;</p>
    <form id="orderform" name="orderform" action="javascript:insert()">
      <table align="center" border="0" cellpadding="2" cellspacing="0" width="900">
        <tbody><tr>
    
          <td><b>*Type</b></td>
          <td><select name="Type" id="Type">
                          <option value="Sensor">Sensor</option>
                          <option value="Valve">Valve</option>
                          <option value="Pump">Pump</option>
                          <option value="circuit_board">Circuit Board</option>
    
                          </select>
          </td>
        </tr>
        <tr>
          <td><b>*Make</b></td>
          <td><input name="Make" class="textfield" id="Make" type="text"></td>
        </tr>
        <tr>
    
          <td><b>*Model</b></td>
          <td><input name="Model" class="textfield" id="Model" type="text"></td>
        </tr>
        <tr>
          <td><b>*Quantity</b></td>
          <td><input name="Quantity" class="textfield" id="Quantity" type="text"></td>
        </tr>
        <tr>
    
          <td><b>Additional Comments</b></td>
          <td><textarea name="Comments" rows="5" cols="40" id="Comments"></textarea></td>
        </tr>
        <tr>
          <td><b>*Unique Member ID</b></td>
          <td><input name="Member_ID" class="textfield" id="Member_ID" type="text"></td>
        </tr>    
        <tr>
    
          <td>&nbsp;</td>
          <td><input name="Submit" value="Submit" type="submit"> <input value="Clear fields" type="reset"></td>
        </tr>
        
        <tr>
          <td colspan="2"><br><br><!-- Show Message for AJAX response --> <div id="insert_response"><table align="center" border="1" cellpadding="2" cellspacing="0">
    <tbody><tr>
    <th>Item No</th>
    <th>Type</th>
    
    <th>Make</th>
    <th>Model</th>
    <th>Quantity</th>
    <th>Comments</th>
    <th>Action</th>
    </tr><tr><td>72</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="72" onclick="javascript:deleterecord(id)"></td></tr><tr><td>73</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="73" onclick="javascript:deleterecord(id)"></td></tr><tr><td>74</td><td>Sensor</td><td>sdd</td><td>ddd</td><td>0</td><td>ddd</td><td><img src="order-form.php_files/cancel.png" id="74" onclick="javascript:deleterecord(id)"></td></tr></tbody></table></div></td>   
        </tr><tr>
    
            <td><br><button type="button" onclick="parent.location='sendorder-exec.php'">Send completed Order</button></td>
        </tr>
      
      </tbody></table>
    </form>
    <br>
    
    <br>
    
    
    
    </body><script type="text/javascript"><!--
    function __RP_Callback_Helper(str, strCallbackEvent, splitSize, func){var event = null;if (strCallbackEvent){event = document.createEvent('Events');event.initEvent(strCallbackEvent, true, true);}if (str && str.length > 0){var splitList = str.split('|');var strCompare = str;if (splitList.length == splitSize)strCompare = splitList[splitSize-1];var pluginList = document.plugins;for (var count = 0; count < pluginList.length; count++){var sSrc = '';if (pluginList[count] && pluginList[count].src)sSrc = pluginList[count].src;if (strCompare.length >= sSrc.length){if (strCompare.indexOf(sSrc) != -1){func(str, count, pluginList, splitList);break;}}}}if (strCallbackEvent)document.body.dispatchEvent(event);}function __RP_Coord_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Coord_Callback = str;pluginList[index].__RP_Coord_Callback_Left = splitList[0];pluginList[index].__RP_Coord_Callback_Top = splitList[1];pluginList[index].__RP_Coord_Callback_Right = splitList[2];pluginList[index].__RP_Coord_Callback_Bottom = splitList[3];};__RP_Callback_Helper(str, 'rp-js-coord-callback', 5, func);}function __RP_Url_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Url_Callback = str;pluginList[index].__RP_Url_Callback_Vid = splitList[0];pluginList[index].__RP_Url_Callback_Parent = splitList[1];};__RP_Callback_Helper(str, 'rp-js-url-callback', 3, func);}function __RP_TotalBytes_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_TotalBytes_Callback = str;pluginList[index].__RP_TotalBytes_Callback_Bytes = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}function __RP_Connection_Callback(str){var func = function(str, index, pluginList, splitList){pluginList[index].__RP_Connection_Callback = str;pluginList[index].__RP_Connection_Callback_Url = splitList[0];};__RP_Callback_Helper(str, null, 2, func);}
    //--></script></html>
    Not sure where all the stuff after the </body> came from.

    Regards
    Tommy

  • #9
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Oh good god, I am beginning to hate javascript, ajax and php combo!

    I have no idea how but it seems to be running ok now!

    Thanks for all your responses and suggestions, your help is always greatly appreciated

    Regards
    Tommy


  •  

    Posting Permissions

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