javascript - jQuery.get 读取文件并将数据放入表单中

标签 javascript php jquery html forms

我希望脚本执行以下操作:

  1. 在页面加载时,读取带有数字的文本文件(仅一行)
  2. 将数字增加 1
  3. 将数字插入 <input>表格框
  4. 一次<form>提交后,将编号写入文本文件

当表单再次加载时,它将重新运行代码,并且数字将增加 1。这基本上是在表单提交之前用唯一且渐进的数字预先填充字段。

我目前正在使用 jQuery、PHP,当然还有 HTML:

HTML:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
            $.get("http://www.domain.com/tools/formdata.txt");
            function test(){
                $.get('http://www.domain.com/tools/formdata.txt', function(data){
                    x = data++;
                });
            }
        </script>
    </head>
    <body onload="test()"/>
        <form action="save_json.php" method="post">
            Contract: <input type="number" name="contract" id="contract" value="x" /><br     />
            <input type="submit" id="submit" value="Invia" />
        </form>
    </body>
</html>

PHP

<?php

if(isset($_POST['contract'])) {
    // if form fields are empty, outputs message, else, gets their data
    if(empty($_POST['contract'])) {
        echo 'All fields are required';
    }
    else {
        // adds form data into an array
        $formdata = $_POST['contract'];

        if(file_put_contents('/var/www/domain/tools/formdata.txt', $formdata))     echo 'Data successfully saved';
        else echo 'Unable to save data, try again or contact IT';
    }
}
else echo 'Form fields not submitted';
?>

最佳答案

首先:我建议您使用 PHP file_get_contents('formdata.txt') 来代替 javascript。在文件的开头,然后回显它。这样,该值将在加载时出现,而不必等待 HTML 呈现和 javascript 运行。此外,这是一种更好的做法,如果您选择扩展页面,可以让您做更多的事情。

但是,以下是所提出问题的解决方案:

<html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
        var x;
        function test(){
            $.get('file.txt', function(data){
                console.log('data',data);
                var x = ++data;
                console.log('x',x);
                $('#contract').val(x);
            });
        }
    </script>
    </head>
    <body onload="test()"/>
        <form action="aoeu.php" method="post">
            Contract: <input type="number" name="contract" id="contract" /><br     />
            <input type="submit" id="submit" value="Invia" />
        </form>
    </body>
</html>

注意事项:

  1. 关闭您的<script>标记包含 jquery 库,然后在其后面打开另一个标记。
  2. 无需执行第一个 $.get() - 将其保存到函数中。
  3. var x = 数据++; - 这会在将数据的值分配给 x 后递增数据。所以,它永远不会增加。相反,执行++data,它会在之前递增。
  4. 之后您需要将其放置在某个地方。您如何获得输入(值='x')只是尝试将字符“x”放入输入中。使用 javascript 编辑函数值,如我的示例所示。

你的 PHP 工作正常。

关于javascript - jQuery.get 读取文件并将数据放入表单中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34026660/

相关文章:

javascript - 如何从 react 组件进行远程服务器调用?

javascript - jquery 使用自定义属性更改 li 内的值

php - 通过单个 php mysqli_query 函数运行多个查询

php - mm表中多重AND的mysql语句

javascript - 在 Node 中运行 PHP 并将数据解析回 index.html

javascript - 多个脚本标签在我的页面中不起作用

PHP + MySQL : Big CSV file import

asp.net - jQuery 单击事件处理程序为复选框调用两次

javascript - 将 'Grooveshark' 条目添加到 Google 的黑色导航栏

Javascript 转义除文本相关的所有 HTML 标签(<h1>、<p>、<img> 等)