I am new in learning JavaScript and AJAX.
For some reason I am having problem after executing the code. It's returning the BAD PARAMETERS after I run the code.
I want to show random and ascii generated code after the used click on the button called "generate".
<html>
<head>
<title>Pin Gen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/pingen.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main">
<h1>PIN Generator</h1>
<!--input 1-->
<input type="text" name="type" placeholder="Your Name">
<!--input 2-->
<select name="timezone">
<option>Choose Method</option>
<option>ASCII</option>
<option>Random</option>
</select>
<input id="btn" type="button" value="generate">
</div>
<div id="pin">
Your PIN Will Appear Here
</div>
<script>
$(document).ready(function () {
var launchAjax = function () { // event handler for button click
$.get(
"php/pingen.php/",
{
name: $("input[name=timezone]").val(),
method: $("input[name=type]").val()
},
function(data){
$("#pin").html(data);
}
);
};
$("#btn").click(launchAjax); // adds the event handler
});
</script>
</body>
and my php file:
header("Content-type: text/plain");
sleep(rand(0,2)); // simulate slow connection
$name = filter_input(INPUT_GET, "name", FILTER_SANITIZE_STRING);
$method = filter_input(INPUT_GET, "method", FILTER_SANITIZE_STRING);
if ($name === null || $method === null || $method !== "ASCII" &&
$method !== "Random" || $name === "") {
echo "BAD PARAMETERS";
} else {
if ($method === "Random") {
echo rand(100001, 999999);
} else {
$pin = 100001;
for ($i = 0; $i < strlen($name); $i++) {
$pin += ord($name)*ord($name)*ord($name);
}
echo $pin % 1000000;
}
}
You have selector issue with "input[name=timezone]". You don't have such element. Try using
$("select[name=timezone]")
instead of
$("input[name=timezone]")
1st use #ID in element select option
<select name="timezone" id="timezone">
<option>Choose Method</option>
<option>ASCII</option>
<option>Random</option>
</select>
and assign it in Ajax
name: $("#timezone").val(),
in PHP file your if santx not logic use this.
if ( (!$name || !$method) && ( $method !== "Random" || $method !== "ASCII" ) ) { /*code here*/ }
i hope this code help you HTML
<html>
<head>
<title>Pin Gen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/pingen.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main">
<h1>PIN Generator</h1>
<!--input 1-->
<input type="text" name="type" placeholder="Your Name">
<!--input 2-->
<select name="timezone" id="timezone">
<option>Choose Method</option>
<option>ASCII</option>
<option>Random</option>
</select>
<input id="btn" type="button" value="generate">
</div>
<div id="pin">
Your PIN Will Appear Here
</div>
<script type="text/javascript">
$( document ).ready(function() {
var launchAjax = function () { // event handler for button click
$.get(
"php/pingen.php/",
{
name: $("#timezone").val(),
method: $("input[name=type]").val()
},
function(data){
$("#pin").html(data);
}
);
};
$("#btn").click(launchAjax); // adds the event handler
});
</script>
</body>PHP code
<?php header("Content-type: text/plain"); sleep(rand(0,2)); // simulate slow connection $name = filter_input(INPUT_GET, "name", FILTER_SANITIZE_STRING); $method = filter_input(INPUT_GET, "method", FILTER_SANITIZE_STRING); if ( (!$name || !$method) && ( $method !== "Random" || $method !== "ASCII" ) ) { echo "BAD PARAMETERS"; } else { if ($method === "Random") { echo rand(100001, 999999); } else { $pin = 100001; for ($i = 0; $i < strlen($name); $i++) { $pin += ord($name)*ord($name)*ord($name); } echo $pin % 1000000; } }
</div>
There were some errors in php and jquery code. find working code bellow
File 1
<html>
<head>
<title>Pin Gen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/pingen.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<h1>PIN Generator</h1>
<!--input 1-->
<input type="text" name="type" id="type" placeholder="Your Name">
<!--input 2-->
<select name="timezone" id="timezone">
<option value="">Choose Method</option>
<option value="ASCII">ASCII</option>
<option value="Random">Random</option>
</select>
<input id="btn" type="button" value="generate">
</div>
<div id="pin">
Your PIN Will Appear Here
</div>
<script>
$(document).ready(function () {
$("#pin").html('.....');
var launchAjax = function () { // event handler for button click
var t = $("#timezone").val();
var n = $("#type").val();
console.log(t);
console.log(n);
$.get(
"my.php",
{
name: t,
method: n
},
function(data){
$("#pin").html(data);
}
);
};
$("#btn").click(launchAjax); // adds the event handler
});
</script>
</body>
File 2 (my.php)
<?php
header("Content-type: text/plain");
sleep(rand(0,2)); // simulate slow connection
$name = filter_input(INPUT_GET, "name", FILTER_SANITIZE_STRING);
$method = filter_input(INPUT_GET, "method", FILTER_SANITIZE_STRING);
if (($name === null || $method === null || $name === "") && ($method !== "ASCII" ||
$method !== "Random") ) {
echo "BAD PARAMETERS";
} else {
if ($method === "Random") {
echo rand(100001, 999999);
} else {
$pin = 100001;
for ($i = 0; $i < strlen($name); $i++) {
$pin += ord($name)*ord($name)*ord($name);
}
echo $pin % 1000000;
}
}
I hope this will help you.