Execute php without refreshing page - javascript

I want to execute the javascript code through php when the submit button is clicked......this code does it but the page refreshes.....i dont want the page to refresh......can I achieve it through ajax or jquery and how?
<html>
<head>
<style>
.popup
{
visibility:hidden;
}
</style>
</head>
<body>
<form method="post">
<div id="Popup" class="popup">
Sorry! The vehicle is already booked on the corresponding date.
Select a different date or book another vehicle.
</div>
<input type="submit" name="submit" value="display">
</form>
<?php
if(isset($_POST["submit"]))
{
echo '<script>document.getElementById("Popup").style.visibility="visible";</script>';
}
?>
</body>
</html>

You cannot do this with PHP. As PaulProgrammer stated PHP can only execute when the page is generated as it is a server side language. You need a client side language such as JavaScript to do this. Here is an example of code you can try out. Don't just take the example, but learn what each of the components do:
<html>
<head>
<style>
#popup
{
display:none;
}
</style>
</head>
<body>
<button id="showbtn">Show Popup</button>
<div id="popup">
Sorry!The vehicle is already booked on the corresponding date.
Select a different date or book another vehicle.
</div>
<script>
const mypopup = document.getElementById("popup");
const mybutton = document.getElementById("showbtn");
mybutton.addEventListener('click', function(event) {
mypopup.style.display = "block";
})
</script>
</body>
</html>

try to use javascript to execute on second plane the code

Related

Passing timestamp to a form on button click

Very new to Javascript. I would like to pass a timestamp to a form when the user clicks a button, but I'm having trouble with getting the actual value to submit.
<html>
<head>
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
});
});
</script>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show" onclick="userdate = new Date()">Show text</button></p>
<div id="ans" style="display:none">
<input type="hidden" id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
</body>
I've omitted the form submission code - unfortunately I did not write it and I don't have access to the code beyond using it for form submission.
But upon submission, the .csv file contains:
"timestamp":"dateOfUser"
And not the value of "userdate". As far as I understand, using document.getElementById("userdate").value = dateOfUser; should allow me to use "userdate" in the HTML.
Any help would be appreciated, I've poured over many similar questions on this site and others, but I am having trouble figuring out what I'm doing wrong.
you can remove the type="hidden" to test. At least it works for me using userdate.value.
<html>
<head>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show">Show text</button></p>
<div id="ans" style="display:none">
<input id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
$("#userdate")[0].value = new Date()
});
});
</script>
</body>
The way you put script above the body
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
wouldn't work because the dom(i.e. the elements) has not loaded. While onclick and $(document).ready are different from the above way.
However, it's still better for you to put script at the bottom of body.

AJAX Live Search, drop down search results based off input

I am trying to implement a AJAX live search however am having a problem linking the pages, I have spent a good 2 hours playing around and haven't come up with a solution.
I have a index.php page which has the page structure and simple form :
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<input id='search' type="text">
<div id='result'></div>
<script>
$("#search").on("input", function() {
$search = $("#search").val();
if ($search.length > 0) {
$.get("res.php", {"search":$search}, function($data){
$("#results").html($data);
})
}
});
</script>
</body>
</html>
Here is my res.php page :
<?php
print_r($_GET);
?>
As far as I am aware this should be outputting the input of the search field just below it. Something I am not seeing, I am pretty sure there is no errors in the code.

Selecting an element from the jquery POST data

I have been trying to fetch the result of a php page after sending a post request to the page itself. I want to fetch the data after the post request succeeded and get the content of the div element with id result. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").submit(function() {
$.post("test.php",
{
name: "valid"
},
function(data, status) {
});
return false;
});
});
</script>
</head>
<body>
<form method="POST" id="myForm">
<input type="text" name="name" />
<input type="submit" name="submit" value="Submit" />
</form>
<div id="result">
<?php
if(isset($_POST['name'])) {
if($_POST['name'] == 'valid') {
echo 'You are a valid user!';
}
}
?>
</div>
</body>
</html>
When I submit the button regardless of what is written in the textbox I should get the Your a valid user message from the test.php I want to get this message in the result page and display it in the current page without reloading the page. Since the result page content is saved in data variable I don't know how to select an element which is contained in a variable instead of the current page itself. We can do $("div#result").text() for the current page. But how should I do it for the html content stored in a variable?
Just give your data variable as second parameter to jQuery like this:
$('#result', data).text()
Not tested but should work.
Update:
I don't know why but this will only work when your element you want to find is wrapped with another element within your body tag. See this fiddle: http://jsfiddle.net/xf32L5uj/

