简体   繁体   English

如何使用html中的php将文本框的值保存到.txt文件,而无需重新加载或重定向页面?

[英]How to save the value of a textbox to a .txt file using php in html without reloading or redirecting the page?

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. 我想在网页上创建一个文本框,该文本框将从用户那里获取一个数字,并且该数字将保存在一个.txt文件中。 Firstly I have made the textbox in the html and made a form. 首先,我在html中制作了文本框,并制作了表格。 I have created a submit button to run the php and made it as the action of the form. 我创建了一个提交按钮来运行php,并将其作为表单的操作。 This php file contains the code for saving the data. 此php文件包含用于保存数据的代码。 But whenever I am trying to submit, the html is get refreshed or it is redirecting to the php file. 但是,每当我尝试提交时,html就会刷新或将其重定向到php文件。 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: 以下是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是:

<?php 
$filename ="noi_RS.txt";
$file = fopen( $filename, "w" );
fwrite( $file, $_GET['iteration_no']);
fclose( $file );
?>

Modified Answer,Fix an error of value stored as null, 修改答案,修复存储为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文件,

<?php 
$text1 = $_POST['value1'];
$filename ="noi_RS.txt";
$file = fopen( $filename, "w" );
//$map = $_POST['iteration_no'];
fwrite( $file, $text1);
fclose( $file );
?>

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 尝试使用onsubmit event, event.preventDefault()防止form提交,在php encodeURIComponent() src设置为预期查询字符串的script元素作为encodeURIComponent()参数,在script onload追加script元素到head元素, onerror事件删除script元素

 <!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> 

You'll need to use javascript if you want to do something like dynamic form submission. 如果要执行动态表单提交之类的操作,则需要使用javascript。

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. 因此,您将需要javascript-特别是您需要发送AJAX请求。 Here's some information to get you started . 这是一些使您入门的信息

You're about to start on a journey of wild endeavours - cuz javascript ain't easy. 您即将开始疯狂的旅程-cuz javascript并不容易。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM