How to call a function from html button - javascript

I'm trying to call a function from a button in the html body when onclick. This function sends the id to a php for processing some information.
The problem is that when I press the button, it is not calling the function. Can anyone tell me what I'm doing wrong?
Thank you
This is the code,
<html>
<head>
<title>Carrental</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
function delete(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="delete(9)">Erase</button>
</body>
</html>

delete is an operator. You cannot use it as the name of a variable.
Rename the function.

You need to change the delete to another name function , delete is an operator , you can see the list of operators here : Expressions and operators
function ajaxCall(id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var available = this.responseText;
}
};
xhttp.open("GET", "add_delete_session.php?action=delete&id="+id, true);
xhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="ajaxCall(9)">Erase</button>
</body>

You cant call the function delete. Just Rename it :)

The problem is delete is operator in JavaScript
The JavaScript delete operator removes a property from an object; if no more references to the same property are held, it is eventually released automatically.
So your code try to delete the object or element mentioned after it and is not calling method you wrote.
As per example in #Pluto https://stackoverflow.com/a/62086635/124891
You have to rename the method and call it.

Related

Javascript onclick function being called on page load

I have a simple Javascript function to be called when a button on the page is clicked. But it is getting called as soon as the page loads. Can anyone please tell me what the problem here is?
The HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn">ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>
While the 'script.js' file is as follows.
var url = "example.txt";
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("demo").innerHTML = xhttp.responseText;
}
var btn = document.getElementById("btn");
btn.onclick = loadDoc(url, myFunction);
You must attach an event listener that invoke the function when a user clicks a button:
btn.addEventListener('click', () => {
loadDoc(url);
});
The last line of your script is calling the function instead of assigning the handler to it. Since you have arguments that you want to call it with, you need to use something to bundle the arguments and function together for when it is called. If you replace the last line with the following, it should work:
btn.onclick = loadDoc.bind(undefined, url, myFunction) // "this" value is not needed, so it is left undefined
use an arrow function like this:
btn.onclick = () => loadDoc(url, myFunction);
You are explicitly calling loadDoc() function in your JS file.
You should try this -
var url = "https://jsonplaceholder.typicode.com/posts";
function loadDoc() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn" onclick='loadDoc()'>ClicMe!</button>
<div id="demo"></div>
<script src="script.js"></script>
</body>
</html>

How to correctly call variables from within an AJAX function

I am attempting to make a reusable AJAX base to be used in other function within same file. The main purpose with the reusable AJAX base is to minimize the AJAX code, thus reuse the base in other functions.
It works fine when having lines without calling variables. (see lines marked with "these lines works". When attempting to call the AJAX base function from the other function, thus including a variable to pass to AJAX base, it does not work.
Question: Specific to AJAX, how is the correct way of calling external variables from within the AJAX function?
Index.json -file content:
{
"firstName": "John",
"lastName": "Doe"
}
Index.js -file content:
/************************************/
/* Ajax base to fetch external json */
/************************************/
function ajaxBase() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
var response = JSON.parse(xhttp.responseText);
//document.getElementById("boxOne").innerHTML = response.firstName; // This line works.
//document.getElementById("boxTwo").innerHTML = response.lastName; // This line works.
document.getElementById("boxOne").innerHTML = response.[fname];
document.getElementById("boxTwo").innerHTML = response.[flname];
}
};
xhttp.open("GET", "index.json", true); // Define source json data file.
xhttp.send();
}
function changeFirstName() {
ajaxBase(fname = "firstName"); // Passing in variable into function.
}
function changeLastName() {
ajaxBase(lname = "lastName"); // Passing in variable into function.
}
Index.html code:
<!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">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<button type="button" name="button" onclick="changeFirstName()">Change first-Name</button>
<button type="button" name="button" onclick="changeLasttName()">Change last-Name</button>
<div id="boxOne" class="boxOne">First-Name[placeholder]</div>
<div id="boxTwo" class="boxTwo">Last-Name[placeholder]</div>
<script src="index.js"></script>
</body>
</html>
You could try defining two parameters on ajaxBase and checking them inside the function's body. When you call it, assign one of them to null to indicate which value does not need to change.
/************************************/
/* Ajax base to fetch external json */
/************************************/
function ajaxBase(fname, lname) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
var response = JSON.parse(xhttp.responseText);
//document.getElementById("boxOne").innerHTML = response.firstName; // This line works.
//document.getElementById("boxTwo").innerHTML = response.lastName; // This line works.
if (fname !== null)
document.getElementById("boxOne").innerHTML = response.[fname];
if (lname !== null)
document.getElementById("boxTwo").innerHTML = response.[flname];
}
};
xhttp.open("GET", "index.json", true); // Define source json data file.
xhttp.send();
}
function changeFirstName() {
ajaxBase("firstName", null);
}
function changeLastName() {
ajaxBase(null, "lastName");
}

