Load php form on submit

Question

I have an admin panel where I have an option to add a user into database. I made a script so when you click the Add User link it will load the form where you can introduce the user infos. The thing is, I want to load in the same page the code that is run when the form is submited.

Here's the js function that loads the file:

$( ".add" ).on( "click", function() {
    $(".add-user-content").load("add-user-form.php")
});

and here's the php form

<form id="formID" action="add-user-form.php" method="post">
    <p>Add Blog Administrator:</p>
    <input type="text" name="admin-user" value="" placeholder="username" id="username"><br>
    <input type="password" name="admin-pass" value="" placeholder="password" id="password"><br>
    <input type="email" name="admin-email" value="" placeholder="email" id="email"><br>
    <input type="submit" name="add-user" value="Add User">
</form>

<?php 
include '../config.php';

$tbl_name="blog_members"; // Table name 

if(isset($_POST['add-user'])){
    $adminuser = $_POST['admin-user'];
    $adminpass = $_POST['admin-pass'];
    $adminemail = $_POST['admin-email'];

    $sql="INSERT INTO $tbl_name (username,password,email) VALUES('$adminuser','$adminpass','$adminemail')";
    $result=mysqli_query($link,$sql);

    if($result){
        echo '<p class="user-added">User has been added successfully!</p>';
        echo '<a class="view-users" href="view-users.php">View Users</a>';
    }else {
        echo "Error: ".$sql."<br>".mysqli_error($link);
    }

}

?>

Maybe I was not that clear, I want this code

if($result){
    echo '<p class="user-added">User has been added successfully!</p>';
    echo '<a class="view-users" href="view-users.php">View Users</a>';
}else {
    echo "Error: ".$sql."<br>".mysqli_error($link);
}

to be outputted in the same page where I loaded the form because right now it takes me to the add-user-form.php when I click the submit button.

Thanks for your help!

`load()` has its method as GET if no data passed (as an object). Point yourself at the end of [this page](http://api.jquery.com/load/) on how to POST on `load()` function. Or just use [other ajax](http://api.jquery.com/category/ajax/) functions available — Chay22, May 20 '16 at 08:06

score 1 · Answer 1 · answered May 20 '16 at 07:56

1

if you do this the code will be redirected on post to your page:

 <form name="formID" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >

you should add a validation so it doest show the form if you receive $_POST['add-user']

answered May 20 '16 at 07:56

caryarit ferrer

326
3
12

score 0 · Answer 2 · edited May 23 '17 at 12:24

What you are looking for is to submit the form using AJAX rather than HTML.

Using the answer Submit a form using jQuery by tvanfosson

I would replace your

<input type="submit" name="add-user" value="Add User">

with

<button id="add-user-submit">Add User</button>

and then register an onClick-handler with

$( "#add-user-submit" ).on( "click", function() {
  $.ajax({
    url: 'add-user-form.php',
    type: 'post',
    data: $('form#formID').serialize(),
    success: function(data) {
               $(".add-user-content").append(data);
             }
  });
});

to add the actual submit functionality.

score 0 · Answer 3 · answered May 20 '16 at 08:02

You have to submit your for via ajax. Alternatively you don't need to load form html, just hide the form and on add user button click show the form. Check this code. Hope that helps you :-

    // Add User Button
    <div class="color-quantity not-selected-inputs">
        <button class="add_user">Add User</button>
    </div>
    // Append form here
    <div class="add_user_form"></div>
    // for posting response here
    <div class="result"></div>

Script for processing form and appending user form

<script>
$(function(){
    $( ".add_user" ).on( "click", function() {
        $(".add_user_form").load("form.php")
    });
    $(document).on("submit","#formID", function(ev){
        var data = $(this).serialize();
        console.log(data);
        $.post('handler.php',data,function(resposne){
            $('.result').html(resposne);
        }); 
        ev.preventDefault();
    });
});
</script>

form.php

<form id="formID" action="" method="post">
    <p>Add Blog Administrator:</p>
    <input type="text" name="admin-user" value="" placeholder="username" id="username"><br>
    <input type="password" name="admin-pass" value="" placeholder="password" id="password"><br>
    <input type="email" name="admin-email" value="" placeholder="email" id="email"><br>
    <input type="submit" name="add-user" value="Add User">
</form>

handler.php

<?php 
include '../config.php';

$tbl_name="blog_members"; // Table name 

if(isset($_POST['add-user'])){
    $adminuser = $_POST['admin-user'];
    $adminpass = $_POST['admin-pass'];
    $adminemail = $_POST['admin-email'];

    $sql="INSERT INTO $tbl_name (username,password,email) VALUES('$adminuser','$adminpass','$adminemail')";
    $result=mysqli_query($link,$sql);

    if($result){
        echo '<p class="user-added">User has been added successfully!</p>';
        echo '<a class="view-users" href="view-users.php">View Users</a>';
    }else {
        echo "Error: ".$sql."<br>".mysqli_error($link);
    }
    die;
}

?>

Thanks for reply. I tried to do this and the script goes until console.log(data); It outputs this into the console but it doesn't go further and nothing is displayed. — Ovidiu G, May 20 '16 at 13:07

Load php form on submit

3 Answers3