javascript 在HTML表单中从着陆页将数据填充到表单中

sqserrrh 于 2023-06-04 发布在 Java

关注(0)|答案(2)|浏览(217)

我创建了下面的html表单

<form>
<input type="text" name="name1" id="name1" >
<input type="text" name="lastname" id="lastname">
<input type="text" name="age" id="age">
<input type="button">Submit</button>
</form>

我想输入数据在此形式从着陆页（着陆页将显示所有以前输入的记录）
Actual form landing page from where i want o add data into form by clicking Add
我可以用java script或其他方法吗？？

JavaScript

来源：https://stackoverflow.com/questions/76389438/fill-data-into-form-from-landing-page-in-html-form

2条答案

按热度按时间

kognpnkq1#

<!DOCTYPE html>
<html>
<head>
  <title>Form</title>
  <script>
    // Retrieve and populate the form fields with data from localStorage
    window.onload = function() {
      var storedData = JSON.parse(localStorage.getItem('formData'));
      if (storedData) {
        document.getElementById('name1').value = storedData.name1;
        document.getElementById('lastname').value = storedData.lastname;
        document.getElementById('age').value = storedData.age;
      }
    };

    // Save the form data to localStorage
    function saveFormData() {
      var name1 = document.getElementById('name1').value;
      var lastname = document.getElementById('lastname').value;
      var age = document.getElementById('age').value;

      var formData = {
        name1: name1,
        lastname: lastname,
        age: age
      };

      localStorage.setItem('formData', JSON.stringify(formData));

      alert('Form data saved!');
    }
  </script>
</head>
<body>
  <form>
    <input type="text" name="name1" id="name1">
    <input type="text" name="lastname" id="lastname">
    <input type="text" name="age" id="age">
    <input type="button" value="Submit" onclick="saveFormData()">
  </form>
</body>
</html>

赞(0）回复(0）举报 2023-06-04

eyh26e7m2#

所以让我们假设你的第一个页面是在这个url上，https://example.com/list，然后表单页面是在https://example.com/form上
在列表页中，您必须将值路径到表单页，这样在表中您将看到类似于以下内容的内容

<tr>
  ....
  <td><a href="/form">add</a></td>
</tr>

现在，我们有多种方法来实现您想要的：

你可以从记录中传递一个标识符，比如id，这样在这种情况下，url看起来就像这样<a href="/form?id=123">add</a>，或者如果你有路由处理程序，你可以捕获路径参数，它可以是<a href="/form/123">add</a>，然后在表单页面中，你可以捕获这个标识符，制作一个 AJAX 来获取用户信息，然后根据ajax上的响应使用JS更新输入的值
你可以在url中传递所有你需要的信息，这样在这种情况下url看起来就像这样<a href="/form?name1=name1&lastname=last&age=49">add</a>，在这种情况下，你不需要在表单页面上 AJAX ，因为你已经在请求中拥有了所有的数据。

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 在HTML表单中从着陆页将数据填充到表单中

2条答案

相关问题

热门标签

最新问答