Undefined index on ajax post request
<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>