title: Ajax dynamic variable without refresh
body: <p>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.</p>
  
  <p>here is what i have coded so far.</p>
  
  <p>My ajax</p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt;
  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+"&amp;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 &amp;&amp; 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...";
  }
  
  
  
  &lt;/script&gt;
   &lt;script type="text/javascript"&gt;
  var x = &lt;?php echo $phpx; ?&gt;;
   var div = document.createElement("DIV");
   div.appendChild(document.createTextNode(x));
   document.body.appendChild(div);
   &lt;/script&gt;
  </code></pre>
  
  <p>Then the div and html form</p>
  
  <pre><code> &lt;select size="3" name="selectionField" id="selectionField" multiple="no" &gt; 
      &lt;option value="move1" &gt;California -- CA &lt;/option&gt;
      &lt;option value="move2" &gt;Colorado -- CO&lt;/option&gt;
      &lt;option value="move3" &gt;Connecticut -- CN&lt;/option&gt;
    &lt;/select&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    Your Last Name: 
    &lt;input id="last_name" name="last_name" type="text" /&gt;
    &lt;br /&gt;
    &lt;br /&gt;
    &lt;input name="myBtn" type="submit" value="Submit Data" onClick="javascript:ajax_post();"&gt;
    &lt;br /&gt;
    &lt;br /&gt;
  &lt;/p&gt;
  
  &lt;/p&gt;
  
  &lt;div id="status"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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 ?</p>
  
  <p>edit here is a example of what you guys have subjected. </p>
  
  <pre><code>       &lt;script type="text/javascript"&gt;
      $.ajax({
        url: 'my_parse_file.php',
        type: 'POST',
        data: '{id: $('#nick').val() }'
        success: function(data){
         $('#hp').html(data);
        }
        }
      });
       &lt;/script&gt;
  
  &lt;div id="hp"&gt;&lt;?php echo $nick ; ?&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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...</p>