javascript - 如何在表单中设置操作属性以转到同一html页面中的另一个表单以及如何将第一个表单中的值获取到第二个表单中？

Question

我在同一个html页面中有2个表单。一个表单获取值，然后这些值必须传递给第二个表单。但我不知道如何通过第一个表单转到第二个表单。

当使用 action="#"时，我可以转到同一页面。但是从第一个表单获取值后如何转到第二个表单？有人可以帮助我吗？

Answer 1

当您将表单数据发送到服务器时，将使用表单的操作属性。在您的情况下，您可以在客户端进行复制(通过使用 JavaScript)，并且可以完全省略第一个 form 标记。

请参阅下面的示例。

document.getElementById('first_form_submit').addEventListener('click', function(event){
    event.preventDefault();
	
	document.getElementById('second_form_input').value = document.getElementById('first_form_input').value;
	// do the same for other form fields that you need to copy
});

.form {
  padding: 1em;
  background-color: #eee;
  margin-bottom: 1em;
}

<div id="first_form" class="form">
	<input type="text" id="first_form_input" />
	<button id="first_form_submit">Send values to second form</button>
</div>

<form method="post" action="some-url" class="form">
	<input type="text" id="second_form_input" name="some_name" />
</form>