This may sound weird, but I want to have a button with a link that does not open when the users clicks it:
click
I want to do this because this link has PHP values to recreate the page. The button is on with a new background colour.
I can't just use
document.body.style.backgroundColor='Snow'
because the page auto reloads and I want the colour to stay 'snow' even when the page reloads.
Can this be done? Are there better ways to permanently change the style by the click of a button?
You can use php SESSION for this
$_SESSION['color']='snow';
and take the value from from session by each reload.
And use preventDefault() for prevent the link redirection by using javascript
I suggest using hidden fields and have the background as the value, Then with javascript you grab the value of the hidden field
If you want it to be permanent for a user, you should store it in your database. You should do that by making a call to your server. You can use ajax for that. Using jquery's ajax's function makes it really easy.
http://api.jquery.com/jQuery.ajax/
You should post to your sever using ajax and change the background color in the database. If you do not want to have to refresh the page, you should then use javascript to change the background color.
Again, jQuery makes this really easy... $('element').css('background-color','color');
Do you try create a simple < button onclick='javascript:myfunction(); return false;'>test < /button> ?
and you implement what you want inside 'myFunction()'
You can use localStorage.
Assign the value in hidden field color. Just pass the color in url http://mysite.nl/test.php?value=red.
HTML
<form>
<a id="change-bg" href="#"> click</a>
<input type="hidden" name="color" value="<?=(!empty($_GET['value']) ? $_GET['value'] : '')?>"/>
</form>
JQUERY
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
if (typeof(Storage)!=="undefined" && typeof localStorage.bgColour !== 'undefined' ) {
$('body').css({'background' : localStorage.bgColour});
}
$('#change-bg').click(function(){
$('body').css({'background' : $('[name="color"]').val()})
localStorage.bgColour = $('[name="color"]').val();
return false;
});
});
</script>
Related
Do you know a way to display a php result inside a div dynamically, without refreshing the page?
For example, we have 2 divs: one on the top half of the page and one on the bottom of the page. The top one contains a form with 3 input fields. You type some values inside, then press a button. When you press the button, the bottom div displays the values without refreshing the page.
You can't do it with pure PHP because PHP is a static language. You have to use Javascript and AJAX. I recommend using a library like Zepto or jQuery to make it easy to implement like this:
<form>
<input name="search" />
<input type="submit" />
</form>
<div id="div2"></div>
<script>
// When the form is submitted run this JS code
$('form').submit(function(e) {
// Post the form data to page.php
$.post('page.php', $(this).serialize(), function(resp) {
// Set the response data into the #div2
$('#div2').html(resp);
});
// Cancel the actual form post so the page doesn't refresh
e.preventDefault();
return false;
});
</script>
You can accomplish it using AJAX. With Ajax you can exchange data with a server, make asynchronous request without refreshing the page.
Check this out to see how it can be implemented using Jquery:- http://api.jquery.com/jQuery.ajax/
I have a serious problem about Fancybox. I have a website with an image gallery. Users can report images if there is any abusing data on the image.
At the moment I am using Fancybox to display the report form. I am validating the input fields with jQuery and submit data with AJAX and the scripts are on the parent page.
report
This works perfectly. But if the user opens the link in new tab or new window, a problem arises because the validation scripts are not on the report form. Those are on the parent page.
So is there any way to stop right clicking or clicking mouse scroll or how will I overcome this problem?
Thanks
Another option is to catch all mouse buttons (left, right and wheel) when clicking over the selector .report and trigger fancybox if any like :
$(document).ready(function () {
$(".report").on('mousedown', function (e) {
if (e.which == 1 || e.which == 3 || e.which == 2) {
e.preventDefault();
$(this).fancybox({
// API options
}).click();
}
return false;
});
$(document).on('contextmenu', function (e) {
e.preventDefault();
});
});
See JSFIDDLE and try any mouse button over the thumbnails.
NOTE: .on() requires jQuery 1.7+
You could invoke fancybox via the function call on a div or input.button element
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
You can void the right click and middle click options by replacing all such links with buttons.
i.e.
$('a.report').replaceWith('<button onclick="window.location.href=\'linktothereportform?id=5\'">report</button>');
You may need to tweak the above a bit, plus style the buttons to look like links etc. but the general idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
All the credit should got to the people who gave their correct valuable answers for my question.
I decided to make a good answer for people who will seek answers for this question in future.
I would basically divide my answer into two section.
As for my original question I needed a solution with hyperlinks.
So the first method is hyperlinks
As #Jeemusu’s comment.
Fancybox use AJAX to load content. There's an HTTP variable set called HTTP_X_REQUESTED_WITH, which will be set and set to 'xmlhttprequest' if it's an AJAX request.
So even someone opens the links in new tab we can check whether it is AJAX or non-AJAX and display content according to that. So no worries about right clicking.
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//this is an ajax request. do what you need to
}
else {
//this is non ajax. do what you need
}
?>
Second option is to change the hyperlinks as a button or any div.
General idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
As #Scuzzy’s and #techfoobar’s answers
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
OR
jQuery('a.report').each(function(){jQuery(this).replaceWith('<button onclick="window.location.href=\'' + jQuery(this).attr('href') + '\'">report</button>');});
You can replace that link by a button which will not let the user to open that in new tab. You can do it like this :
<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>
I am using a PHP script, but say I had two radio buttons, right?
How could I actually execute code, such as (main intention | display a messagebox) upon selection of one or the other?
Say I had a radio button named RadioButton1, Once checked/selected, a message box would appear saying RadioButton1 Selected?
Is this possible through PHP alone? Or do I need to integrate an html page which posts to the PHP page?
Use Javascript for client side interaction like that. The code below listens for the onchange event and shows an alert().
jsFiddle Demo
<input type="radio" name="myradio" value="RadioButton1" />
<input type="radio" name="myradio" value="RadioButton2" />
<input type="radio" name="myradio" value="RadioButton3" />
<script>
window.onload = function()
{
var radios = document.getElementsByName("myradio");
for(var i=0; i<radios.length; i++)
{
radios[i].onchange = function()
{
if(this.checked)
{
alert(this.value + " selected");
}
}
}
}
</script>
The first 3 lines are the radio buttons HTML. After that we have the <script> tag which denotes Javascript code. The Javascript is adding some code to the onload event, which simply means: execute this code when the page is loaded. Next we get all of the radio button elements into an array called radios - for that we use getElementsByName() passing the radio button group name which is myradio. Next we loop through each radio button in the array and assign an onchange handler, which means: execute this code when each radio button is changed. Within that, we check if the radio button is checked and if it is, we show the alert, showing the radio button's value which will be RadioButton1, RadioButton2, RadioButton3.
Not possible with just php! Try using Jquery as the easiest was to do this
$(document.body).on('click', '#radio-btn', function(){
$.get( 'file1.php' , function (data) {
//whatever you want to do after fetching the data from a php file
});
});
Selecting a form element is done in the client's browser, while PHP is a server-side language. It is absolutely unaware of what the user clicks until some data is actually sent back to the server, e.g., via a POST request upon submitting a form.
So no, PHP isn't capable of achieving what you are after.
There's an easy way though. JavaScript is executed on the client side, so you can easily attach an event listener to your radio buttons and display a message box if needed.
Using php alone its not possible, but you can do it using Jquery ajax. To do this make a ajax request on click of radio button, and populate the message box with the data comming in response.
Let me explain with an example:
<div id='msg_box'>Message will be displayed here</div>
on click of radio button call a function of javascript say ajaxCallForMessage()
<script type="text/javascript">
function ajaxCallForMessage(){
$.ajax({
url: "Url of the page which contain message/?btn_name=xy",
mthod: "GET"
}).done(function ( data ) {
$('#msg_box').append(data);
});
}
</script>
make sure you included jquery.
If I understood your question properly, I would suggest to do it simply via Javascript.
Once the user selects the RadioButton1, the "click" event is triggered in the page. I guess you know that you can capture it adding the onClick attribute like:
<input type="radio" name="Radio1" value="RadioOption1" onclick="showMessage()"> Option 1
Then all you need to do is to create a Javascript funcion showMessage that adds some html to the page (maybe a paragraph) with the message you want to display. You can do this in Javascript easily, using for example the jQuery append or html functions.
function showMessage() {
// Example displaying an alert
alert("Message to be displayed here")
}
I would only introduce PHP here if there is really a need to obtain information from the server. In this case what you should be doing is probably a GET / POST from the page to the server (e.g. using AJAX via jQuery get or post method). You will call a PHP script that returns some information that then will be displayed in the page through Javascript.
But if all you need is to display a simple message like "Option 1 selected" you should do it in Javascript without server interaction.
I hope this helps.
Regards,
Romén
I am currently working on a php e-mail system. I created a javascript pop-up page where I can add users (mail addresses). Now I want to post the selected user('s) from the javascript pop-up window to open the website of course I get the page where you want to post in the pop up to see.
Now I want to now, if there is click on the submit than close the popup and allows the data to the open web page whit post?
How can i do this??
you might want to look to the overlay plugin at jquery tools. Pop-ups are blocked by the browser most of the times. And imo an overlay is a more elegant solution. Furthermore, you can just post your form as you would normal do on a webpage, nu extra js needed there!
--- edit; when reading your question more closely; you don't even need to post the page! Just assign a click event to the submit button (which doesn't necessarily needs to be a submit button). In your event function you can read out the filled in addresses (or other information), paste it into the desired fields (whether it be a form field or just a regular div) and close the overlay again. Now you don't even need a page refresh!
You'll want to use AJAX to post the form asynchronously so the user doesn't have to wait for it to process or view the processing page. jQuery makes it very easy to use AJAX as shown here.
Also, after the work is done in the popup window you can access and refresh the parent window using the window.opener function:
<script language="JavaScript">
function refreshParent() {
window.opener.location.href = window.opener.location.href;
window.close();
}
</script>
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=textinput1]").val(substr[0]);
$("[name=textinput2]").val(substr[1]);
});
</script>
<form>
<table>
<tr>
<td>
</td>
</tr>
</table>
</form>
OnClick of the href link or button you will send the data-php-var to the jQuery function. This function will send the values into the popup. In the popup is a text-field with the same name the jQuery function will put your values into de field.
i have header, main_content, footer, right, and left content
my right content has a random link
i don't want my right content to be refresh when I click a random link
and the main_content would be the output
is it possible that a web page without refreshing the page when you click a link or click submit button and still you can see the url on your browser what you have clicked? how do to that?
thanks!
There are two ways to do this:
1) Target your form to a hidden iframe
2) use AJAX
Here, try these
Your Link
<input type="submit" onClick"return false;" />
Ajax helps you do exactly that. So the skeleton will work like this
- When you submit a link, that posts to the server side using Ajax and the page does not get refreshed. Ajax is essentially a xmlhttprequest submitted to the backend. You may decide to hand code your own xmlhttprequest or take the jquery route(def, the easiest of the 2. You pick your battles, right?)
Here's some help with using jquery http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
bind an event handler to your element like this:
$('#yourBtn').live('click', function(e){
//do the AJAX thingy
e.preventDefault();
}
Read more about jQuery's AJAX solution
The page does not refresh when you try to call a javascript function
like this:
Your Link
<form action="javascript:func()" method="post">
This answer is based on the title.
click a link (pure javascript):
Your Link
<script type=text/javascript">
function functionName(){
// Do the job...
return false;
}
</script>
click a link (using jQuery):
<a id="myId" href="#"> Your Link </a>
<script type=text/javascript">
$(document).ready(function(){
$("#myId").on("click", function(){
// DO the job...
return false;
});
});
</script>
In other words set a click listener for your link and inside the listener's function return false.
You can avoid the refresh page functionality for the submit button on the same way.
On another stackoverflow discussion.