margaux Posted October 18, 2012 Share Posted October 18, 2012 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 More sharing options...
margaux Posted October 18, 2012 Author Share Posted October 18, 2012 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 More sharing options...
HartleySan Posted October 18, 2012 Share Posted October 18, 2012 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 More sharing options...
margaux Posted October 18, 2012 Author Share Posted October 18, 2012 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 More sharing options...
HartleySan Posted October 19, 2012 Share Posted October 19, 2012 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 More sharing options...
margaux Posted October 19, 2012 Author Share Posted October 19, 2012 Thanks HartleySan, that does help. I did not realise I could use php within javascript. Would Ajax be a better option? If so could you suggest some pointers on where to start? Link to comment Share on other sites More sharing options...
HartleySan Posted October 19, 2012 Share Posted October 19, 2012 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 More sharing options...
margaux Posted October 20, 2012 Author Share Posted October 20, 2012 Thanks HartleySan, I'll look into it. Your reply on another thread about the benefits etc of ajax was good. Link to comment Share on other sites More sharing options...
HartleySan Posted October 20, 2012 Share Posted October 20, 2012 Thanks for the compliments. Glad I can be of assistance. That's why I enjoy posting on these boards. Link to comment Share on other sites More sharing options...
Recommended Posts