How to save the value of a textbox to a .txt file using php in html without reloading or redirecting the page?
Question
I want to make a textbox on an webpage which will take a number from user and that number will be saved in a .txt file. Firstly I have made the textbox in the html and made a form. I have created a submit button to run the php and made it as the action of the form. This php file contains the code for saving the data. But whenever I am trying to submit, the html is get refreshed or it is redirecting to the php file. But I need to save the value of textbox by submit button, not to refresh whole page. How to do? The following is the 'form' part of html:
<form action="write2file.php" method="GET"/>
Iteration number:<br>
<input type="number" name="iteration_no"/>
<input type="submit" id="save_run" value="Run"/>
</form>
And the php is:
<?php
$filename ="noi_RS.txt";
$file = fopen( $filename, "w" );
fwrite( $file, $_GET['iteration_no']);
fclose( $file );
?>
3 answers
solution1
4 2016-01-29 19:37:26
Modified Answer,Fix an error of value stored as null,
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script>
function callSubmit(){
var dataset = {"value1": document.getElementById('itnumber').value };
$.ajax({
url: 'write2file.php',
type: 'POST',
data: dataset,
success: function() {
alert('Success');
}
});
}
</script>
</head>
<body>
<form action="" method="GET" onsubmit="callSubmit()">
Iteration number:<br>
<input type="number" name="iteration_no" id="itnumber"/>
<input type="submit" id="save_run" value="Run" />
</form>
</body>
</html>
PHP file like this,
<?php
$text1 = $_POST['value1'];
$filename ="noi_RS.txt";
$file = fopen( $filename, "w" );
//$map = $_POST['iteration_no'];
fwrite( $file, $text1);
fclose( $file );
?>
solution2
2 2016-01-29 18:59:15
Try using onsubmit event , event.preventDefault() to prevent form submission , create script element with src set to expected query string at php as parameter to encodeURIComponent() , append script element to head element, at script onload , onerror events remove script element
<!DOCTYPE html> <html> <head> </head> <body> <form> Iteration number:<br> <input type="number" name="iteration_no"/> <input type="submit" id="save_run" value="Run"/> </form> <script> document.forms[0].onsubmit = function(event) { event.preventDefault(); var val = this.children["iteration_no"].value; var script = document.createElement("script"); script.type = "text/javascript"; script.onload = script.onerror = function() { console.log(this.src.split("?")[1]); this.parentNode.removeChild(this) }; script.src = "?iteration_no=" + encodeURIComponent(val); document.head.appendChild(script); } </script> </body> </html>
solution3
0 2016-01-29 18:12:30
You'll need to use javascript if you want to do something like dynamic form submission.
The essence of it is that you want the user to do something, and then behind the scenes respond to that action. To the user, you might just inform them "Hey, I got it".
So you'll need javascript - specifically you need to send an AJAX request. Here's some information to get you started .
You're about to start on a journey of wild endeavours - cuz javascript ain't easy.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.