AJAX won't transfer variable to PHP - javascript

I am trying to transfer input from Javascript to PHP with AJAX but the input will not transfer.
Here is my JS code:
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid;}
div{background-color:blue;}
</style>
</head>
<body>
<div id="comments"> </div>
<br>
<span> Comment: </span> <input id="comment"> <button onclick="getInput()"> Submit Comment </button>
<script>
function getInput(){
var input = document.getElementById("comment").value;
addComment(input);
}
function addComment(input){
var request = new XMLHttpRequest();
request.open("GET","chatroom.php?i="+input,false);
request.send();
}
</script>
</body>
</html>
Here is my PHP Code:
<?php
$input = $_REQUEST["i"];
file_get_contents("chatext.txt",$input);
?>
The PHP code is executed, but the variable is not transferred.

did you mean file_put_contents("chatext.txt", $input)?
php.net/manual/en/function.file-put-contents.php

Related

Google App Script | Script in HTML Page can't call a function outside the html file or a function through library

I have a problem where my script in HTML page can't call a function outside the HTML file or a function through the library. Here is the HTML code:
`<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
<div>
<label for="sheetLink">Google Sheets Link:</label>
<input type="text" id="myInput">
<button id="myButton" onclick="handleButtonClick()">Click me</button>
</div>
<script>
function handleButtonClick() {
var userInput = document.getElementById("myInput").value;
console.log(userInput);
alert(userInput)
let uwow = LibIdentifier.receiveLink();
Logger.log(uwow);
console.log(uwow);
alert(uwow)
userClicked();
}
</script>
</body>
</html>`
I Expect the code to receive variable uwow from another function, and then do alert from result.
I have tried using google.script.run.functionname(). But it does not work.
What actually resulted is an error like this:
Error on Click

Sending data from JavaScript to PHP via XMLHttpRequest

Good day.
I'm trying to send a simple piece of data from one php file (manage.php) to another (view.php).
I cannot send the data via a form, I want to send it via a JS script. Here's my attempt:
var read = function(id) {
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("id=" + id);
}
In view.php, using $_POST["id"] causes an error stating that the index "id" is undefined.
What's the correct way to send the data? Thank you.
Your input is not complete. So I did the full example below that you can follow. I made a function, named readid(id), doing the same thing as you want. Then I call that function from html, when needed.
<!doctype html>
<html lang="fr">
<head>
<meta charset="iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" charset="iso-8859-1">
function readid(id){
"use strict";
console.log("id=", id)
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/cgi-bin/view.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 || this.status === 200){
console.log(this.responseText); // echo from php
}
};
xmlhttp.send("id=" + id);
}
</script>
</head>
<body>
<p>This is a test</p>
<input type="button" name="Submit" value="Submit" id="formsubmit" onClick="readid(id)">
</body>
</html>
view.php
<?php
$logFile = "view.log";
$id = $_POST['id'];
file_put_contents($logFile, $id);
echo $id;
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="formoid" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<label class="title">Name</label>
<input type="text" id="name2" name="name2" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type: 'POST',
data: id,
url: 'PATH_TO_VIEW.PHP',
success: function(data) {
//do something
},
error: function(data){
console.log('Something went wrong.');
}
});
});
</script>
</body>
</html>
Now the data in ajax can be collected numerous e.g. serialized and new FormData(form) to quickly name two.

HTML input to php and then back to input