Ajax Post versus GET

I am trying to implement an AJAX Example which perfectly works with the GET request, but I am not able to transmit via POST. What am I doing wrong ? The POST object received by PHP is always empty. Thanks for any advice!
HTML & JavaScript:
<html>
<head>
<title> Create a new user</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function checkUser(){
xhttp = new XMLHttpRequest();
xhttp.open("POST","usercheck.php",true);
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var data = xhttp.responseText;
alert("Benutzer" + data);
}
}
xhttp.send("username=" + encodeURIComponent(document.getElementById("username").value));
}
</script>
</head>
<body>
<p>User:</p><br>
<input type="text" id="username" name="username">
<button onclick="checkUser();"> Check </button>
</body>
</html>
PHP Code:
<?php
$usernames = array("admin", "gast", "paul");
$validate_pattern = "/^[a-z0-9]{4,20}$/";
if (!isset($_POST["username"])) {
die("{valid:false,message:false}");
}
if (in_array($_POST["username"], $usernames)) {
die("{valid:false,message:'Username is used!'}");
}
if (!preg_match($validate_pattern, $_POST["username"])) {
die("{valid:false,message:'Username wrong.'}");
}
echo "{valid:true,message:false}";
?>
I found the bug in the code. I missed to set the request header, which was not part of the tutorial unfortunately:
xhttp.setRequestHeader('Content-Type','x-www-form-urlencoded');

XMLHttpRequest can get data to display on webpage

I am trying to retrieve data from a web page and then display it on my webpage, nothing fancy atm just display it so it cam be read, however I am not sure how to do this, this is what I have so far(Also sorry if I've not done the formatting properly I'm still new to this):
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title> Night Out In Glasgow!!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
<script src="pull.js"></script>
</head>
<body>
<form action = "">
<p><button type = "button" onclick ="getData()">Get The Data</button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
This is then my JS which is in a separate file called pull.js, which I have linked to in my HTML, hope this clears up any confusion form original post.
/*jslint node: true, browser: true */
"use strict";
/*jslint node: true, browser: true */
"use strict";
function getData(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ratings.food.gov.uk/OpenDataFiles/FHRS776en- GB.xml");
xmlhttp.onreadystatechange = checkData;
xmlhttp.send(null);
function checkData() {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
//We've got a response
alert(xmlhttp.responseXML);
}
}
else{
//Somethings went wrong
alert("Error: " + xmlhttp.status + ": " +xmlhttp.statusXML);
}
}
}
Try it in this order:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","...");
xmlhttp.onreadystatechange = {
if(xmlhttp.status == 4){
if(xmlhttp.status == 200){
...
};
xmlhttp.send();
I'm not sure with your case, but the same origin policy restricts contents retrieved via XMLHttpRequest to be accessed from a website with different origin. Go check this StackExchange answer

reading txt file from url (javascript)

I'm trying to read .txt files from external links the user provides, so I can later use them in an app. For now I'm just trying to show them in a div (.output). I got so far, and now I got stuck, don't really know how to proceed.
function getText(url){
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
if (type.indexOf("text") !== 1) {
return request.responseText;
}
}
}
}
$(".url-input").change(function() {
getText($(".url-input").value);
});
.output {
width:500px;
height:500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Ugh</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="output"></div>
<input class="url-input" type="url">
</body>
</html>
JavaScript get (notice you have to input the file name with the extension (.txt):
just change the value to val():
$(".url-input").change(function() {
getText($(".url-input").val());
});
jQuery get:
replace all the javascript with these few lines:
$(".url-input").change(function() {
$.get($(this).val(), function( data ) {
$('.output').html(data);
});
});
This is much better option, because the Ajax Get is an asynchronous call, so you want to update the output value on the callback.
By the way, you should do some validation on that use input before you make the Ajax call. Also, to remove the need to add the ".txt" in the input change it to:
$(".url-input").change(function() {
$.get($(this).val()+'.txt', function( data ) {
$('.output').html(data);
});
});

Categories

Resources