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.