How to open popup form submit with Ajax when click a button?
Question
I have a table with data. Above the table I have an add button and when clicking that button a form will display. But what I want is to display that form in a popup window to submit when clicking the add button.
How can I do that?
Below I have attached my screenshot.
My table view code:
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add'/></td>
<div id="created"></div>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$('.add_class').click(function(){
$("#created").toggle();
});
});
</script>
<script>
$(document).ready(function(){
$(".add_class").click(function(e) {
e.preventDefault();
$.ajax({
url : "Crud_controller/Add",
data : '',
dataType: "HTML",
success: function(response) {
var result = $(response).find("body");
$("#created").html(response);
}
}).error(function() { alert("Something went wrong"); });
});
});
</script>
My form code:
<!DOCTYPE html>
<html>
<head>
<title>Add Employee</title>
<style>
label
{
display:inline-block;
width:100px;
margin-bottom:10px;
}
</style>
</head>
<body>
<h1>Add Employee</h1>
<div id="add_div">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
</body>
</html>
2 answers
solution1
1 2018-03-16 06:49:36
You need to add a bootsrap modal in your html.
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add' data-toggle="modal" data-target="#myModal"/></td>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Employee</h4>
</div>
<div class="modal-body" id="created">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Don't forget to include Bootstrap js and css in your file.No need to send AJAX request to fetch form html.
solution2
1 2018-03-16 06:50:12
Basically just use a modal (popup) then move your #add_div inside the modal and also the insert button. Then in your add button just add a event that triggers the modal with your #add_div below is the attached link on how to create and trigger a modal by just using plain javascript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
After form Validation enable submit button and if click submit button open modal popup using jQuery?
On click open popup with form and then on submit download and close it! How?
Ajax form submission uncaught error when click on submit button
How to run a function that a on form submit ajax with automatic click button
open a popup form on DataTable Edit button click
On click of same button open model and then submit form
How to show a popup window on submit button click
how to submit form on button click
Open a form action url page in a popup box when only a specific submit button is clicked
How to add js to button submit in form popup?
Related Tags