Question posted in
You can find the official documentation here.

Jquery ajax – Passing data among different HTML pages

I’m new to PHP and very lost.

I’m working with HTML5, CSS3, jQuery and Bootstrap 4.

I have a total of 4 HTML pages on my website. In the first page there are 4 squares with text (let’s say A, B, C and D), user selects one of those squares and then presses the “Next” button. On click of this “next” user is taken to page 2 but this page needs to be updated according to user’s selection in page 1 (A, B, C or D). And similarly data from page 2 and page 1 needs to be taken to page 3.

I read about doing it via URLs, AJAX, PHP sessions and a few more things, but since I’m new at this I’m very confused.

Please guide as to how can I pass data among different pages?

EDIT: I’ve not used forms.

Tags:

4

Answers


  1. 0

    You can do this with use of localstorage

    First Page: (first.html)

    localStorage.setItem("square_first", "A");

    Second Page: (second.html)

    localStorage.getItem("square_first");
    Login or Signup to reply.
  2. 0

    You can use local storage following example will definitely help you.

    on HTML page 1: 

    window.onload = function() {
   var sqa = prompt("square: ","A");
   localStorage.setItem("SQA",sqa);
}

    On HTML page 2:

    window.onload = alert(localStorage.getItem("SQA"));

    You can use cookies but storage is better option as page request is not sent to server.

    Login or Signup to reply.
  3. 0 
    <html>

    <head>
        <title>Passing data among different HTML pages</title>

        <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    </head>

    <body>
        <div>
            <p>Section-A</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataA" id="dataA" value="sample data A"/>
            <button class="send_data" value="A">Next</button>
        </div>

        <div>
            <p>Section-B</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataB" id="dataB" value="sample data B"/>
            <button class="send_data" value="B">Next</button>
        </div>

        <div>
            <p>Section-C</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataC" id="dataC" value="sample data C"/>
            <button class="send_data" value="C">Next</button>
        </div>

        <div>
            <p>Section-D</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
            <input type="hidden" name="dataD" id="dataD" value="sample data D"/>
            <button class="send_data" value="D">Next</button>
        </div>


    </body>
</html>
<script>

    $(document).ready(function() {
     
        $(".send_data").click(function(event){
      
            var url="";
            let sec = $(this).prop("value");
            let data = $('#data'+sec).val();

            if (sec=="A"){
                url = 'demoA.html';
            } else if (sec=="B"){
                url = 'demoA.html';
            }
            else if (sec=="C"){
                url = 'demoA.html';
            }
            else if (sec=="D"){
                url = 'demoA.html';
            }

            var form = $('<form action="' + url + '" method="post">' +
                '<input type="text" name="data" value="'+data+'" />' +
                '</form>');
            $('body').append(form);
            form.submit();

        });
      
    });
</script>
    Login or Signup to reply.
  4. 0

    There method depends on the purpose, this is one of the fundamental concepts and components in web development.

    1. If you want to store or record your users interaction (for e-commerce, or social networking purposes) you will need the data to be passed to the server at some point (maybe after using a local storage object), there are 2 commonly used mechanisms PHP gives us to pass data from the client side to server side: $_GET & $_POST through a HTML from, and these can persist used cookies or sessions
    2. If the data passed between pages is never going to provide any purpose for the site’s function, then the local storage object may be used, the local storage object is particularly useful when large amounts of data may be stored on the users client, rather than fetching this expensive resource per request, to enhance user experience and minimise server load
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search