CODEWITHSUNDEEP
phpjquerymysqlajaxbootstrap-modal
Arie
Arie

Reputation: 371

How to add data from Bootstrap Modal to MySQL

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?

Upvotes: 0

Views: 6963

Answers (1)

Suyash
Suyash

Reputation: 176

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!");
        }
    });
});
});

Upvotes: 4

Related Questions