在不提交的情况下保存和加载表单中的数据

时间:2012-05-16 13:08:35

标签: php javascript jquery html forms

我的任务是编写一个相当大的表单的加载/保存功能。这样,用户可以保存他们的工作,然后稍后返回并加载它并继续工作。

我决定使用服务器端存储并将数据本地保存到mysql数据库。我想出了'saveForm',它只是将$ _POST作为一个长字符串存储到列中。

我无法弄清楚如何编写'loadForm'。

我有:

<form id="qa" .. "> 
    <button id="saveForm" type="submit"..."> 
    <button id="loadForm" type="submit"..."> 
    <input type="hidden" id="unique_user_id"..."> 
</form>

<javascript> 
$('#saveForm').bind({
    click: function() {
        $.ajax({ 
            type: 'post',
            url: "/saveForm.php",
            data: $("#qa").serialize(),
            success: function() {
                alert("form was submitted");
            },
        });
        return false;
    },
}); 
<javascript>


saveForm.php:  (PHP & PDO) 
// connect
insert into `saveQAForm` ($_POST['id'],var_export($_POST));

3 个答案:

答案 0 :(得分:1)

当页面被加载时($(document).ready()),执行loadForm函数:向服务器发送一个AJAX请求,它响应数据以填充表单。在这种情况下,服务器必须查询数据库并返回所请求的数据。您可以在不提交任何内容的情况下执行此操作。

以下是一个例子:

<强>客户端:

$(document).ready (loadForm);

function loadForm () {
  $.ajax ({
    url: '/loadForm.php' ,
    success: function (data) {
      $('#firstField').val (data.firstField);
      $('#secondField').val (data.secondField);
    }
  });

服务器端:查询数据库并回显数据

答案 1 :(得分:1)

做这样的事情:

$(document).ready(function() {

    $('#loadForm').bind({
       click: function() {
          $.ajax({ 
             type: 'post',
             url: "/loadForm.php",
             data: 'id=123&token=8ash198hkuhd98yhk',
             success: function(data) {
                $('#first_name').val = data.first_name;
                $('#last_name').val = data.last_name;   
             }
          });
          return false;
       },
    }); 

});

<强> loadForm.php

// Get values
$id = $_POST['id'];
$token = $_POST['token'];

// Check hash value here. Use your preferred
// database method ensuring POST values are filtered first. Then:
if($token == $row['token'])
{
   // Make DB query to get form data and return it as JSON
   return json_encode($row);
}

我认为在检索表单时传递对用户/会话唯一的唯一标记或随机数非常重要,这样其他人就无法请求ID并获取该用户的个人信息。只是一个想法。

答案 2 :(得分:0)

您可以在执行php代码期间加载已保存的数据(如果有),并在表单中填写这些数据字段。这里的Ajax可能没有必要。

<?php //yourform.php (PHP & PDO) 
// connect
select * from `saveQAForm` where user_id = $_COOKIE['user_id']

?><input name="field1" value="<?=(isset($data['field1'])?$data['field1']:""?>" />