how to print input user form in another page in javascript?-CodePudding

this is my form code

<form action="action_page.html" method="GET">
  <div>
  <label for="name">First name:</label>
  <br>
  <input type="text" id="fname" name="fname"><br><br>

This is my JavaScript print execution "action_page.html". I want this to print the form in another page.

<script>
    const resultsList = document.getElementById('result')
    new URLSearchParams(window.location.search).forEach((value,
        name) => {
        resultsList.append('${name}: ${value}')
        resultsList.append(document.createElement('br'))

    })
</script>

CodePudding user response：

Start by giving your form an unique ID

<form action="action_page.html" id="myForm" method="GET">

You should then add a hidden input field for the form HTML that you want to send.

<input type="hidden" id="formClone" name="form">

You have to use Jquery for this. Include that by using this code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Then add this JS to your page with the form

var clone = $('#myForm').clone();
$("#formClone").val(clone.html());

This clones your form and puts the form HTML to the input.
This then gets send as extra URL parameter 'form'

To add the form to your other page use this in your action_page.html:

var resultsList = {};
new URLSearchParams(window.location.search).forEach((value, name) => {
    resultsList[name] = value;
});
$('body').append(resultsList["form"]);

CodePudding user response：

@Jbadminton already mentioned all the script elements that are necessary for your project - apart from also filling in the already supplied values. This is what my snippet does too (in a non-jQuery way). Give it a try, here:

// ============= first page ==================================================================
const [frm, fclone, srch, rcv] = "#myForm,#formClone,#search,#receive".split(",")
  .map(sel => document.querySelector(sel));

frm.onsubmit = ev => {
  ev.preventDefault(); // <===  DELETE this line in the "real" application!
  fclone.value = frm.innerHTML;
  // DELETE the following line in the "real" application:
  srch.textContent = new URLSearchParams(new FormData(frm).entries()).toString();
}

// ============= second page ===== action_page.html ==========================================
// in the "real" application this would run AFTER LOADING (not as a button click event)
rcv.onclick = _ => {
  // in the "real" application use        window.location.search  (instead of: srch.textContent)
  const entries = [...new URLSearchParams(srch.textContent).entries()];
  // take the last entry in ENTRIES and use its value as HTML for the FORM:
  const f = document.querySelector("#yourForm");
  f.innerHTML = (entries.pop() ?? ["", ""])[1];
  // now populate the values:
  entries.forEach(([nam, val]) => f[nam].value = val)
}

<!-- sending page -->
<h1>page 1</h1>
<form action="action_page.html" id="myForm" method="GET">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">

  <input type="hidden" id="formClone" name="form">
  <button>send</button>
</form>
<br><br> This is being sent to the second page as parameters in the URL:<br>
<span id="search"></span><br>

<hr><!-- receiving page -->
<button id="receive">receive</button>
<h1>page 2</h1>
<form id="yourForm"></form>