Click a button from A page to open a new Page B, when close Page B, Page A gets a parameter from B without refresh.Is it possible?

Question

I have a page A, it has an input element named supplier and a button aside。 When I click the button ,opens a new page B from a new window. This window has a form allows me to query supplier form the server side. when I done query, I want to chose one of the result and pass it to page A and display it in page A's input element without refresh it.

I know I can do this using Modal and Ajax.But I'm trying to find different ways to accomplish it.

Page A:

<div class="form-group">
    <label for="supplier">supplier：</label>
    <input class="form-control" type="text" id="supplier">
    <input type="button" class="btn btn-default" onclick="window.open('page_b.html','newWindow','alwaysRaised=yes')" />
</div>

Page B:

<form>
    <div action="query" method="POST">
        <input type="text" id='code_input' name="supplier_code" class="form-controll"/>
        <input type="text" id='name_input' name="supplier_name" class="form-controll"/>
    </div>
    <input type="submit"/>
</form>

<table class="show">
    <tr>
        <th>checkbox</th>
        <th>supplier_code</th>
        <th>supplier_name</th>
    <tr/>
    <tr>
        <td><input type="checkbox" value="1"></td>
        <td>HQ123</td>
        <td>Apple</td>
    </tr>
    <!-- This is where I want to pass the value of checkbox to page A and close  page B -->
    <input type="submit"/>

</table>

I know HTTP is stateless ,so I thought maybe I can use cookies to store the result from Page B, But When I close Page B and store the cookie by click the submit button.How can I notify page A to get result from cookie?

EDIT: html is stateless To HTTP is stateless.

Answer 1

You can refer the first window by opener from the second one. Just define a function on window A and call that from window B. Here we get the complete form data by a FormData object converting it into an array. Since this all happens within the same origin using related windows, there is no need for a complex messaging system.

Page A JavaScript

function setData(data)
{
  // do what you want with your data, here log to browser console
  console.log(data);
}

Page B HTML

<form>
  <table class="show">
    <tr>
      <th>checkbox</th>
      <th>supplier_code</th>
      <th>supplier_name</th>
    <tr/>
    <tr>
      <td><input name="HQ123_Apple" type="checkbox" value="1"></td>
      <td>HQ123</td>
      <td>Apple</td>
    </tr>
  </table>

  <button id="btn-use-data" type="button">Use data and close</button>
</form>

Page B JavaScript

document.addEventListener('DOMContentLoaded', ev =>
{
  document.getElementById('btn-use-data').addEventListener('click', ev =>
  {
    opener.setData(Array.from(new FormData(ev.target.form)));
    window.close();
  });
});

Only checked checkboxes appear in the array. Note that form input elements need to have a name attribute in order to get listed.

Answer 2

you may use the localstorage with javascript. By the time value is available in page. you may save the value to localstorage by Storage.setItem() method, and you can retrieve it back with Storage.getItem() method. Here you may find more details