Pass values between two html

Question

I have this code where I need to pass the value of the "totalcompra" id to another page. page1.html

<div id="total">
    <div class="container-total">
         <div class="text-total">
              <p>Total:$</p><p id="totalcompra" name="totalcompra"></p>
         </div>
         <div class="ahr">
              <input type="submit" id="compra_segura" class="submit btn btn-success action-button" value="Compra Segura"/>
         </div>
    </div>
</div>

And I want to put the value here.

page2.html

<aside>
     <div id="side-container">
          <h2 class="quoter-text">Resumen de compra</h2>
          <div class="rsm"></div>
          <div class="pymt-total"><p class="total-pym">Total:</p></div>
     </div>
</aside>

ajax

$('#compra_segura').click(function() {
    $.ajax({
        type: 'POST',
        url: '/payment/',
        data: { total : $('#totalcompra').text() },
        success: function(data)
        {
            $('.total-pym').html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

I've tried doing it with ajax and jquery but I have not been successful. How can I do it? Thank you.

you need to read about [.load()](http://api.jquery.com/load/) and [examples](http://www.jquery-tutorial.net/ajax/the-load-method/) — Mohamed-Yousef, May 23 '17 at 18:50
something you need to know about `ajax()` *AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files. AJAX’s most appealing characteristic is its "asynchronous" nature, which means it can communicate with the server, exchange data, and update the page without having to refresh the page.* [REF.](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) — Mohamed-Yousef, May 23 '17 at 18:58

score 1 · Accepted Answer · answered May 23 '17 at 19:26

You can use localStorage docs:

$('#compra_segura').click(function() {
    $.ajax({
        type: 'POST',
        url: '/payment/',
        data: { total : $('#totalcompra').text() },
        success: function(data)
        {
            localStorage.setItem("totalPayment", data); //setter
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

And use var x = localStorage.totalPayment; to get the value on page2.html

Thanks, it works very well for me. – Isabel Gomez May 24 '17 at 16:06 — Isabel Gomez, May 24 '17 at 16:06

score 0 · Answer 2 · edited May 23 '17 at 20:14

0

First, see the return of your Ajax call, if the data variable returns a JSON, then you must access the value of the purchase in this way:

$('.total-pym').append(data.totalcompra);

edited May 23 '17 at 20:14

Adam

4,445
1
31
49

answered May 23 '17 at 19:30

sergioBertolazzo

585
2
11
27

2

show that "data is not defined" – Isabel Gomez May 24 '17 at 16:05

Pass values between two html

2 Answers2