Javascript on Google Sites

I am a bit new to the coding. I tried to put javascript on my google site in an HTML box but it is not working. I am pasting my code here.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
It should validate with the alert box. The code is running fine when I am running it on the localhost but is not working when I am pasting it in the HTML box within a google site. my company is using Google gadget to make the HTML and javascript run over the google site. Is there any simpler way to do without google gadget?
You can program a div with a method to act like the alert method. Stylize and position it however you want, but here is an example of one I called msgBox that takes a message and a type (just changes the color for critical, warning, and info) and shows up like a banner at the top of the document:
<!DOCTYPE html>
<html>
<head>
<style>
.msgBox{position:absolute;width:50%;top:0px;left:-25%;margin-left:50%;padding:1%;color:black;display:none;font-family:"Calibri","Arial",sans-serif;vertical-align:middle;}
.info{background-color:rgba(120,170,250,0.95);}
.warn{background-color:rgba(240,230,120,0.95);}
.crit{background-color:rgba(250,120,120,0.95);}
.msgBoxMessage{width:98%;max-width:98%;height:100%;color:black;font-size:1.8vw;vertical-align:middle;}
.msgBoxClose{height:100%;color:black;font-weight:bold;font-size:3vw;cursor:pointer;transition:0.2s;vertical-align:middle;}
.msgBoxClose:hover{color:white;transition:0.2s;}
</style>
<script>
function msgBox(message, type) {
var msgBox = document.getElementById("msgBox");
var msgBoxMessage = document.getElementById("msgBoxMessage");
msgBoxMessage.innerHTML = message;
msgBox.style.display="block";
msgBox.className="msgBox " + type.toLowerCase();
}
</script>
</head>
<body>
<h2>This page shows how to drive messages without using javascript alert.</h2>
<div class="msgBox info" id="msgBox">
<table style="width:100%;">
<tr>
<td class="msgBoxMessage" id="msgBoxMessage"></td>
<td class="msgBoxClose" onclick="document.getElementById('msgBox').style.display='none';">×</td>
</tr>
</table>
</div>
<button onclick="msgBox('This is for your <u>information</u>.', 'info');">Info</button>
<button onclick="msgBox('This is just a <i>warning</i>.', 'warn');">Warn</button>
<button onclick="msgBox('This is a <b>critical</b> message!', 'crit');">Crit</button>
</body>
</html>
Perhaps you shouldn't be pasting the <html> and <body> tags in the widget box, as it is already part of a html document.
Simply try this instead:
<button onclick="alert('I am an alert box!');">Try it</button>

using a php variable in a JS funcion

i previously asked this question but the example i provided did not provide my real problem.
I want to get the input from a form using a php variable and use it in a javascript function. I do not use javascript directly because the content of the variable in question is obtained from a mysql database and i do not think that there is a way for me to access the database using javascript.
below its the code that i have so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var slon1 = '<?php echo (json_encode($siteLon1)); ?>';
self.alert(slon1);
//some code goes here.
}
</script>
</head>
<body>
<div align="center">
<form method="get">
<label>Choose Site</label>
<select name='ps' id="ps" data-inline="true">
<?php
$use = $fgmembersite->getsites($fgmembersite->UserFullName());
$fields_num = mysql_num_fields($use);
while($row = mysql_fetch_row($use))
{
echo "<option value='".$row[0]."'>".$row[0]."</option>";
}
?>
</select>
<input type="submit" name="submit" value="View">
</form>
</div>
<div id="map-canvas"></div>
</body>
</html>
Suprisingly enough, the result displayed on self.alert(slon1) is null; be it when i just load the page or when choose from the drop down box and click on View. Please someone help me on this.
Thanks.
JSON encoder should quote variable, so using single quotes manually would trigger JavaScript parse error. Check JS console. This should generate valid JS code:
var slon1 = <?php echo (json_encode($siteLon1)); ?>;

Categories

Resources