How to use data from one HTML page to retrieve data to be used on another HTML page using ajax

Question

I would like to use the 'sID' in the first HTML form to retrieve data from the database and then use the data retrieved from the database on the second HTML page. I can do this with just php, but I just can't figure out how to do it using ajax.

I'm really new to javascript/ajax so please be gentle with your answers :)

HTML 1

            <div class="moreR">             
                 <form action="moreR_2.0.php" method="GET">
                    <input type="hidden" name="sID[]" value="a_certain_ID"/>
                   <input type="image" src="Icons/PNG/greater_than.png" alt="submit"/>
                </form>
            </div>

---

PHP (moreR_2.0.php)

<?php
        include ('session_start.php');        
        include ('db_connect_mO.php');

    if (isset($_GET['sID'])) {
        foreach($_GET['sID'] as $sID) { 
            }
}

    $sql = mysqli_query($con, "SELECT * FROM mo WHERE sID=$sID");
    $row = mysqli_fetch_array($sql);

        while ($row = mysqli_fetch_assoc($sql)) 

        {           
            $test[]= array( 
                            'pZero'=> $row['pZero'],
                            'pZero_Gname'=> $row['gZero_key'],  
                        );
        }

        header('Content-Type: application/json');
        echo json_encode ($test);

        //detailed error reporting
        if (!$sql) 
        {
            echo 'MySQL Error: ' . mysqli_error($db);
        exit;

        }
?>

---

JavaScript

$(document).ready(function() {

    "use strict"; 

    function connect2mR() { 

    $.ajax({
        url:"moreR_2.0.php",
        type: "GET",
        data:'sID',
        dataType:"json",
        //async:false,
        success:function(data)
        {    
            $('#pZero').html('<img src="rPlanets/' + this.gZero + '.png" alt=""/>');
            $('#pZero_keys').html(this.gZero_key);
        }, //success


    }); //end of ajax

    } //end of function

    if (window.attachEvent) {window.attachEvent('onload', connect2mR);}
    else if (window.addEventListener) {window.addEventListener('load',     connect2mR, false);}
    else {document.addEventListener('load', connect2mR, false);}

    });

---

HTML 2

<section class="moreR_section">
    <div style="width:20%;"><div id="pZero"></div></div>
    <div class="moreR_g" style="margin-left:26%" id="pZero_keys"></div>
</section> 

What i'm trying to do is; start from HTML 1, collect sID -> then PHP/JS use sID from HTML 1 to get data from database -> then use the result from database on HTML 2. At the moment i'm struggling on how to make this process work. Can't figure out how to start from HTML 1 and end up in HTML 2.

Answer 1

You are not fetching the data from the input element at all.. change your ajax code to below.

$.ajax({
    url:"moreR_2.0.php",
    type: "GET",
    data:{sID: $('input[name="sID[]"]').val()},  // this is the change
    dataType:"json",
    //async:false,
    success:function(data)
    {    
        $('#pZero').html('<img src="rPlanets/' + this.gZero + '.png" alt=""/>');
        $('#pZero_keys').html(this.gZero_key);
    }, //success


}); //end of ajax

Edit 1: you can use localstorage to save data and retrieve from there when ever required. So you can do as below

In your HTML 1 write this.

localStorage.setItem('sID', JSON.stringify( $('input[name="sID[]"]').val()));

And in HTML 2 you can access the value by reading it from the local storage like below,

var sIDofHTML1 = JSON.parse(localStorage.getItem('sID'));

Answer 2

You will have to update the ajax as below.

data:'sID',  // this has to change to data:'sID='+sID,


$.ajax({
    url:"moreR_2.0.php",
    type: "GET",
    data:'sID',  // this has to change to data:'sID='+sID,
    dataType:"json",
    //async:false,
    success:function(data)
    {    
        $('#pZero').html('<img src="rPlanets/' + this.gZero + '.png" alt=""/>');
        $('#pZero_keys').html(this.gZero_key);
    }, //success


}); //end of ajax