So, I tried everything that I know and I tried to find everywhere but no luck. I want to paste imdb link into (id="id_imdb") and then when I press button (name="b") I want that link to become variable $hjo and then to execute php script get_info_imdb.php and then return variable $slbl into javascript which will set textarea (name="movie_desc") to echo $slbl.
insert-movie.php
<html>
<body>
<?php
global $hjo;
$hjo = "http://www.imdb.com/title/tt1431045/";
include ("get_info_imdb.php");
?>
<form action="insert_movie.php" method="post" enctype="multipart/form-data">
<div>
<div>
<div>Description:</div>
<div><textarea name="movie_desc" rows="7" cols="50" id="id_desc" value="<?php echo (isset($slbl))?$slbl:'';?>"></textarea></div>
</div>
<div>
<div>Imdb:</div>
<div><input id="id_imdb" type="text" name="movie_imdb" size="50">
<button name="b" type="button">Button</button></div>
</div>
<div>
<div><input type="submit" name="submit" value="Publish"></div>
</div>
</form>
<script type="text/javascript">
function myFunction() {
document.getElementById("id_desc").value = "<?php echo $slbl; ?>";
}
</script>
</body>
</html>
<?php
...here is script to insert in database which is working...
?>
get_info_imdb.php
<?php
include ("simple_html_dom.php");
$html = new simple_html_dom();
$html->load_file($hjo);
$html = $html->find('.summary_text', 0);
$nesto = strip_tags($html);
$nesto = trim($nesto);
$slbl = $nesto;
?>
This is an example to explain how to perform your request through javascript and jQuery. It's only an example, you have to implement it wih your own code:
File get_info_imdb.php:
<?php
$movieID = $_GET['id'];
// Your code to retrieve movie info and chunk of HTML you want put in textarea
echo $TextAreaValue;
?>
Fle insert-movie.php:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
function getHTML()
{
$.get( "get_info_imdb.php?id=tt1431045", function( data ) {
$( "#myTextArea" ).html( data );
});
}
</script>
<form action="YourAction.php" method="YourMethod">
<textarea id="myTextArea"></textarea>
<button id="myButton" onclick="getHTML(); return false;">Click Me</button>
</form>
</body>
</html>
In the <head><script> I load jQuery; In javascript function getHTML() I use jQuery get method to retrieve desired url (I have insert movie id, you can insert variable id with php) and put it into the content of textarea #myTextArea.
In the <form> the <button id="myButton"> call getHTML() js function.
See more about jQuery
See more about jQuery.get method
See an alternative in javascript

How do I use Javascript to access the contents of an HTML p tag

I have 2 php pages
home.php
about.php
I have 1 Javascript page, which I called javascript from home.php.
I want to access the value of the p tag in about.php.
home.php
<!DOCTYPE html>
<html>
<body>
<input type="submit" onclick='myfunction()'>
</body>
</html>
javascript
<script>
function myfunction()
{
}
</script>
about.php
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<p id='demo'>i want to access this value in javascript function</p>.
</body>
</html>
You probably want something in pure javascript like:
<script>
document.getElementById('demo').innerHTML='change the p tag value';
</script>
function myfunction(){
var val= document.getElementById('demo').textContent;
alert(val);
}
FIDDLE
var pTag = document.getElementById('demo').innerHTML;
The variable pTag will now hold the value(text) of your "demo" tag,
ready for you to do what you wish with it.
EDIT:
Using Javascript, set the value of a hidden form field when you change the contents of your tag.
Then pass the values using php, like below...
home.php:
<form action="about.php">
<input type="hidden" name="demo" id="demo" />
<p id="pDemo"> </p>
<button type="submit"></button>
</form>
Then in about.php:
<p id='demo'>
<?php
$demo= $_GET['demo'];
//use your variable "demo'
?>
</p>
This link should help, here.
You can use ajax or you can use load of jquery.
<script>
$(document).ready(function() {
$("#bAdd").load("about.php",function(response,status,xhr){// use if less data to load
var pTag = document.getElementById('demo').innerHTML;
alert(pTag);
});
});
</script>
<input type="hidden" id="bAdd" value="">

JSP update page on button click

I've written a .jsp file whose contents should be updated on click of the button. I tried using appendChild of Javascript but it's not working as this is a .jsp file.
Here's the code:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title> Hello World!</title>
</head>
<p id="demo"><h1> Hello, </h1>
<body>
<br/>Firstname:<input type="text" name="firstname">
<button onclick="myFunction()">Enter</button>
<%= request.getParameter("firstname")
%>
<script>
function myFunction()
{
var node=document.getElementById("demo");
document.getElementById("demo").appendChild(<%= request.getParameter("firstname")%>);
}
</script>
</body>
</html>
I want the output to be " Hello, Dia", If Dia is entered as the firstname and when Enter button is clicked. The firstname should be appended to Hello, !
You have mixed scriptlets inside script . javascript is a client side technology.
While scriptlets are executed in application servers when you compile (they are nothing but the java codes)
Try this ,
<script>
function myFunction()
{
var node=document.getElementById("demo");
var value=<%= request.getParameter("firstname")%>;
document.getElementById("demo").appendChild(value);
}
</script>
Firstly , the click of your button does not take you back to the server , so you wont need to access the value of the text field using a scriptlet , you can do this in plain HTML and Javascript
as follows :
<html>
<head>
<title> Hello World!</title>
</head>
<body>
<div id="demo"><h1> Hello,<div id="displayName"></div> </h1></div>
<br/>Firstname:<input type="text" name="firstName" id="firstName"/>
<button onclick="myFunction()">Enter</button>
<script>
function myFunction()
{
var firstName = document.getElementById("firstName");
document.getElementById('displayName').innerHTML = firstName.value;
}
</script>
</body>
</html>

Categories

Resources