时间戳

首页 > 解决方案 > 如何通过单击按钮在管理页面上执行更新操作？

javascript - 如何通过单击按钮在管理页面上执行更新操作？

问题描述

在此处输入图像描述我的概念是这样的：

我有一个用户，在他的页面上有这个表格：

<form action="#" method="post">
<input type="text" name="name">
<input type="text" name="lname">
<button type="submit" name="submit">Submit</button>
</form>

在管理面板上有这个 div：

<div id="refresh-when-user-clicks-submit">
<p id="name-input-from-user-page">Name: (input name from the form above)</p>
<p id="name-input-from-user-page">Last Name: (input lname from the form above)</p>
</div>

当用户更改他的信息时，需要将表单数据发送到管理面板，并且需要更新 NAME 和 LAST NAME。如何最好地执行此操作？它只需要在用户单击提交时进行更改，并且需要在不刷新页面的情况下进行更新。

您不必为我编写整个代码，但请帮助我获取有关执行此操作所需的语言的一些信息。我的后端是 PHP。感谢您的帮助。

标签： javascriptphp

解决方案

let button = document.querySelector('button[name=submit]');
let name = document.querySelector('input[name=name]');
let lname = document.querySelector('input[name=lname]');

button.addEventListener('click', function() {
  document.querySelector('#name-input-from-user-page').textContent = `Name: ${name.value}`;
    document.querySelector('#lname-input-from-user-page').textContent = `Last Name: ${lname.value}`;
});

推荐阅读