Jump to content
Larry Ullman's Book Forums

How To Access $_Get Using Javascript - Decodeuricomponent?


Recommended Posts

I'm building a one page website which uses php, mysql and jquery to provide various functionality including form processing. After the form is processed I would like a simple message to be displayed which can then be hidden by clicking a button.

 

What would be the best way to achieve this. I was thinking of displaying the message in a div which could toggle between display:none and display:block. The php file which processes the form and inserts the data to the d/b could redirect to the same page with a hidden field which could be checked and if set could use javascript to set the message div to display:block.

 

My questions are:

 

1. is this a good way to achieve this or would you suggest an alternative approach?

2. if I used the above approach, how do I get the javascript to check if the hidden field is set in the $_GET variable? I did a little seach and saw something about using decodeURIcomponent. Before I start looking into thIs more, is decodeURIcomponent a good method, are there others? and any tips on using decodeURIcomponent?

 

Thanks for any suggestions.

Link to comment
Share on other sites

Some more searching and I discovered window.location.search and below is my function which seems to work. I'm going to try to tidy it up with split. Any other improvements do chime in.

window.onload = function showMsg () {
'use strict';
var action = window.location.search.toString().charAt(3);
if (action == 'd'){
var div = document.getElementById('msg');
div.style.display = 'block';
}
}

Link to comment
Share on other sites

margaux, I'm confused by your code.

What does it do exactly?

 

If you're calling a PHP script for validation, then you should be using Ajax, and the response from the PHP script should be stored in the responseText property, which you can easily output to a div, etc., and then display that div.

Likewise, if validation is done on the JS side first, then you can output any errors to the same div used for PHP.

Link to comment
Share on other sites

I'm not surprised.

 

The form is validated using js and php. The php script inserts the data to the d/b and sends an email. Only then do I want to display a message on the original page and have that message fade out on the click of a button (used some jquery for this). This message is inform the visitor his form data was sent (validation errors are handled earlier).

 

My approach has been to code the message in a div with display:none.

<div id="msg" name="msg">
<h2>Message</h2>
<p>blah blah blah</p>
<p><input type="button" value="close" id="closemsg" class="formbutton"/> </p>
</div>

and the css is

#msg
{
background:#fff;
color:#b26fa7;
border:2px solid #b26fa7;
z-index:1;
display:none;
position:absolute;
width:30%;
height:100px;
margin:50px auto 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
text-align:center;
}

 

When the php script finishes it redirects to the original home page with a $_GET variable set. The js above checks for this variable and sets msg div's position to block so it can be seen. Surprisingly everything is working except one detail - because I've set msg div's position to block, its slightly throwing out the page layout.

 

Maybe I could use Ajax instead but I'm not proficient enough to use it. Maybe that's the answer to my original question 1. As for my other question, how would I use something like slice instead of charAt to get the characters after the equals sign from the url. As I'm using $_GET, the url is along the lines of www.example.com?action=display&id=2. I tried

var action = window.location.search.toString().slice('=');

I'll try again tomorrow but I was just happy the page worked.

Link to comment
Share on other sites

So you're not using Ajax. That's where I was confused. Your method is starting to make more sense now.

 

You know, you can very easily output PHP to JS. So instead of doing all that fancy slicing of the URL from JS, you can easily grab the necessary part of the URL in PHP, and then echo that value out in the appropriate place in the JS.

For example:

 

var action = <?php echo $_GET['action']; ?>;

 

That might prove simpler.

 

If you want to use JS, that is of course also an option, but I'd probably go with a regex to make things as quick and simple as possible.

For example:

 

/action=(\w+)/.exec(location)[1]

 

Look into the exec regex method in JS for details on the syntax.

That help at all?

Link to comment
Share on other sites

Ajax is a "better" option if you want to create a more seamless experience for the users by cutting out various page transitions.

 

As for where to start, since you seem to be using jQuery, I'd check out the jQuery ajax method. For more of a conceptual intro to Ajax, I'd check out Larry's Ajax book. It's slim and to the point.

Link to comment
Share on other sites

 Share

×
×
  • Create New...