html-php post form on same page – iframe issue

I am looking to create a simple html form that shows the results on the same page. I was originally looking for a way to replace the content of the page with the results of the form but I have then decided to add an iframe at the bottom of the page and show the post results there.

   <body>

    <div class="all">
   <form action="<?=$_SERVER['PHP_SELF'];?>" method="post" target="my_frame">

   <div class="form-group">
     <label class="col-md-4 control-label" for="numberOfMonths">Number of months</label>  
     <div class="col-md-1">
     <input id="numberOfMonths" name="numberOfMonths" type="text" placeholder="" class="form-control input-md">

     </div>

     <label class="col-md-4 control-label" for="sendbutton"></label>
     <div class="col-md-4">
       <button id="sendbutton" name="sendbutton" class="btn btn-primary">Calculate</button>
     </div>
   </div>
   <div class="answers">
<iframe name="my_frame" class="my_frame_class" style="border:none;" ></iframe>
   </div>
   </div>
   </form>

       </body>

The issue I am facing is that once the post is submitted the iframe shows the entire page inside itself and I really can’t understand why.

Answer

If you read documentation on iframe you will understand that iframe is exactly that. A new independent page in a frame. You could read about PHP include also.

To get the posted value on same page you need to just remove the action part of form and leave it blank so it posts on itself. And catch the variables with normal POST method, try code below. You where also missing type of button type="submit". AND save page with .php extension.

 <body>

    <div class="all">
   <form action="" method="post"  target="my_frame">

   <div class="form-group">
     <label class="col-md-4 control-label" for="numberOfMonths">Number of months</label>  
     <div class="col-md-1">
     <input id="numberOfMonths" name="numberOfMonths" type="text" placeholder="" class="form-control input-md">

     </div>

     <label class="col-md-4 control-label" for="sendbutton"></label>
     <div class="col-md-4">
       <button id="sendbutton" name="sendbutton" type="submit" class="btn btn-primary">Calculate</button>
     </div>
   </div>

   <div class="answers">
<?php    if (isset($_POST['sendbutton'])) {
   $numberOfMonths = $_POST['numberOfMonths']; 
   echo  $numberOfMonths; 
}
   ?>

   </div>
   </div>
   </form>
   </body>

Advertisement

Answer