在另一页上使用getElementById

Question

I'm trying to create a "Same As Shipping" Button that's seen on many online ordering platforms that, when clicked/checked during the billing step of the transaction, imports the information from another page. I looked at the other question on this topic and didn't find anything helpful. I do know that the two pages fall under the Same Origin Policy.

I've got the Javascript code created to populate the billing page with information. However, I cannot find a way to bring the value from the other page.

<script language="JavaScript">
function SameAs(){
    document.getElementById("FIELD_4").value = "752";
    document.getElementById("FIELD_6").value = "50";
}
</script>

My problem is that I can't bring down the element from the previous page to use as the value.

Answer 1

Save it in local storage on the first page

localStorage.setItem('city', $('#elementID').val());

Then retrieve it from the second

localStorage.getItem('city');

Answer 2

You're trying to fetch an element from a page that you are no longer on? This is impossible. You can only get elements that currently exist in the DOM.

Answer 3

You need to store the information either in an encrypted cookie (for privacy reasons, you should never save payment information though) or request it via AJAX from the second page. There is no way to get the information from a previously submitted page.

Another option is not to actually submit a form from the prior page, but instead show the next page by making it visible via Javascript. When both "pages" are ready, then you can submit the form.