The code below works so far. It's the next step that has me stumped. Originally, I wanted to write a Javascript that passes a variable to a PHP file and calls the PHP file so a text file on my web page is updated with the new value. I've spent a lot of time researching similar problems posted, but I can't seem to get any of them to work, some involving Ajax, with which I'm unfamiliar. Sounds like it's a matter of the php working at the server end and the script at the client end and "never the twain shall meet."
The php code gets the value from the first button click ("Test") and writes it to a file.
The script gets the value from a text box entered by the user.
Is there any way I can get the php code to run again with the value from the text box so it overwrites the text in "testfile.txt"?
Is there a way to run the window.open('JSinPHPtoWrite.php?jsVar=Test') command that's in the first button as part of the script to rerun the php code or even update that button command so another click of the button contains the value in the text box?
<?php
$myFile = "testFile.txt";
$fh = fopen($myFile, "w") or die("can't open file");
$MSG=$_GET["jsVar"]; //gets value from button click below
fwrite($fh, $jsVar);
$fh = fopen($myFile, "r");
echo fgets($fh); //read contents of file
fclose($fh);
?>
<script>
function getTextBoxValue() {
var jsVar = document.getElementById("newVar").value;
}
</script>
<button onClick="window.open('JSinPHPtoWrite.php?jsVar=Test')">Send JavaScript to PHP</button>
<button onClick="getTextBoxValue()">Get Text Box Value</button>
<button onClick="window.close()">Close Window</button>
New String: <input type="text" id="newVar">
The following code explains how to send a form value through AJAX to a server side script like the one you've written. The PHP code doesn't need to be touched, so I won't list it again.
File index.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jQuery makes life with Ajax easier -->
<script type="application/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Add a cool function called "serializeObject" to jQuery -->
<script type="application/javascript" src="http://github.com/cowboy/jquery-misc/raw/master/jquery.ba-serializeobject.min.js"></script>
<!-- Custom script -->
<script type="application/javascript">
// This function is called when the form is submitted
function handle_submission(e) {
e.preventDefault(); // Don't reload page on form Submit
// Creates a nice object like { 'jsVar': <value> }
var form_data = $(this).serializeObject();
// Send the value to the server
$.ajax({
url: 'myphpscript.php',
type: 'get',
data: form_data,
success: function(result) {
$('div#result_box').html(result)
}
});
}
// This is called once at page load
function page_init() {
$('form#my_form').submit(handle_submission);
}
$(document).ready(page_init);
</script>
</head>
<body>
<form action="myphpscript.php" id="my_form">
<input type="text" name="jsVar"/>
<button type="submit">Submit the value</button>
</form>
<div id="result_box"></div>
</body>
</html>