Jump to content

Passing an expression with multiple PHP variables to Javascript

- - - - -

  • Please log in to reply
8 replies to this topic

#1
RHochstenbach

RHochstenbach

    Learning Programmer

  • Members
  • PipPipPip
  • 56 posts
I've built a small application that maintains support tickets. Now I'm building a user manager application which loads each user into a table using a simple PHP WHILE loop. Inside one cell I'm loading a View / Edit and Delete button.

When someone clicks the Delete button, I want to show a confirmation dialog. Therefore I tried the following code:

(inside the HEAD tags)
<script language='JavaScript' type='text/JavaScript'>

function confirmAction(){

var confirmed = confirm("Are you sure? This will remove this entry forever.");


return confirmed;

}	

</script>

And in the WHILE loop the following Hyperlink:

<a href='usermanager.php?delete=$userid' onClick='return confirmAction()'><img src='images/delete.png' /></a>

Now when someone clicks the link, a message will popup. The page reloads, the userid gets intercepted and the entry deleted. Just like it should.

But when someone has disabled Javascript in their browser, they won't see a message and the entry gets deleted instanty.

Therefore I changed it like this:

(in the head tags)

<script language='JavaScript' type='text/JavaScript'>

function confirmAction(userid){

var confirmed = confirm("Are you sure? This will remove this entry forever.");

if (confirmed) {

window.location = "usermanager.php?delete=" + userid

}

return confirmed;

}	

</script>


And the WHILE loop

<a href='#' onClick='return confirmAction(".$userid_found .")'><img src='images/delete.png' /></a>


This works fine, basically people with Javascript disabled won't be able to delete it. In this scenario it adds 1 GET-tag to the URL.

But how would I add multiple GET-tags? Like search.php?term=$searchterm&value=$searchvalue? I tried putting in inside the enclosed tags like this:

<a href='#' onClick='return confirmAction('search.php?term=$searchterm&value=$searchvalue')'><img src='images/delete.png' /></a>


But in that case, nothing happens. I also tried turning the URL into a PHP variable, and then putting the variable inside the URL, but still Javascript doesn't accept it.


$url = "search.php?term=$searchterm&value=$searchvalue";

<a href='#' onClick='return confirmAction('$url')'><img src='images/delete.png' /></a>


How can I have Javascript accept such a URL?

#2
xx3004

xx3004

    Newbie

  • Members
  • PipPip
  • 13 posts
Uhm, first of all, there is a problem when you put PHP variable into Javascript without the tag <?php ?>
Secondly, It should work, as I think, how about this:


<script language='JavaScript' type='text/JavaScript'>

function confirmAction(query){

var confirmed=confirm("Are you sure? This will remove this entry forever!");

if(confirmed)

	{location.href=query;}

}

</script>


And the HTML:

<a href="javascript: confirmAction('search.php?term=$searchterm&value=$searchvalue');"><img src="images/delete.png"></a>


I hope it helps,
xx3004,

#3
RHochstenbach

RHochstenbach

    Learning Programmer

  • Members
  • PipPipPip
  • 56 posts
I've tried that, but It's not working. There's no message and the URL is not changing.

#4
xx3004

xx3004

    Newbie

  • Members
  • PipPip
  • 13 posts
Just confirm 1 more time, is what you want is to send data to the new page and reload it OR what you want is to pass the variables from PHP to javascript?

#5
RHochstenbach

RHochstenbach

    Learning Programmer

  • Members
  • PipPipPip
  • 56 posts
I want Javascript to reload the URL to have it contain GET-variables of any item I would select from the array. The values of each variable are calculated by PHP, and I want to have those values loaded inside the URL. Now it works fine if it just receives the value of the variable, but just when I add more pieces of the URL, it immediately stops working.

#6
RHochstenbach

RHochstenbach

    Learning Programmer

  • Members
  • PipPipPip
  • 56 posts
I managed to fix the problem by using a different method. I've added some files from the ibox project (iBox - Lightweight inline popup). I've added the following lines (which where included inside the ibox demo files, and modified accordingly) inside the head-tag:

<LINK rel="stylesheet" href="css/global.css" type="text/css" media="screen"/>

<script type="text/javascript" src="js/ibox.js"></script>

<script type="text/javascript">iBox.setPath('js/');</script>

<LINK rel="stylesheet" href="css/darkbox.css" type="text/css" media="screen"/>


Now I'm going to construct the hyperlink in such a way, that it will open a hidden DIV element which contains a confirmation message. But because it is the result of a PHP array, I have to make sure it knows which entry I am choosing. Therefore I put the DIV element inside the loop, and have PHP append a unique value to the element. In this case my unique primary key, the userid. The confirmation message will therefore only work with the variables for that specific entry.

