CODEWITHSUNDEEP
phpjqueryhtmlforms
Ovidiu G
Ovidiu G

Reputation: 1273

Load php form on submit

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!

Upvotes: 1

Views: 4468

Answers (3)

Yalon Esneck
Yalon Esneck

Reputation: 133

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.

Upvotes: 0

Ranjeet Singh
Ranjeet Singh

Reputation: 924

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;
}

?>

Upvotes: 0

caryarit ferrer
caryarit ferrer

Reputation: 326

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']

Upvotes: 1

Related Questions