How to add data from Bootstrap Modal to MySQL

Question

I am trying to send some data from a Bootstrap Modal by Anchor link click to a MySQL table database , but I don't get it to work.

Here is the PHP calling the modal:-

<a href='#' data-toggle='modal' data-target='#add-post' data-userid=" . $_SESSION['user_id'] . " data-username=" . $username . " data-email=" . $email . ">Add a post</a>

Here's the Bootstrap Window modal:-

<div class="modal fade" id="add-post" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">          
      <form class="form-horizontal" role="form" name="add_post">


<input type="hidden" name="username" value="<?php echo $username; ?>">
          <input type="hidden" name="email" value="<?php echo $email; ?>">
        <div class="form-group">
        <label  class="col-sm-3 control-label" for="gebruikersnaam" style="text-align: left;">Username</label>
        <div class="col-sm-9 control-label" style="text-align: left;"><?php echo $username; ?></div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label" for="email" style="text-align: left;">E-mail</label>
        <div class="col-sm-9 control-label" style="text-align: left;"><?php echo $email; ?></div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label" for="post" style="text-align: left;">Post</label>
        <div class="col-sm-9 control-label" style="text-align: left;"><textarea name="post" rows="5" cols="70"></textarea></div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <input class="btn btn-success" type="submit" value="Add post" id="submit" />
  </div>
</div>

And here's the JQuery AJAX Syntax to send the data with the process.php

<script> 
$(document).ready(function () {
$("input#submit").click(function(e){
    $.ajax({
        type: "POST",
        url: "process.php", // 
        data: {
    'username':username,
    'email':email
        },
        success: function(msg){
            //alert("ok");
            $('#add-post').modal('hide');
        },
        error: function(){
            alert("Something went wrong!");
        }
    });
});
});
</script>

The process.php is:

<?php
if ($_POST['post']) { 

$sql = "INSERT INTO posts (username, email, post , date) VALUES ('". htmlspecialchars($username, ENT_QUOTES) . "', '". htmlspecialchars($email, ENT_QUOTES) . "', '" . htmlspecialchars($_POST['post'], ENT_QUOTES) . "', NOW())";

$res = mysqli_query($con, $sql) or die(mysql_error());

}
?>

Any idea what goes wrong?

Well firstly you don't have you database connection established, secondly you are inserting $username, $email etc.. and those variables aren't defined. It should be $_POST['username'], $_POST['email'] etc... Also you are not sending value for post in your jQuery call. The bast way for data to be sent is using jQuery serialize. api.jquery.com/serialize — b0ne
– b0ne, Commented Jun 29, 2016 at 8:28
Thx for the comment but I didn't copy the database connection into this thread because I thought I would be logical to have this info, my bad ........ :-). I saw that I even forgot to copy the variables into the thread but they were there, the main problem was that I din't send the right values in the Jquery. — Arie
– Arie, Commented Jun 30, 2016 at 12:47

Suyash · Accepted Answer · 2016-06-29 08:33:44Z

4

Try script like this

$(document).ready(function () {
$("input#submit").click(function(e){
    $.ajax({
        type: "POST",
        url: "process.php", // 
        data: {
    'username':$('input[name=username]').val(),
    'email':$('input[name=email]').val()
        },
        success: function(msg){
            alert("ok");
            $('#add-post').modal('hide');
        },
        error: function(){
            alert("Something went wrong!");
        }
    });
});
});

answered Jun 29, 2016 at 8:33

Suyash

1765 bronze badges

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

Collectives™ on Stack Overflow

How to add data from Bootstrap Modal to MySQL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related