Pass HTML Field Values To PHP Script

hobbiton73 · May 17, 2012

I wonder whether someone may be able to help me please.

The code below is a script which creates a gallery of images.

<?php session_start(); 

$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];
?>
<?php 
   
  $galleryPath = 'UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/';
    
  $absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR; 
    
  $descriptions = new DOMDocument('1.0'); 
  $descriptions->load($absGalleryPath . 'files.xml'); 
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.3">
        <title>Galleria Twelve Theme</title>
        <style>
        
            /* Demo styles */
            html,body{background:#eee;margin:0;}
            .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:820px;margin:20px auto;}
            h1{font-size:12px;font-weight:normal;color:#222;margin:0;}
            p{margin:0 0 20px}
            a {color:#22BCB9;text-decoration:underline;}
            .cred{margin-top:20px;font-size:11px;}
            
            /* This rule is read by Galleria to define the gallery height: */
            #galleria{height:420px;}
            
        </style>

        <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery-ui-1.8.19.custom.min.js"></script>
	<script src="galleria/galleria-1.2.7.min.js"></script>
	<script src="galleria/themes/twelve/galleria.twelve.min.js"></script>
	<script src="galleria/plugins/history/galleria.history.min.js"></script>
	<link rel="stylesheet" href="galleria/themes/twelve/galleria.twelve.css">
	 <style>

	 .galleria-thumbnails .btn-delete {    
	 display: block; /* Or just use a div instead of a span*/     
	  position: absolute; bottom : 0px;  /*align at the bottom*/     
	  width: 80px;     
	  height: 17px;    
	  cursor: pointer;     
	  background: url(trash8.gif) no-repeat bottom; } 
         </style>

<script type="text/javascript"> 
	Galleria.ready(function() {
		this.$('thumblink').click();

	$(".galleria-image").append( 
	"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
	$(".btn-delete").live("click", function(){
	var img = $(this).closest(".galleria-image").find("img"); 

	// send the AJAX request
	$.ajax({
	url : 'delete.php',
	type : 'post',
	data : { image : img.attr('src') },
	success : function(){
	alert('Deleting image... ');
	img.parent().fadeOut('slow');
	}
	});

	return false;
	});

	});


</script>



    </head>

<body>
<ul id="navigation">
<li class="left">
  <div align="center"><a href="javascript:document.viewimages.submit()" class="style2">← Add Images</a></div>
</li>
</ul>
<form id="viewimages" name="viewimages" class="page" action="index.php" method="post"> <input name="userid" type="hidden" value="<?php echo $_SESSION['userid']; ?>"> <input name="locationid" type="hidden" value="<?php echo $_SESSION['locationid']; ?>"></form>
    <div class="content">
        <h1>Galleria Twelve Theme</h1>
        <p>Demonstrating a simple example.</p>
        
        <!-- Adding gallery images. We use resized thumbnails here for better performance, but it’s not necessary -->
        
        <div id="galleria">
          <?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :  
                          $xmlFile = $descriptions->documentElement->childNodes->item($i);  
                          $name = htmlentities($xmlFile->getAttribute('originalname'), ENT_COMPAT, 'UTF-8');  
                          $description = htmlentities($xmlFile->getAttribute('description'), ENT_COMPAT, 'UTF-8');  
                          $source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));   
                  ?>
            <a href="<?php echo $source; ?>"><img data-title="<b>Image Name: </b> <?php echo $name; ?>" data-description="<b>Description:</b> <?php echo $description; ?>" src="<?php echo $source; ?>"></a>

      <?php endfor; ?>  
</body>
</html>

The problem I'm having lies in the section of code which starts:

<script type="text/javascript"> 
	Galleria.ready(function() {
		this.$('thumblink').click();

This section deals with the deletion of each image, capturing the onlclick, loading the 'delete.php' file for the actual deltion of the physical image from the server.

This 'delete.php' files is as follows:

<?php session_start(); 

$_SESSION['userid']=$_POST['userid'];
$_SESSION['locationid']=$_POST['locationid'];

if (!empty($_POST)) {  
$image = $_POST['image'];  

if (file_exists($image)) {  
unlink($image);  
}  
}  
?>

What I'm trying to do, and having great difficulty in doing is passing the value of the 'userid' and 'locationid' fields to the 'delete.php' script, as these will be used to create a file path so that XML file can be loaded and changed.

I've tried using adding 'json' as the 'data type', then added the variable names at the end of the 'data:' line, all without success, but I'm not sure whether the issue is in the sending of the values from my gallery page or the receipt of the information in 'delete.php'.

I just wondered whether someone could perhaps have a look at this please and provide guidance on the correct way to send and receive this information.

rigeliux · May 24, 2012

Hello hobbiton73, not sure if this wold help:

You have....

<script type="text/javascript"> 
	Galleria.ready(function() {
		this.$('thumblink').click();
.
.
.
</script>

This simple "trick" was very helpful for me...

<script type="text/javascript">
var $userid=<?=$_SESSION['userid']?>;
var $locationid=<?=$_SESSION['locationid']?>;

	Galleria.ready(function() {
		this.$('thumblink').click();
.
.
.
               $.ajax({
	url : 'delete.php',
	type : 'post',
	data : { image : img.attr('src'), [b]userid:$userid, locationid:$locationid[/b] },
.
.
.
</script>

This is assuming that you initialize a session with those values when a user login.

Hope this help you.

hobbiton73 · May 24, 2012

Hi, thank you very much for taking the time to reply to my post and for the help.

I've managed to overcome the problems I had with a solution which in some respects is not too disimilar to your suggestion.

The main problem was the 'delete.php' file, and working this through with a family member who's a bit of a whizz, I found that the 'image' value actually pulled through the whole URL rather than just the filename.

So I came up with the following:

gallery.php

 // send the AJAX request
	  $.ajax({
		url : 'delete.php',
		type : 'post',
		data : { image : img.attr('src'),  userid: "VALUE", locationid: "VALUE"},
		success : function(){
		img.parent().fadeOut('slow');

delete.php

<?php session_start(); 

if (!empty($_POST)) {   
$originalimage = $_POST['image'];   

if (file_exists($originalimage)) {   
unlink($originalimage);   
}   
}   

$path_parts = pathinfo($originalimage);
$dir = $path_parts['dirname']; 
$basename = $path_parts['basename'];
?>

<?php

$newimage = $basename;

$dom = new DomDocument();
$dom->load('UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/' . 'files.xml'); 

$root = $dom->documentElement;

$images = $root->getElementsByTagName("file");
$length = $images->length;

//Iterate backwards by decrementing the loop counter 
for ($i=$length-1;$i>=0;$i--)
{
$p = $images->item($i); 
$pid = $p->getAttribute("name");

if ($pid == $newimage)
{ 
$parent = $p->parentNode;
$parent->removeChild($p); 
}
}

$dom->save('UploadedFiles/' . $_SESSION['userid'] . '/' . $_SESSION['locationid'] . '/' . 'files.xml'); 
?>

Sign In

Pass HTML Field Values To PHP Script

Recommended Posts

hobbiton73

Link to comment

Share on other sites

rigeliux

Link to comment

Share on other sites

hobbiton73

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information