How to run ajax and post to PHP - javascript

I am trying to run an ajax script from javascript inside a PHP file :
$(document).on('click', '.goto_date', function(){
var datechosen= $('#pickdate').val();
alert(datechosen);
$.ajax({
url:"vdater.php",
method:"POST",
dataType:"json",
data:{'datechosen':datechosen},
success:function(data){
alert('success');
}
});
});
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
</body>
</html>
But when I run the code nothing happens apart from the alert box referring that the ajax script is reachable in the code..
The PHP file may contain the following code:
echo $_POST['datechosen'];

Surprisingly, It worked by removing the line:
dataType:"json",

Try this one. It must be worked!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Ajax Response</title>
</head>
<body>
<div align="center">
<input type="button" name="gotodate" value="Go to date" id="gotodate" class="btn btn-danger btn-xs goto_date" />
<input type="date" name='pickdate' id='pickdate' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
let dateBtn = document.querySelector('#gotodate');
let getDate = document.querySelector('#pickdate');
dateBtn.addEventListener('click',(event)=>{
event.preventDefault();
if(getDate.value.trim() !== ""){
console.log(getDate.value.trim());
dateBtn.style.borderColor = "transparent"
jQuery.ajax({
type: "POST",
url: "vdater.php",
data:{
datechosen: getDate.value.trim()
},
success: ((response,status, object) => {
response = JSON.parse(response);
if(response.status){
alert(`Date Chosen: ${response.PickedDate}`);
}
})
});
}else{
dateBtn.style.border = "1px solid #fb5757";
}
});
</script>
</body>
</html>
<?php
if(isset($_POST['datechosen'])){
$date = $_POST['datechosen'];
echo json_encode(["PickedDate"=> $date,"status"=>true]);
}

Related

Equations are not being formatted when I append new equation MathJax

I am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>

Why does function "checkpassword" makes nothing on click?

I have a problem guys. As a beginner, I am trying to check the length of password and return the result, but it doesn't work. after clicking button, it does nothing. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function checkpassword(){
var pas=document.getElementByName(passcode).value;
var x=pas.length;
if(x<8){
document.getElementById(message).innerHTML="Error 404!";
}
else{
document.getElementById(message).innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</body>
</html>
#'Felix Kling' and #'Daniel A. White have given some hints in the comments because you will have to pass the names and ids as strings. But another issue is that .getElementByName() is not a function. You can try this (note that I have used .getElementsByName (plural) and referenced the zero-ith index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
function checkpassword(){
var pas=document.getElementsByName('passcode')[0].value;
var x=pas.length;
if(x<8){
document.getElementById("message").innerHTML="Error 404!";
}
else{
document.getElementById("message").innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</body>
</html>

Can i carry PHP variables over into an HTML or Javascript file

I'm new to PHP and am trying to create an Age Validation form that will limit access to specific content on a site if a user is under a certain age.
This is the HTML form (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
and this is the PHP script(data.php):
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION[$limited] = false;
header('Location: ../index.php');
}else{ //limited access is granted
$_SESSION[$limited] = true;
header('Location: ../index.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
I would like to be able and carry the resulting $limited variable from the PHP file into this HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
This is currently just for testing to make sure it can carry over. I have tried the $_SESSION method but i can't seem to figure it out.
Any and all possible solutions welcomed.
Thank you
First, your HTML file must be parsed by the PHP interpreter so it must have the .php extension in order to access any session variable.
Here's an example with 3 files in the same directory based on your question:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="data.php" method="POST">
<input type="date" name="date" />
<input type="submit" name="submit" />
</form>
</body>
</html>
data.php:
<?php //Age Validation Form
session_start();
if (isset($_POST['submit'])) { //Check if button clicked on form page
$date2=date("Y-m-d");//today's date
$date1=new DateTime($_REQUEST['date']); //user date
$date2=new DateTime($date2);
$interval = $date1->diff($date2); //check diff between dates
$myage= $interval->y; //resulting age
if ($myage >= 16){ //full access to website is granted
$_SESSION['limited'] = false;
header('Location: new.php');
}else{ //limited access is granted
$_SESSION['limited'] = true;
header('Location: new.php');
}
}else{ //if result page page is loaded without form submission
echo "Return to start page";
}
?>
<form action="index.html"> <!--Return to form page-->
<button type="submit">Return</button>
</form>
new.php(the new page, where you access your session variable)
<?php
session_start();
$limited = $_SESSION['limited'] ?? true;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $limited ? "true" : "false" ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>
You're using $limited as a key in the $_SESSION array. What's in $limited ?
I'm pretty sure that if you reassign the correct value to $limited, you can access the value in $_SESSION with this:
<?php $limited = 'MyAwesomeKey'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function myFunction () {
var access = <?php echo $_SESSION[$limited] ?>;
var txt = document.createElement('h1');
txt.innerHTML = access;
document.body.appendChild(txt);
}
myFunction();
</script>
</body>
</html>

How to validate textbox using bootstrap banner

I am relatively new to javascript and Im trying to create a banner that will display if textbox is empty. But it doesn't show. How can I make an alert using bootstrap banners?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function validateForm() {
var uname = document.getElementById("uname").value;
if (uname == ""){
bootstrap_alert.warning = function(message) {
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
$('#clickme').on('click', function() {
bootstrap_alert.warning('Please enter your name');
});
return false;
}
}
</script>
</head>
<body>
Name: <input type: "text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Well there are several things that you should consider while writing JS code:
Always include $(document).ready(function(){}); if you want your Jquery
code to wait for html body to load. and once it is loaded you want to
use your JS code.
Another thing that you have created a validateform() which is never calling from your code and your main code exists within that function.
I've modified your code to work perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('#clickme').on('click', function() {
bootstrap_alert('Please enter your name');
});
bootstrap_alert = function(message) {
var uname=$("#uname").val();
if (uname.length==0){
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
else{
$('#alert_placeholder').html('');
}
}
});
</script>
</head>
<body>
Name: <input type="text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Let me know.. if you need any help in this regard.. I would be gald to help you. Thanks

Values being sent over AJAX but not found in PHP file

I have a input field which when selected opens a date range calendar.
I am trying to send the date values over AJAX to a PHP file to echo when the apply button is pressed. The AJAX post request does send, however when I try to test for detection in my PHP file nothing is returned.
I have searched online and have found nothing to indicate why. Here is my code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" /> </head>
<body>
<input type="text" name="datefilter" value="" id="dates" />
<script type="text/javascript">
$(function () {
$('input[name="datefilter"]').daterangepicker({
"showDropdowns": true
, "minDate": "01/01/2014"
});
$('input[name="datefilter"]').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
$(".applyBtn").attr('id', 'testing');
$('#testing').click(function (e) {
$.ajax({
type: "POST",
url: 'test.php',
data: {
dates: $('#dates').val()
},
success: function (data) {
alert("success")
}
});
});
});
</script>
</body>
</html>
test.php
<?php
if (isset($_POST['dates'])) {
$range = $_POST['dates'];
echo $range;
} else {
echo "false";
}
?>
EDIT//
response body
The code works fine, the server response is in the "Response" tab:
instead of showing "success" in the alert, you could do this:
success: function (data) {
alert(data)
}
EDIT
Output in test.php:
put datefilter in a form
<form id="frm-test" action="test.php" method="post">
<input type="text" name="datefilter" value="" id="dates" />
</form>
dates -> datefilter in test.php
<?php
if (isset($_POST['datefilter'])) {
$range = $_POST['datefilter'];
echo $range;
} else {
echo "false";
}

Categories