如何在表单中设置动作属性以转到同一HTML页面中的另一表单，以及如何将第一种形式的值转换为第二种形式？

Question

I have 2 forms in same html page.one form get the values and then these values must be pass to the second form.But I don't know how to go to the second form through the first form.

when using action="#" , I can go to same page. but how to go to the second form after get values from first form?Can someone please help me?

Answer 1

Form's action property is to be used when you are sending your form data to server. In your case you can do the copying client-side (by using JavaScript) and you can omit the first form tag altogether.

See the example below.

 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>