Use button outside of <form> tag to submit!?

I currently am working on my page where users can edit their profile / account and am trying to make it so there is one button with the value of ‘save changes’ that will save every field that was changed. To get a better look (concept) of what I am talking about here is an image of it’s current state:

https://puu.sh/sAdyU/048d1b3a41.png

I found this post that kind of asks the same thing but it doesn’t seem to function as it should in my page (When clicking on the button, nothing is changed / echo’d to the user). When having a submit button inside of the form everything works great so I know my query in my code to update the field is fine.

Here is my code that everything is in for this particular page;

if ($action == 'edit_account') {
  // set page title to 'Edit Account' & show navbar
  showHeader('Edit Account');

  // protect page from users that are not logged in...
  protect2();

  // set $username for query
  $username = $_SESSION['username'];

  // create query to grab everything from users / user_details
  $sql = "SELECT * FROM users WHERE username = :username";
  $get_user_details = dbConnect()->prepare($sql);
  $get_user_details->bindParam(':username', $username);
  $get_user_details->execute();
  $user_details = $get_user_details->fetchAll();

  // create a container for content to sit in
  echo '
  <center>
  <div class="edit_profile_container">
    <div class="edit_profile_content">
      <button class="btn-edit" id="submit-form">save changes</button><br />

      <h1 class="edit_profile_heading">Username</h1>

      <form method="post" class="change_username">
        <input class="protect_from_spaces" type="text" name="change_username" value="' .$username. '" required/>
      </form>

      <p class="edit_profile_details_details">People can find your public profile at /u/' .$username. '.</p>

      <br />


    </div>
  </div>
  </center>
  ';

  // run query to update username input if its not the same as $username
  if ($_SERVER['REQUEST_METHOD'] == 'post') {

      $current_username = $_SESSION['username'];
      $change_username = $_POST['change_username'];
      // change_username input is different as $username
      if($change_username != $username) {

        // run query to update username in database
        // "UPDATE users SET password = '$hashed_password' WHERE resetpw_id = '$uid'"
        $sql = "UPDATE users SET username = :new_username WHERE username = :current_username";
        $update_username = dbConnect()->prepare($sql);
        $update_username->bindParam(':new_username', $change_username);
        $update_username->bindParam(':current_username', $current_username);
        $update_username->execute();

        // if change_username input is the same as $username
      } else {
        // don't do anything
        echo 'nothing changed';
      }
  }
}

You Can Do it in Following Way




1 Like

Thanks for the reply, I actually found it easier and functional (for the time being) to just leave the input type="submit" on the very top (inside) the <form> above the rest of the inputs and just style it to make it look like its above everything else :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.