I want to send an input type element to a PHP page without form submission, only with javascript. I tried with $.ajax but no way. I don't know if it is a syntax or a logical error. Someone told me to do a single PHP page instead of two.
HTML page: (but is .php)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../../js/jquery-3.2.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
#prova{
padding-right: 1%;
padding-top: 1%;
}
</style>
<script>
function ajax_post(apri){
var stile = "top=10, left=10, width=650, height=600, status=no, menubar=no, toolbar=no scrollbars=no";
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "sperem.php";
var fn = document.getElementById("id_buyers").value;
alert(fn);
var vars = "postid="+fn;
alert(vars);
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
/*window.open(apri, "", stile);*/
document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>
<body>
<div class="container">
<center><h1>Add Orders:</h1></center>
<form class="form-inline" name="ordine">
<div class="form-group" id="prova">
<label for="Buyers">ID_Buyers:</label>
<input type="text" class="form-control" placeholder="Enter IDBUYERS" id="id_buyers">
</div>
<div class="form-group" id="prova">
<input type="submit" id="bottone" value="show" onClick="ajax_post('sperem.php')"/>
</div>
</form>
<br><div id="status"></div>
</div>
</body>
</html>
This is the Php page:
<?php
$dato = $_POST['postid'];
echo($dato);
?>
change this from
input type="submit"
to
input type="button"
then you can get the data what you have given in textbox.
The problem here is the form is submitting when you run it on the browser, as if you want run the ajax you need to run the page with out submitting/reloading.
Hope it helps you.
Related
I'm trying to create a trigger button that, when pressed, will display a value from an excel cell in alert box or on the page.
below is all I could get, but it doesn't display anything on the page.
update: I managed to do this using ActiveX, but I don't want to use this library for some reasons. Do you have any idea how I could do it?
update code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.full.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Excel to HTML</title>
</head>
<body>
<p>Press to show</p>
<input type="button" onclick="ReadData(4, 2) ; msgprint()" value="Show" />
<div id="div1">
<script>
function ReadData(cell, row) {
var excel = new ActiveXObject("Excel.Application");
var excel_file = excel.Workbooks.Open("mypah/myworkbook.xlsx");
var excel_sheet = excel.Worksheets("Sheet1");
var data = excel_sheet.Cells(cell, row).Value;
document.getElementById("div1").innerText = data;
}
</script>
</div>
<script>
function msgprint() {
alert(document.getElementById("div1").innerText);
}
</script>
</body>
</html>
I have some JavaScript code:
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState === 4) {
var response = req.responseText;
console.log(response);
}
};
req.open('GET', 'https://circumvent-cors.herokuapp.com/https://weather.rap.ucar.edu/radar/displayRad.php?icao=KLWX&prod=BREF&bkgr=gray&endTime=-1&duration=2');
req.send(null);
which returns a HTML page like this:
<!doctype html>
<html lang="en">
<head>
<title>NEXRAD Level-II radar image(s) [KLWX BREF]</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="author" content="Gregory Thompson" />
<meta name="copyright" content="(c) Copyright UCAR-University Corporation for Atmospheric Research All Rights Reserved" />
<link rel="stylesheet" href="/assets/css/reset.css" />
<!-- Include the SciAnimator CSS -->
<link rel="stylesheet" href="/assets/css/scianimator.css" />
</head>
<body bgcolor="#FFFFFF">
<h2>NEXRAD Level-II radar image(s) [KLWX BREF]</h2>
<p align="left">
Generated Mon, 11 Apr 2022 21:04:51 UTC by https://weather.ral.ucar.edu/radar
<br clear="all" />
Please wait for <U>18</U> images to load.<br clear="all" />
</p>
<p align="left">
<hr size="4" width="75%" />
<!-- Container elements in which SciAnimators will go -->
<div id="scianimator"></div>
<!-- Include jQuery -->
<script src="/assets/js/jquery-1.4.4.min.js"></script>
<!-- Include SciAnimator script. Choose your compression level. -->
<script src="/assets/js/jquery.scianimator.min.js"></script>
<!-- <script src="/assets/js/jquery.scianimator.js"></script> -->
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
$('#scianimator').scianimator({
'controlPosition': 0,
'images': ["../data/radar/20220411/KLWX/BREF/KLWX_20220411_190900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_191500_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_192200_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_192900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_193600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_194200_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_194900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_195600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_200300_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_201000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_201600_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_202300_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_203000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204000_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204500_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_204900_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_205400_BREF_gray.png","../data/radar/20220411/KLWX/BREF/KLWX_20220411_205800_BREF_gray.png"],
'theme': 'dark',
'delay': 250,
'delayStep': 25,
'dwellMultiplier': 4,
'utf8': false
}).scianimator('play');
});
/*]]>*/
</script>
</p>
</body>
</html>
My question is: how would I be able to parse that response, to get the images array from the response shown? The images array is under $('#scianimator').scianimator({. I would like to take that array and be able to use it with scianimator, but I can do that myself.
I would just like to know how I can extract that array from the response to be used later.
You could use a regular expression to extract the data
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
if (req.readyState === 4) {
var response = req.responseText;
var matches = response.match(/'images':\s*(\[.+?\])/);
if (matches){
img_arr = JSON.parse(matches[1]);
console.log(img_arr);
}
else{
console.log(':(');
}
}
};
req.open('GET', getURL());
req.send(null);
function getURL(){
return 'https://circumvent-cors.herokuapp.com/https://weather.rap.ucar.edu/radar/displayRad.php?icao=KLWX&prod=BREF&bkgr=gray&endTime=-1&duration=2';
//return `data:text/html,%3C!doctype%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3ENEXRAD%20Level-II%20radar%20image(s)%20%5BKLWX%20BREF%5D%3C%2Ftitle%3E%0A%20%20%20%20%3Cmeta%20charset%3D%22utf-8%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Type%22%20content%3D%22text%2Fhtml%3B%20charset%3DISO-8859-1%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22Content-Language%22%20content%3D%22en-us%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20name%3D%22author%22%20content%3D%22Gregory%20Thompson%22%20%2F%3E%0A%20%20%20%20%3Cmeta%20name%3D%22copyright%22%20content%3D%22(c)%20Copyright%20UCAR-University%20Corporation%20for%20Atmospheric%20Research%20All%20Rights%20Reserved%22%20%2F%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2Fassets%2Fcss%2Freset.css%22%20%2F%3E%0A%20%20%20%20%3C!--%20Include%20the%20SciAnimator%20CSS%20--%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22%2Fassets%2Fcss%2Fscianimator.css%22%20%2F%3E%0A%3C%2Fhead%3E%0A%3Cbody%20bgcolor%3D%22%23FFFFFF%22%3E%0A%20%20%3Ch2%3ENEXRAD%20Level-II%20radar%20image(s)%20%5BKLWX%20BREF%5D%3C%2Fh2%3E%0A%20%20%3Cp%20align%3D%22left%22%3E%0A%20%20%20%20Generated%20Mon%2C%2011%20Apr%202022%20%2021%3A04%3A51%20UTC%20by%20%3Ca%20href%3D%22https%3A%2F%2Fweather.ral.ucar.edu%2Fradar%22%3Ehttps%3A%2F%2Fweather.ral.ucar.edu%2Fradar%3C%2Fa%3E%0A%20%20%20%20%3Cbr%20clear%3D%22all%22%20%2F%3E%0A%20%20Please%20wait%20for%20%3CU%3E18%3C%2FU%3E%20images%20to%20load.%3Cbr%20clear%3D%22all%22%20%2F%3E%0A%20%20%3C%2Fp%3E%0A%20%20%3Cp%20align%3D%22left%22%3E%0A%20%20%3Chr%20size%3D%224%22%20width%3D%2275%25%22%20%2F%3E%0A%3C!--%20Container%20elements%20in%20which%20SciAnimators%20will%20go%20--%3E%0A%3Cdiv%20id%3D%22scianimator%22%3E%3C%2Fdiv%3E%0A%3C!--%20Include%20jQuery%20--%3E%0A%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery-1.4.4.min.js%22%3E%3C%2Fscript%3E%0A%3C!--%20Include%20SciAnimator%20script.%20Choose%20your%20compression%20level.%20--%3E%0A%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery.scianimator.min.js%22%3E%3C%2Fscript%3E%0A%3C!--%20%3Cscript%20src%3D%22%2Fassets%2Fjs%2Fjquery.scianimator.js%22%3E%3C%2Fscript%3E%20--%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F*%3C!%5BCDATA%5B*%2F%0AjQuery(function(%24)%20%7B%0A%24('%23scianimator').scianimator(%7B%0A%20%20'controlPosition'%3A%200%2C%0A%20%20'images'%3A%20%5B%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_190900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_191500_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_192200_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_192900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_193600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_194200_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_194900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_195600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_200300_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_201000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_201600_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_202300_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_203000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204000_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204500_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_204900_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_205400_BREF_gray.png%22%2C%22..%2Fdata%2Fradar%2F20220411%2FKLWX%2FBREF%2FKLWX_20220411_205800_BREF_gray.png%22%5D%2C%0A%20%20'theme'%3A%20'dark'%2C%0A%20%20'delay'%3A%20250%2C%0A%20%20'delayStep'%3A%2025%2C%0A%20%20'dwellMultiplier'%3A%204%2C%0A%20%20'utf8'%3A%20false%0A%7D).scianimator('play')%3B%0A%7D)%3B%0A%2F*%5D%5D%3E*%2F%0A%3C%2Fscript%3E%0A%20%20%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E`;
}
If I understand the situation correctly,
the data isn't contained in the html sent by the browser;
instead the html contains some js that fetches the data when a broswer renders it.
I would say you have 2 options:
the heavy one (but robust) -
use a library like Puppeteer to automate a browser to visit this url and to perform a querySelector there.
the light one (that works more often that you'd think) -
visit your link, open chrome's Network panel, and search what request the page has sent to get the actual data. it's probably a simple POST request
I am learning JavaScript without jQuery.
Right now I am trying to pass some data from an input field to php and than pass a $variable from php to javascript. In jQuery this is easy with $.ajax.
But how do I do this with ONLY JavaScript? Here is my attempt. Right now I only want to pass the $_POST content from the inputfield. I didn't do any validation at this moment.
My plan is to make a validation with php and then pass an error message or more than one. Or in case of success an success message.
But out of my console log I am only getting NULL.
window.onload = function () {
var Input = document.querySelector('input#Input');
var InputButton = document.querySelector('button.formBtn');
InputButton.onclick = function () {
var InputRequest = new XMLHttpRequest();
InputRequest.open("POST", "ajax.php", true);
InputRequest.send();
InputRequest.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var obj = JSON.parse(InputRequest.response)
console.log(obj);
}
}
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Example</title>
<style>
#Input {
width: 200px;
height: 15px;
padding: 10px 0;
text-indent: 5px;
}
#Input:focus {
outline: none;
border: 1px solid lightblue;
}
</style>
</head>
<body>
<form name="form" action="ajax.php" method="post">
<input type="text" id="Input" name="inputTest">
<button type="submit" class="formBtn">Absenden</button>
</form>
<script src="ajax.js"></script>
</body>
</html>
<?php
$inputResponse = $_POST["inputTest"];
echo json_encode($inputResponse)
?>
You are missing a line and need to modify your send() line for sending POST content:
// You need to send the type
InputRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Send the post values in the send
InputRequest.send('key=value&key2=value2');
In the case of the send() you have to turn the keys and values to a query string. I think this is why so many use jQuery, it's done all this for you.
I've been searching for the example of getting data by using ajax without onclick function but most of the example that i found was within onclick funtion.
Here is the html that i successfully get the data by using Onclick funtion
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New document</title>
<script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>
<script type ='text/javascript' src='js/testScript.js'></script>
<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
content goes here
<aside id="offer" onclick ="loadDoc('getData.php',myFunction)">
click here
</aside>
</body>
here is the script
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("offer").innerHTML =
xhttp.responseText;
}
Now, i wanted get the data without the onclick function.
I want the data show once i open the html.
Can someone provide me some link or gv me an example ??
Body onload doesnt required. You can directly use window onload function in JS
JS
window.onload = function() {
loadDoc('getData.php',myFunction)
};
All you need to do is call the function elsewhere for instance you could set it to be called when the window is loaded.
Window.onload = loadDoc('getData.php',myFunction)
You can use
<body onload="loadDoc('getData.php',myFunction);">
A third solution could be to add a new DOMContentLoaded event to send the query after the browser render the page.
It should be something like this :
document.addEventListener('DOMContentLoaded', loadDoc);
You have bound ajax call to an event onclick where what you want is at page load.
So replace the onclick to onload
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New document</title>
<script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>
<script type ='text/javascript' src='js/testScript.js'></script>
<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
content goes here
<aside id="offer" onload ="loadDoc('getData.php',myFunction)">
click here
</aside>
</body>
below code will ideally work if the page of same domain.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New document</title>
<script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>
<script type ='text/javascript' src='js/testScript.js'></script>
<script type ='text/javascript'>
$(document).ready(function(){
$( "#offer" ).load( 'getData.php' );
});
</script>
<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
content goes here
<aside id="offer" >
click here
</aside>
</body>
Call your function in window.onload event instead of onclick
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New document</title>
<script type = 'text/javascript' src='js/jquery-2.2.0.js'></script>
<script type ='text/javascript' src='js/testScript.js'></script>
<?php
include_once("database_conn_getOffers.php");
?>
</head>
<body>
content goes here
<aside id="offer">
Your function has been executed onload of document
</aside>
</body>
here is the script
window.onload = function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("offer").innerHTML =
xhttp.responseText;
};
Here is my JS function:
function checkError() {
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
and then in my body paragraph I have:
<?php echo '<script> checkError();</script>' ?>
It doesn't have any errors calling it. But the function does nothing on my page. Any thoughts? I've tried putting the JS script in the page and in a JS file and correctly called for its inclusion.
Full script:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>
TURNS OUT JS Function is UNDEFINED. Ugh, can't figure out why (thought I fixed this problem a while back lol)
try like this:
<html>
<head>
<meta charset="UTF-8">
<title>Secure Login</title>
<script type="text/JavaScript" src="js/functions.js"></script>
<link href="stylesheets/mainStyle.css" rel="stylesheet" type="text/css">
<link href="stylesheets/formStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function checkError(){
var field = 'error';
var url = window.location.href;
document.write('test');
window.alert('please work');
if(url.indexOf('?' + field + '=') != -1)
document.write('The username and password do not match. Do not use your full email.');
return true;
}
<?php
echo "checkError();";
?>
</script>
</head>
<body>
<?php include('header.php'); ?>
<div id="mainContent">
<h1>Member Login</h1>
<div id="mainParaText">
<?php echo '<script> checkError();</script>' ?>
</div>
</body>
</html>
JS is client side and PHP is server side.
That means that everything in PHP code will be processed on server and then "echoed" to your browser where you get undefined error.
When debugging this you should always check source code in the browser first so you see exactly what your server echoed.
I'm guessing a bit but try with double quotes instead of single.
And not related to the question ...
You are checking username and password with JS? How exactly will you do this? With ajax call back to the server? If you check with JS that means password should be in the source code somewhere and that is NOT secure. Username / pass validation should always be made on serverside (either with ajax request or usual submit form).