title: AJAX: How to change a value on client side as well as server side on button click?
body: <p>In the following SSCCE,</p>
  <ol>
  <li>I have a string which contains the HTML for three <code>div</code>s.</li>
  <li>I add a <code>style=&quot;display:none;&quot;</code> attribute to all the <code>div</code>s except the first one.</li>
  <li>I add a button to all the <code>div</code>s except the last one, and add a JS <code>onclick</code> event listener, which should change the current <code>div</code>'s style property to <code>style=&quot;display:none;&quot;</code> (current <code>div</code>'s <code>id</code> attribute passed to the JS function.) and the next <code>div</code>'s (it's <code>id</code> is also passed to the JS function) style property to <code>style=&quot;display:block;&quot;</code></li>
  <li>I add a <code>submit</code> button to the last <code>div</code> which submits the <code>form</code>. I did not write the <code>action</code> attribute of the <code>form</code> or any event listener for this button because that's not the concern right now.</li>
  <li>I print the div's.</li>
  </ol>
  <h2>PROBLEM:</h2>
  <p>The <code>currentId</code> and the <code>nextId</code> passed to the JS event listener of the button click event are calculated in a function named <code>returnCurrentId</code> which takes the  <code>$array_of_divs</code> and <code>$array_of_ids</code> as arguments. Then it checks which <code>div</code> had <code>style=&quot;display:none;&quot;</code> and sets it as the <code>current_id</code>. Then the id next to it in the <code>$array_of_ids</code> becomes the <code>next_id</code>.</p>
  <p>The problem arises when the JS changes the style property of the <code>div</code>s whose <code>id</code>s have been passed to it on the client side, and nothing changes on the server side. So on the server side, it is the same <code>$array_of_ids</code> being passed to <code>returnCurrentId</code> without any changes in the display properties, and so the same <code>id</code>s of the first and second <code>div</code> are returned. They are passed to JS, and then again the same <code>div</code> is displayed again.</p>
  <h2>MY EFFORT:</h2>
  <p>So I have been reading up on AJAX here, and I tried to send a variable named <code>pass_back</code> in the <code>URL</code> of <code>XMLHTTPRequest.open(GET, URL, TRUE)</code>, and on the server side, tried to check if $_REQUEST contains it, and when it does, I make the same change to the style properties, but it does not seem to contain it.</p>
  <h1>QUESTION:</h1>
  <p>I anticipate I am placing the block of code on the wrong place, but then where do I put it.</p>
  <p>So can anyone give me some tips/suggestion/solution?</p>
  <pre><code>&lt;?php
  echo '&lt;html&gt;&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; 
      &lt;script&gt;
          function clickButton(currentId, nextId) {
              alert(currentId+&quot;,&quot;+nextId); //check
              
              document.getElementById(currentId).style.display = &quot;none&quot;;
              document.getElementById(nextId).style.display = &quot;block&quot;;
              document.getElementById(nextId).style.border = &quot;5px solid red&quot;;//check
              
              //**************************
              var xmlhttp;
              if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
              else { xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); }
  
              xmlhttp.open(&quot;GET&quot;,&quot;C:/xampp/htdocs/testing.php?pass_back=&quot;+&quot;pass_back&quot;,true);
              xmlhttp.send();
              //**************************
      
          }
      &lt;/script&gt;
  &lt;/head&gt;&lt;body&gt;';
  
  
  //String of all the div's
  $haystack = '&lt;div id=&quot;div1&quot; style=&quot;width:500px; height:250px; background-color:#fd77ba&quot;&gt;Div1&lt;/div&gt;
  &lt;div id=&quot;div2&quot; style=&quot;width:500px; height:250px; background-color:#7781fd&quot;&gt;Div2&lt;/div&gt;
  &lt;div id=&quot;div3&quot; style=&quot;width:500px; height:250px; background-color:#77fd9b&quot;&gt;Div3&lt;/div&gt;';
  
  //Adding divs as DOM objects to an array
  require 'C:\\xampp\\htdocs\\simple_html_dom.php';
  $html = str_get_html($haystack);
  foreach ($html-&gt;find('div') as $div) {
      $array_of_divs[] = $div;
  }
  
  //Extract id attributes from all elements of $array_of_divs and add to $array_of_ids
  foreach ($array_of_divs as $div) {
      $array_of_ids[] = $div-&gt;id;
  }
  
  //Add style=&quot;display:none;&quot; property to all divs except the first one
  for ($i=1; $i&lt;count($array_of_divs); $i++) {
      $array_of_divs[$i]-&gt;style = 'display:none;';
  }
  
  //Strings of the pseudo button to navigate to the next div on the same page and real button to navigate to another page
  $pseudo_btn = '&lt;button type=&quot;button&quot; onClick=&quot;clickButton(\''.returnCurrentId($array_of_divs, $array_of_ids)['current_id'].'\',\''.returnCurrentId($array_of_divs, $array_of_ids)['next_id'].'\')&quot; style=&quot;font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;&quot;&gt;Submit&lt;/button&gt;';
  $real_btn = '&lt;span style=&quot;background-color:red;&quot;&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Submit&quot; style=&quot;font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;&quot;&gt;&lt;/span&gt;';
  
  //Add $pseudo-btn to all except last div on this page, add $real_btn to the last div
  $last_id = end($array_of_ids);
  for ($j=0; $j&lt;count($array_of_ids); $j++) {
      if ($array_of_ids[$j] !== $last_id ) {
          $array_of_divs[$j]-&gt;innertext .= $pseudo_btn;
      } else {
          $array_of_divs[$j]-&gt;innertext .= $real_btn;
      }
  }
  
  //Print all the divs
  echo '&lt;form method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; accept-charset=&quot;utf-8&quot;&gt;';
  foreach ($array_of_divs as $div) { echo $div; }
  echo '&lt;/form&gt;';
  
  //**********************************************
  //IF $_REQUEST CONTAINS pass_back (i.e. THE BUTTON HAS BEEN PRESSED, CHANGE DISPLAY PREPERTY OF CURRENT AND NEXT DIV
  if (array_key_exists('pass_back',$_REQUEST)) {
          foreach ($array_of_divs as $divs_el) {
              if ( $divs_el-&gt;id == returnCurrentId($array_of_divs, $array_of_ids)[current_id] ) {
                  $divs_el-&gt;style = 'display:none;';
              } else if ( $divs_el-&gt;id == returnCurrentId($array_of_divs, $array_of_ids)[next_id] ) {
                  $divs_el-&gt;style = 'display:block;'; 
              }
          }
  } else {
      echo '$_REQUEST does not contain pass_back';
  }
  //***********************************************
  
  //This function returns the id of the current div which is displayed.
  function returnCurrentId($array_of_divs, $array_of_ids) {
      for ($c=0; $c&lt;count($array_of_divs); $c++) {
          $style_value = $array_of_divs[$c]-&gt;style;
          $style_value = preg_replace('/\s+/', '', $style_value);//This removes all kinds of white space.
          if (strpos($style_value,'display:none') === false) {
              $current_id= $array_of_divs[$c]-&gt;id;
              break;
          }
      }
      $current_position = array_search($current_id, $array_of_ids);
      $next_id = $array_of_ids[$current_position + 1];
      $array_to_pass= array('current_id'=&gt;$current_id, 'next_id'=&gt;$next_id);
      return $array_to_pass;
  }
  
  
  
  echo '&lt;/body&gt;&lt;/html&gt;';
  ?&gt;
  </code></pre>