Hi i am beginner in AJAX and facing a problem in following code which does not pop up the alert message.
I was tried to insert data from form to database using AJAX.
This code successfully store the data into database.
But it not pop up the alert message which is major issue.
**//index.php**
// following is ajax code in which problem occur. i think.
$(document).ready(function(){
$('#submit').click(function(){
$.ajax({
url:"store.php",
method:"POST",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
**//store.php**
// following is the data base releted query
$conn = mysqli_connect("localhost", "root", "", "prag");
$chapter_name = $_POST["chapter_name"];
$class = $_POST["class"];
$subjects = $_POST["subjects"];
$sql = "INSERT INTO chapter(class_id,subject_id,name) VALUES('$class','$subjects','$chapter_name')";
mysqli_query($conn, $sql);
echo "Data Inserted";
</pre>
//HTML CODE
//Following are the input fields through which data will store.
<input type="text" name="chapter_name" placeholder="Enter the Chapter name" class="form-control name_list" />
<select name="class" id="class" class="form-control">
<option>Select Class</option>
</select>
<select name="subjects" id="subjects" class="form-control">
</select>
<button type="submit" name="add_chapter" id="submit">Add </button>
<pre>
Use below code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
$.ajax({
url:"data.php",
method:"post",
data:$('#add_name').serialize(),
success:function(data)
{
alert(data);
$('#add_name')[0].reset();
}
});
});
});
</script>
</head>
<body>
<form method="post" id="add_name">
<input type="text" name="chapter_name" placeholder="Enter the Chapter name" class="form-control name_list" />
<select name="class" id="class" class="form-control">
<option>Select Class</option>
</select>
<select name="subjects" id="subjects" class="form-control">
</select>
<button type="submit" name="add_chapter" id="submit">Add </button>
</form>
</body>
</html>
Check PHP Code:
<?php
$conn = mysqli_connect("localhost", "root", "", "prag");
$chapter_name = $_POST["chapter_name"];
$class = $_POST["class_name"];
$subjects = $_POST["subject_name"];
$sql = "INSERT INTO chapter(class_id,subject_id,name) VALUES('$class','$subjects','$chapter_name')";
if(mysqli_query($conn, $sql)) {
echo "Data Inserted";
}
else {
echo "Data Not Inserted";
}
?>
Related
Now I create a system that can delete multiple data using select option. But here I got some issues. When i only select one data, and press button delete, it will delete. But if I choose more than one data, for example, 3 data, it will only delete the latest id of the data. Below is my the image
And below is my code:
index.php
<form method="post" id="multiple_select_form">
<select name="framework" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
<?php foreach ($results as $row2): ?>
<option value= <?php echo $row2["framework_id"]; ?>><?php echo $row2["framework_name"];?></option>
<?php endforeach ?>
</select>
<br /><br />
<input type="hidden" name="framework_id" id="framework_id" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#framework').change(function(){
$('#framework_id').val($('#framework').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#framework').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#framework_id').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
insert.php
<?php
include("configPDO.php");
$smt = $conn->prepare("DELETE FROM frame_list WHERE framework_id = '".$_POST["framework_id"]."'");
$smt->execute();
if($smt){
echo "Data DELETED";
}else{
echo "Error";
}
?>
Can anyone knows how to solve this problem? Thanks
framework will hold one value every time.
Use input arrays -
Change name="framework" to name="framework[]".
and in query -
WHERE framework_id in ('". implode("','", $_POST["framework_id"]) ."')"
Try to use parameter binding for security.
I have a dropdown in a form that is being populated with a list of employees from a table called 'employees' in a MySQL database (employee_id, fname, lname). This is working just fine.
What I need to do next is when an employee is selected from the dropdown, I need to query the employees table to get the employees commission percentage (commission) and then populate another text field in the form with that value.
The issue is that i need to do this without reloading the page. I have been searching Google and it looks like i need to use AJAX and JavaScript. to accomplish this, my problem is that I don't know a thing about AJAX, though i do have some experience with java script.
The employees table looks like this:
employee_id
fname
lname
commission
Below is what I have so far.
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
OK, I looked at the other question and although it is different, I tried to change the code around to make it work, but i'm not having any luck. When I select an item from the dropdown, nothing happens. Below is the updated code. I'm not sure if i'm on the right path or not.
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#employee_id").change(function () {
var employee_id = $(this).val();
$.ajax({
type: "GET",
url: "ajax.php",
data: {employee_id: employee_id},
dataType: "json",
success: function(data){
var comm = data[0].commission;
$('#commission').empty();
$('#commission').append('<option value="0">0.00</option>');
$('#commission').append('<option value="' + comm + '">' + comm + '</option>');
$('#commission').focus();
},
beforeSend: function(){
$('#commission').empty();
$('#commission').append('<option value="0">Loading...</option>');
},
error: function(){
$('#commission').empty();
$('#commission').append('<option value="0.00">0.00</option>');
}
})
});
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />%
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
Here is the test2.php file that ajax is using to query the database
<?php
// DB connection
require_once('Connections/freight.php');
if (isset($_GET['employee_id'])) {
$employee_id = $_GET['employee_id'];
$return_arr = array();
$result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");
while($row = $result->fetch_assoc()) {
$row_array = array("commission" => $row['commission']);
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
}
?>
I figured it out. Here is the final code.
test.php
<?php
// DB connection
require_once('Connections/freight.php');
// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#employee_id").change(function () {
var employee_id = $(this).val();
$.ajax({
type: "GET",
url: "ajax.php",
data: {employee_id: employee_id},
dataType: "json",
success: function(data){
var comm = data[0].commission;
$('#commission').empty();
$('#commission').val(comm);
$('#commission').focus();
},
beforeSend: function(){
$('#commission').empty();
$('#commission').val('0.00');
},
error: function(){
$('#commission').empty();
$('#commission').val('0.00');
}
})
});
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
Agent:
<select name="employee_id" id="employee_id">
<option selected="selected" value="">- select agent -</option>
<?php do { ?>
<option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
<?php
} while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
$rows = mysqli_num_rows($rsEmployeeList);
if($rows > 0) {
mysqli_data_seek($rsEmployeeList, 0);
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
}
?>
</select>
Commision:
<input name="commission" type="text" id="commission" size="3" />%
<input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>
ajax.php
<?php
// DB connection
require_once('Connections/freight.php');
if (isset($_GET['employee_id'])) {
$employee_id = $_GET['employee_id'];
$return_arr = array();
$result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");
while($row = $result->fetch_assoc()) {
$row_array = array("commission" => $row['commission']);
array_push($return_arr,$row_array);
}
echo json_encode($return_arr);
}
?>
I saw few pages but tried all and none worked for me.
This is what i want:
on my html:
<form class="form-horizontal" role="form" method="POST" action="">
<select name="customer_id" id="customer_id" class="form-control">
<option>Select customer</option>
<?php foreach($customers AS $customer): ?>
<option value="<?php echo $customer->id;?>"><?php echo $customer->name; ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="form-group">
<label for="category" class="col-xs-4 control-label">Category</label>
<div class="col-sm-4 col-xs-8">
<input type="text" class="form-control" name="category" id="category" placeholder="Category" disabled="disabled">
</div>
</div>
Then i have a script to auto fill the category field depending on the customer selected, ass on the database each customers fall into different categories.
<script type="text/javascript">
$(document).ready(function() {
$('#customer_id').change(function() {
var customer_id = $("#customer_id").val();
$.ajax({
type: "POST",
url: <?php echo base_url(). 'customer/getCustomerCat' ; ?>,
data: form_data,
success: function(cat)
{
$("#category").val(cat);
}
});
});
});
</script>
Then on my controller i have:
public function getCustomerCat(){
$id = $this->input->post('customer_id');
$category = $this->customer_model->getCustomerCat($id)[0]->category;
echo $category;
}
On my Model i have:
public function getCustomerCat($id){
$query ="SELECT category FROM customers WHERE id=$id";
$query = $this->db->query($query);
return $query->result();
}
I am not so good with ajax but expected the categoory field to be populated after selecting a customer without reloading the page.
I have a form, that uses a php file. The form lets the user:
-input 3 text fields for Title/Price/Description
-Select an image for his product
-Choose a table from the dropdown list (options are the table values)
As you see on my code after the user press the submit button, the browser redirects to another page, saying that "1 records was adder successfully".
I want it to be like after the user clicks the submit button on the form, a (javascript/ajax) messagewill appear letting him know that the records was added successfully.
Sorry for long coding, I think you might need everything.
OPEN TO ANY SUGGESTIONS
form
<div id="addForm">
<div id="formHeading"><h2>Add Product</h2></div><p>
<form id = "additems" action="../cms/insert.php" enctype="multipart/form-data" method="post"/>
<label for="title">Title: </label><input type="text" name="title"/>
<label for="description">Desc: </label><input type="text" name="description"/>
<label for="price">Price: </label><input type="text" name="price" />
<label for="stock">Quan: </label><input type="text" name="stock" />
<p>
<small>Upload your image <input type="file" name="photoimg" id="photoimg" /></small>
<div id='preview'>
</div>
<select name="categories">
<option value="mens">Mens</option>
<option value="baby_books">Baby Books</option>
<option value="comics">Comics</option>
<option value="cooking">Cooking</option>
<option value="games">Games</option>
<option value="garden">Garden</option>
<option value="infants">Infants</option>
<option value="kids">Kids</option>
<option value="moviestv">Movies-TV</option>
<option value="music">Music</option>
<option value="women">Women</option>
</select>
<input type="submit" name="Submit" value="Add new item">
</form>
</div>
insert.php (used on the form)
session_start();
$session_id='1'; //$session id
$path = "../cms/uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024))
{
$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$table = $_POST['categories'];
$title = $_POST['title'];
$des = $_POST['description'];
$price = $_POST['price'];
$stock = $_POST['stock'];
$sql="INSERT INTO $table (title, description, price, image, stock)
VALUES
('$title','$des','$price','$path$actual_image_name','$stock')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "<h1>1 record added into the $table table</h1>";
echo '<button onclick="goBack()">Go Back</button>';
with jquery its quite simple:
Just do the following:
1st thing, remove the type="submit" in your input and give it a unique identifier like this:
<input id="submit_form" name="Submit" value="Add new item">
2nd thing, in your javascript file, do:
$(document).ready(function(){
$('input#submit_form').on('click', function() {
$.ajax({
url: 'addnew.php',// TARGET PHP SCRIPT
type: 'post' // HTTP METHOD
data: {
'title' : $('input[name="title"]').val()
},
success: function(data){
alert(data); // WILL SHOW THE MESSAGE THAT YOU SHOWED IN YOUR PHP SCRIPT.
}
});
});
})
3nd thing, in you php file:
Do the same thing but just do:
die("1 record added into the $table table")
I have two files demo.php and post.php. How can I do in single
page instead of two page.
demo.php
<html>
<head>
<title>Dynamic Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "post.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Us">Us</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" id="other" style="visibility:hidden;"/>
<input type="submit" name="submit" value="Add Country" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
</body>
post.php
<?php
if(isset($_POST['other'])) {
$Country = $_POST['other'];
echo $Country;
}
?>
How can I use the post.php data in demo.php without passing data from one page to another.
Change the url of your ajax
$.ajax({
type: "POST",
url: "demo.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
And add this in your demo.php
<?php
if(isset($_POST['other'])) {
$Country = $_POST['other'];
echo $Country;
}
?>
I have a few personal observations:
the first one it's in the approach: I don't think it was a bad idea to have two separate files. This is not really a good optimization. Now you want a single file to handle a GET request and POST in two different ways (one for AJAX one for normal POST in case you want your javascript to degrade gracefully.
you might want to remove that "onchange" attribute. Look into the concept of Unobtrusive JavaScript for why this is good practice
never trust user input: always sanitize and validate appropriately
bellow is a version of your file rewritten. Notices I've re factored the onChange with something more maintainable and I'm using JS to make the initial hiding of the input and submit button. This way if JS is disabled the user can still add countries.
in order to determine how the post was triggered I pass an extra flag ajax=1 to the post.
<?php
$country = filter_input(INPUT_POST, 'other');
// Ajax
if (isset($_POST['ajax']))
{
echo 'Successfully added country: ' . $country;
exit();
}
// normal post
else
{
echo $country;
}
?>
Dynamic Form
$(document).ready(function(){
$('#country').on('change', hideStuff);
// hide the buttons to add extra option
$('#other, #submit').hide();
function hideStuff()
{
var select = $(this);
var flag = select.val() === 'other';
$('#other, #submit').toggle(flag);
}
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize() + "&ajax=" + 1;
$.ajax({
type: "POST",
url: $(this).data('url'),
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
</script>
</head>
<body>
<form method="post" data-url="<?php echo basename(__FILE__); ?>">
<table>
<tr>
<td>
<select id="country" name="one">
<option value="" selected="selected">Select...</option>
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Us">Us</option>
<option value="other">Other</option>
</select>
<input id="other" type="textbox" name="other">
<input id="submit" type="submit" name="submit" value="Add Country">
</td>
</tr>
</table>
</form>
</body>
that's very easy, just paste the below code on to the upper code.
And remove the jquery ajax call.
<html>
<head>
<title>Dynamic Form</title>
</head>
<body>
<form action="post">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Us">Us</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other" id="other" style="visibility:hidden;"/>
<input type="submit" name="submit" value="Add Country" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
</body>
<?php
if(isset($_POST['other'])) {
$Country = $_POST['other'];
echo $Country;
}
?>
You can change the url into demo.php and use the below one along with exit();,
<?php
if(isset($_POST['submit'])){
$Country = $_POST['other'];
echo $Country;
exit();
}
?>
first you change the url of $ajax
$.ajax({
type: "POST",
url: "demo.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
and then change your "demo.php"
<html>
<head>
<title>Dynamic Form</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "post.php",
data: data
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
</script>
</head>
<body>
<?php
if(isset($_POST['other'])) {
$Country = $_POST['other'];
echo $Country;
}
else{
?>
<form>
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='other') {this.form['other'].style.visibility='visible';this.form['submit'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden';this.form['submit'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="Us">Us</option>
<option value="other">Other</option>
</select>
<input type="textbox" name="other"id="other"style="visibility:hidden;"/>
<input type="submit" name="submit" value="Add Country"style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
<?php } ?>
</body>
Try this
<script>
$(document).ready(function(){
$("form").on('submit',function(event){
event.preventDefault();
var yData = $(this).serialize();
$.post('demo.php', {action:"other",yourData:yData}, function(msg) {
alert( "Data Saved: " + msg );
});
});
</script>
<?php
if($_REQUEST['action']=="other")
{
$country= $_REQUEST['yourData'];
echo $country;
exit;
}
?>
Hopefully this will help you but I don't understand what "data" is. Make sure it is a field or the variable which is supplying value that is required for the page.
$("form").on("submit",function() {
$.ajax({
type : "GET",
cache : false,
url : "post.php",
data : {
data : data
},
success : function(response) {
$('#content').html(response);
}
});
});