How to post data (form) without page refresh PHP, jQuery, Ajax

Question

Please help me how to submit form (comments) without page refresh for

HTML markup:

<form id="commentf" method="post">
    <img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
    <textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <button type="submit" id="comq"name="compost" class="butn2">post comment</button>
</form>

PHP code (pnf.php):

if(isset($_POST["compost"]))
{
    $comment=$_POST['comments'];
    {
        $reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND  qid= '".$qid."' ");
        $row_lat_lng= mysqli_fetch_array($reslt_user);
        $stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
        qid= '".$qid."' ");
    }
    if($stmt)
    {
        echo "hello world";
    }
}

jQuery and Ajax:

$(document).ready(function()
{
     $("#comq").click(function() {
         var comment=$("#comment").val();

         $.ajax({
             type: "POST",
             url:"pnf.php",
             data: { 
             "done":1,
             "comments":comment

              },
             success: function(data){
             }
        })
    }); 
});

I have tried many times and don't know what mistake I made, Ajax and jQuery are not working, please anyone help - thanks in advance

Your console should have spotted the error. Please always work with your console and network tab while developing — Rotimi, Apr 24 '17 at 07:20
please add `error_reporting(E_ALL); ini_set('display_errors', 1);` on top of pnf.php then check console error and tell us if PHP/JS error and use ajax response too in `success` — OldPadawan, Apr 24 '17 at 07:27
Possible duplicate of [Form submit with AJAX passing form data to PHP without page refresh](http://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh) — hassan, Apr 24 '17 at 07:35
@hassan that's not only refreshing also insert into database through ajax — Munna VMC, Apr 25 '17 at 06:37
You really should be using prepared statements for mySQL. Someone is going to be able to manipulate your data or just drop your tables, otherwise. — Gary Hayes, Apr 25 '17 at 07:40

score 2 · Accepted Answer · answered Apr 24 '17 at 07:22

2

You have made couple of mistakes.

First:: You should put button type="button" in your HTML form code
Second:: You have made a syntax error. $("#comment").vol(); should be replaced with $("#comment").val(); in your jQuery AJAX

answered Apr 24 '17 at 07:22

Rana Ghosh

4,514
5
23
40

i have replaced with $("#comment").val() but same result Nothing change – Munna VMC Apr 24 '17 at 07:25
@MunnaVMC also please ffo the same with first option. – Rana Ghosh Apr 24 '17 at 07:26
button type =button ? – Munna VMC Apr 24 '17 at 17:27

score 1 · Answer 2 · answered Apr 24 '17 at 07:24

1

As you mentioned that you have to send request without refreshing page I modified your JS-code with preventing default submitting form:

$(document).ready(function () {
    $("#commentf").submit(function (e) {
        e.preventDefault();
        var comment = $("#comment").val();

        $.ajax({
            type: "POST",
            url: "pnf.php",
            data: {
                "done": 1,
                "comments": comment
            },
            success: function (data) {
            }
        })
    });
});

answered Apr 24 '17 at 07:24

Alex Slipknot

2,439
1
18
26

`e.preventDefault();` is not always the best option. – Rana Ghosh Apr 24 '17 at 07:24
@Rana Ghosh in this case it will work. Because I preventing submit event - not clicking the button – Alex Slipknot Apr 24 '17 at 07:25
Yes, I know it will work. But i am saying it's not the best practice to do it. This should do when all way is closed. Prefer doing HTML Button `type="button"`. – Rana Ghosh Apr 24 '17 at 07:27
@Rana Ghosh So how type=button will help? – Alex Slipknot Apr 24 '17 at 07:31
Button `type="button"` will not submit the form by default and will automatically go to click event handler. – Rana Ghosh Apr 24 '17 at 07:32
@Rana Ghosh Well you're wrong. Any – Alex Slipknot Apr 24 '17 at 07:34
Please go through https://jsfiddle.net/k8hufk7t/ . It will help you to understand – Rana Ghosh Apr 24 '17 at 07:37
@Rana Ghosh yes indeed, thanks. Just because default type of – Alex Slipknot Apr 24 '17 at 07:44
1

I know. That's why I am saying that. – Rana Ghosh Apr 24 '17 at 07:49

Suresh · Answer 3 · 2017-04-24T12:00:01.147

0

Modified JQuery Code...

$( document ).ready(function() {
    console.log( "ready!" );

    $("#comq").click(function() {
        var comment=$("#comment").val();

        console.log('comment : '+comment);

        $.ajax({
            type: "POST",
            url:"pnf.php",
            data: {
                "done":1,
                "comments":comment
            },
                success: function(data){
            }
        })
    });

});

HTML Code

<form id="commentf" method="post">
    <textarea class="textinput" id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <input type="button" id="comq" name="compost" class="butn2" value="Post Comment">
</form> </div>

edited Apr 24 '17 at 12:00

answered Apr 24 '17 at 07:32

Suresh

5,687
12
51
80

– Munna VMC Apr 24 '17 at 11:57
Oh, my mistake. I've rectified that one. You can check now. It's working in my Chrome. – Suresh Apr 24 '17 at 12:00
still same results – Munna VMC Apr 24 '17 at 12:09
In my browser's console, I can able to see the AJAX call. Although it's returning 404 error because I don't have the server side file in my case. What's happening in your case? – Suresh Apr 24 '17 at 12:11
What's happening on your side? Can't you able to see any ajax call happening in your Browser console. – Suresh Apr 25 '17 at 03:39

score 0 · Answer 4 · answered Apr 24 '17 at 07:35

Javascript

$('form').on('submit', function(event){
  event.preventDefault();
  event.stopPropagination();

  var dataSet = {
    comment: $('#comment').val();
  }

  $.ajax({
    url: "link.to.your.api/action=compost",
    data: dataSet,
    method: 'post',
    success: function(data){
      console.log('request in success');
      console.log(data);
    },
    error: function(jqXHR) {
      console.error('request in error');
      console.log(jqXHR.responseText');
    }
  });
});

PHP

$action = filter_input(INPUT_GET, 'action');
swicht($action){
  case 'compost':
    $comment = filter_input(INPUT_POST, 'comment');
    {
        $reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND  qid= '".$qid."' ");
        $row_lat_lng= mysqli_fetch_array($reslt_user);
        $stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
        qid= '".$qid."' ");
    }
    if(!$stmt)
    {
      http_response_code(400);
      echo 'internal error';        
    } 
    echo 'your data will be saved';
    break;
  default:
    http_response_code(404);
    echo 'unknown action';
}

you have to prevent the submit on the form (look in javascript).

after that you send the request to the server and wait for success or error.

in php try to do it with a switch case. and try to not touch super globals directly, use filter_input function.

hope this helps

sreeja seguro · Answer 5 · 2017-04-25T05:33:26.133

<form id="commentf" method="post">
    <img width="40px" height="40px" src="uploads/<?php echo $row['photo']; ?>">
    <textarea class="textinput"id="comment" rows="1" name="comments" placeholder="Comment Here......"></textarea>
    <button type="button" id="comq"name="compost" class="butn2">post comment</button>
</form>

script

$(document).ready(function()
{
     $("#comq").click(function() {
         var comment=$("#comment").val();

         $.ajax({
             type: "POST",
             url:"pnf.php",
             data: { 
             "done":1,
             "comments":comment

              },
             success: function(data){
             }
        })
    }); 
});

PHP code (pnf.php):

comment=$_POST['comments'];
$reslt_user= mysqli_query($connection,"SELECT * FROM tbl_users,`queries` where id='".$_SESSION['id']."' AND  qid= '".$qid."' ");
        $row_lat_lng= mysqli_fetch_array($reslt_user);
        $stmt = mysqli_query($connection,"INSERT INTO comments set uid='".$_SESSION['id']."',comments='".$comment."',reply='".$reply."' ,
        qid= '".$qid."' ");
    if($stmt)
    {
        echo "hello world";
    }

used button click for submitting – sreeja seguro Apr 25 '17 at 09:20 — sreeja seguro, Apr 25 '17 at 09:20

dev-ovindu · Answer 6 · 2017-04-25T07:33:58.377

0

if you are using jquery make sure to include jquery libraries before your script file.

latest jquery cdn minified version

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

example

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

<script src="yourjsfile.js" type="text/javascript"></script>

edited Apr 25 '17 at 07:33

answered Apr 25 '17 at 07:28

dev-ovindu

1
1

then there is no problem with your code, and must be button type="button" – dev-ovindu Apr 25 '17 at 08:13
button type="button" how its works can you test it please – Munna VMC Apr 25 '17 at 08:17
i already test, you only need to button click to make ajax call, that's it. you don't need to submit form it self ! – dev-ovindu Apr 25 '17 at 08:19

How to post data (form) without page refresh PHP, jQuery, Ajax

6 Answers6