title: Undefined index on ajax post request
body: <p><a href="https://i.stack.imgur.com/AbqOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AbqOp.png" alt="enter image description here"></a>This might seem like a duplicate question, but it isn't. I have searched google but my bug remains. </p>
  
  <p>The issue is that the php script can not set $_POST array to the value being passed by the ajax post request. I have a form that,when submitted,displays another form in the same divs as the first form. The second form contains a submit button, as well as a button which sends ajax post request but it's value is not being set by php. The code is as follows:</p>
  
  <p>html code: it is to pick out value of the span.</p>
  
  <pre><code>&lt;i&gt;Current Balance: &lt;span id="bal_val"&gt;&lt;?php echo $b; ?&gt;&lt;/span&gt;&lt;/i&gt;
  &lt;div id="bal" style='color:green;'&gt;
  </code></pre>
  
  <p>Ajax code:
  here, edit button is a button (of the first form) which enables the display of the second form. The second form contains the balbutton input,which sends ajax request.</p>
  
  <pre><code> $('#edit').click(function(event){  
            event.preventDefault();
  $('#bal').html('&lt;button class="btn1 btn-1 btn-1b" id="balbutton" name="balbutton"&gt;Add 1000 Rs.&lt;/button&gt;');
  });
  
  $('#balbutton').click(function(event){
                event.preventDefault();
  
                var bal = document.getElementById('bal_val').innerHTML;
                var balance = parseInt(bal);
               var dataString = {balance};
  
                 $.ajax({
                                      type: "POST",
                                      url: "admin.php/",
                                      data: dataString,
                                      contentType: 'application/x-www-form-urlencoded',
                                      cache: false,
                                      dataType: 'text',
                                      success: function(result){
                                      var data="";
                                      console.log(result);
                                      $('#bal').html('We will add 1000rs to your account soon');
                                      },
                                      error: function(error){console.log(error);}
                              });  
  
        });
  </code></pre>
  
  <p>php code:</p>
  
  <pre><code>&lt;?php 
  
  $bal=$_POST['balance'];
  
  $bal=intval($bal);
  echo $bal;
  
  echo '&lt;pre&gt;';
  echo print_r($_POST);
  echo '&lt;/pre&gt;&lt;br&gt;';
  
  echo '&lt;pre&gt;';
  echo var_dump($_POST);
  echo '&lt;/pre&gt;';
  ?&gt;
  </code></pre>
  
  <p>Also, I have tried the solutions of:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/20136667/undefined-index-error-in-ajax-post-and-or-php-script">Undefined index: Error in ajax POST and/or php script?</a>
  
  <ol start="2">
  <li><a href="https://stackoverflow.com/questions/21467466/jquery-ajax-undefined-index-php">jquery ajax =&gt; Undefined index php</a></li>
  <li><a href="https://stackoverflow.com/questions/18023026/undefined-index-in-php-post-with-ajax">Undefined index in PHP post with AJAX</a></li>
  <li><a href="https://stackoverflow.com/questions/30642443/undefined-index-error-in-php-using-ajax">Undefined index error in php using ajax</a></li>
  <li><a href="http://forums.devshed.com/php-development-5/jquery-json-php-undefined-index-950332.html" rel="nofollow noreferrer">http://forums.devshed.com/php-development-5/jquery-json-php-undefined-index-950332.html</a></li>
  </ol></li>
  </ol>
  
  <p>Snapshot of the ajax post request and PHP error</p>
  
  <p><a href="https://i.stack.imgur.com/8fvm3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8fvm3.png" alt="Jquery ajax post on console and php error"></a></p>