The hyperlink has been constructed as follows:

<a href='#delete_confirmation_$userid' rel='ibox'>


The DIV part to construct the error message:

<div id='delete_confirmation_$reportid' style='display:none;'>

<b>Are you sure you want to permanently delete this user?</b><br /><br />

<center>$username</center><br />

<center><a href='[B]?delete=$userid[/B]'><img src='images/ibox/yes.png' name='Yes' alt='Yes' /></a>	<a href=' '><img src='images/ibox/no.png' name='No' alt='No' /></a></center>

</div>



#7
xx3004

xx3004

    Newbie

  • Members
  • PipPip
  • 13 posts
So all you want is (if I get you right) that you have a site (let's call index.html), which contain the link to delete something by calling the other site (let's call it delete.php) which receives the submit data from index.html right? Ok, why don't you use form submit? I will give you 3 solutions, and pick the one which is most suitable for you then:

1) Set location.href=delete.php?[alot of data here] - COMMENT: This one is not safe, at all
Ok in either of 3 ways, you will need this:
[Index.html]

<script language="javascript" type="text/javascript">

function doConfirm(){

location.href="delete.php?[MANY DATA HERE]";

//For example of passing the variable using normal script: 

//location.href="delete.php?term=searchterm&value=searchvalue";

//For example of passing the variable from PHP:

//location.href="delete.php?term=<?php echo $searchterm; ?>&value=<?php echo $searchvalue; ?>";

}

</script>

<a href="javascript: doConfirm();">DELETE</a>

OK, this way not works all the time, but since it's your original idea, I will use it. The function doConfirm() simply send you to page delete.php with data send.

If you want to reload the page instead, you can replace the doConfirm() function by this:

function doConfirm(){

window.open("THE LINK IS LIKE ABOVE, BUT WE OPEN THAT IN A NEW WINDOW SO WE CAN RELOAD THIS PAGE");

location.reload()

}


The second way is using form to submit data, this one will send data to, and I will use method GET. This method always works, and it reload the page, of course:
[index.html]

<form action="delete.php" method="GET">

<input type="text" name="search"><input type="text" name="value"><input type="submit" value="SEND">

</form>

Simply when people click the SEND button, it will send data to the delete.php. And the URL will look exactly like the method [1] above.

I personally prefer the third way: Using ajax. A little explanation, when people click to the DELETE button, it will send data to the delete.php and receive a data back WITHOUT RELOADING THE PAGE. And with the data back, we can do stuffs with that. I am using jQuery ajax.
[index.html]

<script language="javascript" src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

function doConfirm(){

$.ajax(

	{

	url: "delete.php",

	data: "search=searchterm&value=searchvalue";

	//OR you can pass the variables using php:

	//data: "search=<?php echo $searchterm; ?>&value=<?php echo $searchvalue;?>";

	success: function(data, textStatus, jqXHR)

		{

		//Let says that the delete.php will return 1 for success, return any other else for error

		if(data==1){alert("SUCCESS!");}else{alert(data);}

		},

	error: function(jqXHR, textStatus, errorThrown){alert("AJAX DOESN'T WORK, HERE IS THE ERROR "+textStatus);}

	});

}

</script>

<a href="javascript: doConfirm();">DELETE</a>


I hope it helps.
P/S: I don't know that you can pass the php variables by using directly $search in the javascript. It's new to me. How about try <?php echo $search; ?<

xx3004,

#8
oldhendra

oldhendra

    Learning Programmer

  • Members
  • PipPipPip
  • 30 posts
Try make a valid HTML/javascript first,
<a href="#" onClick="return confirmAction('search.php?term=$searchterm&value=$searchvalue')"><img src="images/delete.png" /></a>
Then translate that line to PHP,

a) Convert all " into \":
<a href=\"#\" onClick=\"return  confirmAction('search.php?term=$searchterm&value=$searchvalue')\"><img  src=\"images/delete.png\" /></a>
b) Make a line of valid PHP string, by isolateing PHP vars (now it's safe to use "):
"<a href=\"#\" onClick=\"return  confirmAction('search.php?term=" . $searchterm ."&value=" . $searchvalue . "')\"><img  src=\"images/delete.png\" /></a>"
c) Done. Try echoing it out:
echo "<a href=\"#\" onClick=\"return  confirmAction('search.php?term=" .  $searchterm ."&value=" . $searchvalue . "')\"><img   src=\"images/delete.png\" /></a>";


#9
xx3004

xx3004

    Newbie

  • Members
  • PipPip
  • 13 posts
I have posted 3 ways, but it is said to be invisible until the moderators check! Dang it!




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users