How to submit this form in database using jquery?

Question

Here is the code that submits data in database. works fine .

How can I submit this form using jquery into database without refreshing the page.

Please help me with this code so i can understand the logic behind it and later use on my project.

HTML:

<form action="" method="post" id="reply"  enctype="multipart/form-data">
    <div class="input-group">
        <input type="file" name="image" class="file" id="imgInp"/>
        <input   type="text" placeholder="say something" class="form-control" name="comment"/><br/>
        <span class="input-group-btn">
            <button class="btn btn-info"  type="submit" name="submit">comment</button>
        </span>
    </div>
</form>

PHP:

$con = mysqli_connect("localhost","root","","hotwall") or die("unable to connect to internet");

$user = $_SESSION['user_email'];
$get_user = "SELECT * FROM users WHERE user_email = '$user'";
$run_user = mysqli_query($con, $get_user); 

$row = mysqli_fetch_array($run_user);

$user_id = $row['id'];
$user_name = $row['user_name'];
$post_slug = $row['post_slug'];  


if(isset($_POST['submit'])){
    global $con;
    global $user_id;
    $comment = $_POST['comment'];
    $post_image = $_FILES['image']['name'];
    $image_tmp = $_FILES['image']['tmp_name'];

    move_uploaded_file($image_tmp,"images/$post_image");
    $insert ="INSERT INTO comments (post_id, post_image, user_id, comment, author_name) VALUES ('$post_slug', '$post_image', '$user_id', '$comment', '$user_name')";

    $run = mysqli_query($con,$insert);
}

You have a tendency of not attending to answers when people are answering your questions — Masivuye Cokile
– Masivuye Cokile, Commented Jan 20, 2017 at 8:45

GROVER. · Accepted Answer · 2017-01-20 05:22:18Z

1

Something like this will do the trick :)

$("form#reply").submit(function(){ // on form submit
    var vals = $(this).serialize(); // get all the form values

    $.ajax({
        url: "postpage.php", // page in which the php is
        method: "post",
        data: vals, // you can access the values in php like you normally 
                    // would (using the names of the individual input fields)
        success: function(){ // if post is successful
            alert("success!"); // alert "success!"
        }
    });

    return false; // prevent page refresh
});

You must put the PHP within a different file for it to actually work, however.

edited Jan 20, 2017 at 5:22

answered Jan 20, 2017 at 5:13

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LordNeo · Accepted Answer · 2017-01-20 04:59:26Z

0

On the button click/submit event hook up an jQuery ajax call.

http://api.jquery.com/jquery.ajax/

$.ajax({
        type: "POST",
        url: "save_the_form.php",
        data: {
          var1: value1,
          var2: value2,
        },
        success: function(feedback) {
          // DO SOMETHING
        }
    });

Then just configure your "save_the_form.php" file to do the database save and stuff and maybe throw some feedback.

answered Jan 20, 2017 at 4:59

LordNeo

1,1721 gold badge8 silver badges21 bronze badges

Comments

Sergio Alen · Accepted Answer · 2017-01-20 05:21:17Z

It would basically be something like this using jQuery:

jQuery:

$.ajax({
        type: "POST",
        url: FORM_ACTION_PATH,
        data: {
          submit: {
            comment: value,
            file: value2
          }
        },
        success: function(retval) {
          // show success message
        }
    });

Untested php code:

<?php
    if ( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest' ) {
          if ( isset( $_POST["submit"] ) && ! empty( $_POST["submit"] ) ) {

          handle_upload();

          }
    }

    function handle_upload () {
        global $con;
        global $user_id;
        $comment = $_POST['comment'];

        $post_image = $_FILES['image']['name'];
        $image_tmp = $_FILES['image']['tmp_name'];

        move_uploaded_file($image_tmp,"images/$post_image");
        $insert =" insert into comments (post_id,post_image,user_id,comment,author_name) values('$post_slug','$post_image','$user_id','$comment','$user_name' ) ";
        $run = mysqli_query($con,$insert);

        return $run;
    }
?>

Mayank Vadiya · Accepted Answer · 2017-01-20 06:14:53Z

You need to try like this. You need to submit your form with ajax and you are passing file with your form then you need to add some more parameter in ajax.

$("#submitAjax").click(function(event){
  event.preventDefault(); // Stop page to refresh
  var formData = new FormData($(this).closest("form")[0]);
    $.ajax({
          url:'URL_OF_YOU_PHP_FILE',
          type:'POST',
          contentType: false,       
          cache: false,             
          processData:false,   
          data: formData,
          success:function(data){
            //Success 
            console.log(data);
        })
})

Change in you HTML button add id attribute

<button class="btn btn-info" id="submitAjax" type="submit" name="submit">comment</button>

Collectives™ on Stack Overflow

How to submit this form in database using jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related