I want to upload data entered in Modal popup into Database. The php code to upload the data is written in function named "Add()". The question is how do I call this function on clicking the submit button of Modal popup.
Modal Popup Code:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="padding:15px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Please fill your details...</h4>
</div>
<div class="modal-body" style="background-color:#ededed;padding:20px;">
<form method="post" action="details.php" id="form_login" style="padding:20px;" enctype="multipart/form-data">
<div class="form-group">
<label>Name: </label>
<div class="input-group">
<input type="text" class="form-control" name="user" placeholder="Name..." required="">
<label for="uLogin" class="input-group-addon glyphicon glyphicon-user" style="background-color:#337ab7;color:white;"></label>
</div>
</div> <!-- /.form-group -->
<label>Phone number: </label>
<div class="form-group">
<div class="input-group">
<input type="number" class="form-control" name="phone" placeholder="Mobile number..." required="">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-phone" style="background-color:#337ab7;color:white;"></label>
</div> <!-- /.input-group -->
</div> <!-- /.form-group -->
<label>Email Id:</label>
<div class="form-group">
<div class="input-group">
<input type="email" class="form-control" name="email" placeholder="Email Id..." required="">
<label for="uPassword" class="input-group-addon glyphicon glyphicon-envelope" style="background-color:#337ab7;color:white;"></label>
</div> <!-- /.input-group -->
</div> <!-- /.checkbox -->
</div> <!-- /.modal-body -->
<div class="modal-footer">
<button type="submit" class="btn btn-success " id="buyer_details" name="buyer_details" data-dismiss="modal">Submit Details</button>
</div>
</form>
</div>
</div>
</div>
Use ajax on that something like this
add a script on your page and set your modal to submit id to function with two parameters as add and id of your form, this code can be used as add edit and delete..
function userAction(type,id){
//id = (typeof id == "undefined")?'':id;
var statusArr = {add:"added",edit:"updated",delete:"deleted"};
var userData = '';
if (type == 'add') {
userData = $("#addForm").find('.form').serialize()+'&action_type='+type+'&id=';
}else if (type == 'edit'){
userData = $("#editForm").find('.form').serialize()+'&action_type='+type;
}else{
userData = 'action_type='+type+'&id='+id;
}
$.ajax({
type: 'POST',
url: 'action.php',
data: userData,
success:function(msg){
if(msg == 'ok'){
//alert('Patient data has been '+statusArr[type]+' successfully.');
var notif;
var r = confirm('Patient data has been '+statusArr[type]+' successfully. Reload?');
if (r == true) {
location.reload();
//notif = "You pressed OK!";
} else {
$('#myModal').modal('hide');
//notif = "You pressed Cancel!";
}
}else{
alert('Some problem occurred, please try again.');
}
}
});
}
then catch your post on your action.php something like this
if($_POST['action_type'] == 'add'){
$login= $_POST['login'],
$email = $_POST['email'],
$password = $_POST['password'],
}
I hope the next steps are good to you inserting the data to database Still, work on your code.. show us what you have so far.. ^_^
You can use onsubmit javascript event.
<form onsubmit="Add()"> </form>
In Javascript object.onsubmit = Add;
Using addEventListner in Javascript object.addEventListener("submit", myScript);
You since you are forwarding the form as a POST request you can do the following on details.php file
if($_POST) {
add();
}
function add() {
$name= $_POST['name'];
$phone= $_POST['phone'];
$email= $_POST['email'];
}
Hope this helps :)