Bootstrap form modal, post values to PHP file

Question

I have a form on a page that allows users to update their information. When they click submit it presents a modal that asks them to enter their password to ensure it's them. However, once they submit the modal it doesn't POST the values to the .php to update their record.

Form and Modal

<div class="container">
    <form id="updateInfo" action="update_user.php"  method="POST">
        <div class="form-group">
<label for "uid">User ID </label>
            <input name="uid" id="uid" type="text" class="form-control"  value="<?= $_SESSION['uid'] ?>" disabled> 
            </br>    

            <label for "firstname">First name </label>
            <input name="firstname" id="firstname" type="text" class="form-control"  value="<?= $_SESSION['firstname'] ?>">
            </br>

            <label for "lastname">Surname</label>
            <input name="lastname" id="lastname" type="text" class="form-control"  value="<?= $_SESSION['lastname'] ?>" >
        </br>

            <label for "email">Email </label>
            <input name="email" id="email" type="email" class="form-control"  value="<?= $_SESSION['email'] ?>" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" title="Email must be in a valid format.">
        </br>

            <label for "username">Username</label>
            <input name="username" id="username" type="text" class="form-control"  value="<?= $_SESSION['user'] ?>" >
            <span id="msg_username"></span>
      </br>               

        </div>

        <button class="btn btn-default" id="submit" type="button" data-toggle="modal" data-target="#myModal" >Submit</button>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">        

      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Enter Password</h4>
        </div>
        <div class="modal-body">
          <label for "password">Password</label>
            <input name="password" id="password" type="password" class="form-control">
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default" action="update_user.php" data-dismiss="modal">Submit</button>
        </div>
      </div>

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

PHP file

<?php
    require_once 'config.php';    

    $query = $conn->prepare("UPDATE users SET firstname = :firstname,lastname = :lastname,username = :username ,email = :email WHERE uid = :uid");
    $query->bindParam(':firstname', $_POST['firstname']);
    $query->bindParam(':lastname', $_POST['lastname']);
    $query->bindParam(':username', $_POST['username']);
    $query->bindParam(':email', $_POST['email']);
    $query->bindParam(':uid', $_POST['uid']);
    $result = $query->execute();

    if($result)
    {
        echo "<p>Thank you. Your account has been registered.</p>";
        echo $_POST['firstname'];
    } else {
        echo "<p>Sorry but there was a problem registering your account. Please try again.</p>";
    }
?>

Answer 1

You should either wrap the update user button in a form or replace the action attribute by the attribute formaction .

<div class="modal-footer">
      <button type="submit" class="btn btn-default" formaction="update_user.php" data-dismiss="modal">Submit</button>
</div>

See documentation of the formaction attribute here or here