Why is not submit button work on bootstrap modal popup

Question

Here is my PHP code

<?php
include('dbConfig.php');
?>
<?php

if(isset($_POST['uploads']))
{

  $brands_name=$_POST['brand_name'];
  $product=$_POST['product'];
  $model_no=$_POST['model_no'];

  /// File Add
  $bills_file = $_FILES['billscopy']['name'];


  // file Temp 
  $tembills_file =$_FILES['billscopy']['tmp_name'];

  //uploading an image to its folder

  move_uploaded_file($tembills_file,"mybills/$bills_file");

  mysql_query("INSERT INTO `mybills`(`user_id`, `user_name`, `user_email`, `brands_name`,`product_name`,`model_no`,`bills_copy`) 
     VALUES ('$user_id','$userName','$userEmail','$brands_name','$product','$model_no','$bills_file')") or die(mysql_error());
  echo "<div class='alert alert-success'>Bills Copy Added Successfully.</div>";
}
?>

Here is my Modal Popup code:

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Bills </h4>
    </div>
    <div class="modal-body">
        <form method="post" action="#" enctype="multipart/form-data">
            <div class="form-group  col-md-6 col-sm-6">


                <?php 
                include('dbConfig.php'); 
                $query = mysql_query("SELECT * FROM `brands` ORDER BY brands_name  "); 
                $rowCount =  mysql_num_rows($query);
                ?>
                <center><select name="brand_name" id="course" class="input-xxlarge form-control">
                    <option value="">Select Brands</option>
                    <?php
                    if($rowCount > 0){
                        while($row =mysql_fetch_array($query)){
                            echo '<option value="'.$row['brands_id'].'">'.$row['brands_name'].'</option>';
                    }
                    }else{
                        echo '<option value="">Brands not available</option>';
                    }
                    ?>
                </select></center>
            </div>
            <center><div class ="form-group col-md-6 col-sm-6">

                <select name="product" id="subject" class="input-xxlarge form-control">
                    <option value="">Select Product first</option>
                </select>
            </div></center>
            <center><div class ="form-group col-md-6 col-sm-6">

                <select name="model_no" id="testname" class="input-xxlarge form-control">
                    <option value="">Select Model No first</option>
                </select>
            </div></center>

            <center><div class ="form-group col-md-6 col-sm-6">
                <input type="file" name="billscopy" class="form-control" accept="image/*" capture="camera" data-name="full-name" required></center>
            <br></center>
            <!---<center><input class="form-control" id="full-name-field" type="file" name="billscopy" accept="image/*" capture="camera" data-name="full-name" required>
            <div class="separator-fields"></div></center>
          </div>--->


    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-success btn btn-lg" name="uploads">Upload</button>
    </div>
    </form>
</div>

</div>

When I was running the codes the first time, the submit button did not work, but when refreshing the page, the submit button worked perfectly and all dynamic data was submitted successfully.

This is my live URL: http://meraapp.solidaleinfotech.com/ . Open this link and login

Login Id=demo@gmail.com
Pass=12345

Then Login click on My Bills, then click on camera image when clicking on camera image modal popup open and fill all the fields and click upload button so upload button does not work but refresh the page button perfectly work and data insert.

Answer 1

You have written <form method="post" action="#" enctype="multipart/form-data"> at wrong place. See where you have closed </form> & where you have started <form> . <form> it should above the modal body.