Ajax dynamic variable without refresh

Question

Ok so i am trying to build a battle script in php / ajax. At the moment i have a html form with the users moves and a text box ( to test ) i am using ajax to send the move to a parse file which then echo's out which move they have picked. The problem i have is that i know how to make it so when the user submit the form the variable which stores there health go down but i do not know how to show it on the first page. So i have page1 the health is showed and the user picks a attack and then submits the ajax will send the move over to page 2 and makes the health go down but i do not know how to make the health go down on page 1 with out refreshing ?Even tho i make it go down when the user submits i do not know how to make it show dynamically. I hope i have explained the best i can.

here is what i have coded so far.

My ajax

<script language="JavaScript" type="text/javascript">
function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "my_parse_file.php";
    var sF = document.getElementById("selectionField").value;
    var ln = document.getElementById("last_name").value;
    var vars = "selectionField="+sF+"&lastname="+ln;
    hr.open("POST", url, true);


    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
   var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
   }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}



</script>
 <script type="text/javascript">
var x = <?php echo $phpx; ?>;
 var div = document.createElement("DIV");
 div.appendChild(document.createTextNode(x));
 document.body.appendChild(div);
 </script>

Then the div and html form

 <select size="3" name="selectionField" id="selectionField" multiple="no" > 
    <option value="move1" >California -- CA </option>
    <option value="move2" >Colorado -- CO</option>
    <option value="move3" >Connecticut -- CN</option>
  </select>
  <br />
  <br />
  Your Last Name: 
  <input id="last_name" name="last_name" type="text" />
  <br />
  <br />
  <input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();">
  <br />
  <br />
</p>

</p>

<div id="status"></div>

so if i echo out the health like normal in php on page 1 the user picks a atatck and then it gets sent to page 2 dynamically page 2 makes there hp go down / php session go down. but because i would be echoing out the variable in php on page one it would not change dynamically . So i am guessing i would have to store the variable in side ajax ?

edit here is a example of what you guys have subjected.

       <script type="text/javascript">
    $.ajax({
      url: 'my_parse_file.php',
      type: 'POST',
      data: '{id: $('#nick').val() }'
      success: function(data){
       $('#hp').html(data);
      }
      }
    });
     </script>

<div id="hp"><?php echo $nick ; ?></div>

this is the code i have added tot he first page then in side my_parse_file.php i have $nick = '1'; but it is not displaying anything...

Answer 1

You could do something similar to this: Jquery checking success of ajax post

Then you don't really need the submit, but just update the current page by pure jquery.

Edit

<script language="JavaScript" type="text/javascript">
    $(function() {
        $('#buttonAttack').click(function (){
        $.ajax({
                url: 'my_parse_file.php',
                type: 'POST',
                data: {id: $('#nick').val() }
                success: function(data){
                    $('#hp').html(data);
                }
             });
    });
    });
</script>
<div id="hp"></div>
<input id='buttonAttack' type='button' value='Attack!' />

Answer 2

Step 1) switch your script to jquery ajax (recommended for sanity)

which in turn will result in

$.ajax({
  url: 'your_php_page.php',
  type: 'POST',
  data: '{id: $('#last_name').val() }'
  success: function(data){
   $('#status').html(data);
  }
  }
});

URL: is the link to your php data: is all variable $_POST that the php will see

where your_php_page.php does your fetch/model and echo out the result. On finish the "data" is the echo returned which you will replace #status id with whatever html you want.

EDIT: To answer your added code - you are mixing your php and javascript wrong

with $('#hp').html(data) you are already echo-ing back the data received from the php file. thats why javascript is client side and php is server side.