We Keep Coding

AJAX form with e.preventDefault(); redirects to the PHP file

When I click the button to submit the form it sends me to the PHP file (Php/modify-recipes.php). I'm using AJAX with e.preventDefault();, but it doesn't seem to work. I have a similar form on my other page and it works fine. This one is a little bit different, the form is generated from another PHP file (it takes values from the database).
// AJAX (in HTML head tag)
<script>
$(function () {
$("#search-form").on('click', 'p.product', function(e){
var product = $(this).attr('id');
e.preventDefault();
$.ajax({
type: "post",
url: 'Php/display-modify-recipes.php',
data: { "id": product },
success: function(response) {
$(".modify-recipes").html(response);
$(".search-results").html("");
}
});
}
)});
$(function () {
$('#add_recipes_form').on('click', '#add', function (e) {
e.preventDefault();
let sendForm = true;
$('.required').each(function(){
if ($(this).val() == ''){
$(this).addClass('error', 4000);
$('#placeholder-text').html("Fill in the form");
$('#placeholder-text').addClass('error');
$('#add').addClass('error', 4000);
sendForm = false;
} else {
$(this).removeClass('error');
$('#placeholder-text').removeClass('error');
$('#add').removeClass('error');
}
})
$('.required2').each(function(){
if ($(this).val() == ''){
$('#placeholder-text').html("Fill in the form");
$('#placeholder-text').addClass('error');
$('#add').addClass('error');
$('#file_style').addClass('error');
sendForm = false;
} else {
$('#file_style').removeClass('error');
$('#placeholder-text').removeClass('error');
$('#add').removeClass('error');
}
})
if (sendForm) {
$.ajax({
type: "post",
url: 'Php/modify-recipes.php',
data: new FormData(this),
processData: false,
contentType: false,
success: function () {
},
error: function () {
}
});
}
});
});
</script>
// HTML
<form method="POST" enctype='multipart/form-data' id="search-form" class="aaa">
<input type="text" name="search-bar" class="search-bar" placeholder="Search">
<div class="search-results"></div>
</form>
<div class="modify-recipes"></div>
// Php/display-modify-recipes.php
<?php
function display_mod_form(){
$con = mysqli_connect("localhost", "root", "", "cookbook");
$product = $_POST["id"];
$sql = "SELECT * FROM product WHERE id = '$product'";
$res = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($res)) {
$id = $row['id'];
$name = $row['name'];
$description = $row['description'];
$type = $row['type'];
$difficulty = $row['difficulty'];
$image = $row['image'];
?>
<form method="POST" action="Php/modify-recipes.php" enctype="multipart/form-data" id="add_recipes_form" class="add-form">
<input type="text" name="id" id="<?php echo $id ?>" value="<?php echo $id ?>" style="display:none;">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required" maxlength="28" value='<?php echo $name ?>'>
<label for="description">Desc.</label>
<input type="text" name="description" id="description" class="required" maxlength="128" value='<?php echo $description ?>'>
<label for="type">Type</label>
<select name="type" class="required">
<option value="dishes" <?php if($type == 'dishes') {echo "selected=selected"; } ?>>
Dishes
</option>
<option value="desserts" <?php if($type == 'desserts') {echo "selected=selected"; } ?>>
Desserts
</option>
<option value="snacks" <?php if($type == 'snacks') {echo "selected=selected"; } ?>>
Snacks
</option>
<option value="other" <?php if($type == 'other') {echo "selected=selected"; } ?>>
Other
</option>
</select>
<label for="difficulty">Difficulty</label>
<select name="difficulty" class="required">
<option value="easy" <?php if($difficulty == 'easy') {echo "selected=selected"; } ?>>
Ease
</option>
<option value="moderate" <?php if($difficulty == 'moderate') {echo "selected=selected"; } ?>>
Moderate
</option>
<option value="hard" <?php if($difficulty == 'hard') {echo "selected=selected"; } ?>>
Hard
</option>
</select>
<label for="image">Image (jpg, png)</label>
<label for="upload_image" id="file_style">Choose image</label>
<input type="file" style="display:none;" id="upload_image" name="image" accept="image/*" onchange="loadFile(event)" class="required2">
<div class="send-btn">
<p id="placeholder-text"></p>
<input type="submit" name="add" id="add" value="Send">
<div class="send-block"></div>
</div>
</form>
<?php
}
mysqli_close($con);
}
display_mod_form();
?>
// Php/modify-recipes.php
<?php
$con = mysqli_connect("localhost", "root", "", "cookbook");
$id = $_POST["id"];
$name = $_POST["name"];
$description = $_POST["description"];
$type = $_POST["type"];
$difficulty = $_POST["difficulty"];
if ($_FILES['image']['name'] == ""){
$sql_var = "SELECT image FROM product where id = '$id'";
$var = mysqli_query($con,$sql_var);
while($row = mysqli_fetch_assoc($var)) {
$image = $row['image'];
}
} else {
$image = $_FILES['image']['name'];
}
$sql = "
UPDATE product SET
name = '$name',
description = '$description',
type = '$type',
difficulty = '$difficulty',
image = '$image',
last_mod_date = '$mod_date'
WHERE id = '$id';
";
$target = "../Uploads/".basename($image);
if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
}
$var = mysqli_multi_query($con,$sql); <!-- There are more queries -->
mysqli_close($con);
?>
(Sorry for any mistakes, it's a shortened version)
There is a third ajax function and PHP file, but it's not important (simple search bar). I tried other things like action="", no action at all, etc., but it didn't work.
How to fix this?
Edit: There is only one form (when you click on p.product it displays the form according to the data in the database). The problem occurs ONLY when I'm submitting the "add_recipes_form", there is no problem with the search box. Please don't mark this question as a duplicate of a 10 year old post that is irrelevant to my problem.

How do I insert data from selected ajax dropdown PHP

Here's the sample of my codes:
In index.php, I created drop down HTML and load drop down list with employee names from MySQL database table.
<div class="page-header">
<h3>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM
employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:".
mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo
$rows["employee_name"]; ?></option>
<?php } ?>
</select>
</h3>
</div>
<div id="display">
<div class="row" id="heading" style="display:none;"><h3><div
class="col-sm-3"><strong>Employee Name</strong></div><div class="col-sm-4">
<strong>Age</strong></div><div class="col-sm-4"><strong>Salary</strong>
</div>
</h3></div><br>
<div class="row" id="records"><div class="col-sm-3" id="emp_name"></div>
<div class="col-sm-4" id="emp_age"></div><div class="col-sm-3"
id="emp_salary"></div></div>
<div class="row" id="no_records"><div class="col-sm-3">Plese select
employee name to view details</div></div>
</div>
<div style="margin:50px 0px 0px 0px;">
<input type="submit" class="btn btn-default read-more" name="submit" value="submit">
</div>
</div>
Drop Down Selection Data Load with jQuery Ajax
Now in getData.js JavaScript file, we will handle drop down selection change event to get selected value and make Ajax request to server getEmployee.php to get selected employee details from MySQL database table employee. The Ajax request gets response employee data in JSON format from server. We will display that response JSON data with jQuery.
$(document).ready(function(){
// code to get all records from table via select box
$("#employee").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
Get Data from MySQL Database
Now finally in getEmployee.php, we will get employee details from MySQL database table and return data as JSON using json_encode.
<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM
employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:".
mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>
Now, I am going to add SUBMIT button and if that button is set, I want to INSERT the data that has been shown in the table after I clicked one of the employee names in the dropdown option. How do I do that?

You should link the Submit button .click event to an Ajax call.
Also you must have insertEmp.php file which will make the insert.
First, set an id to your Submit button (id = submitButton)
An approximation of the code could be like this:
$('#submitButton').click(function() {
$.ajax({
url:"/insertEmp",
type: "POST",
data: {emp_name:$('#emp_name').val() , emp_salary:$('#emp_salary').val() , .. all the others parameters... },
success: function (results) {
},
error: function (results) {
}
})
})

Code works on localhost, but not on live server

I've been working on some code and tested it on localhost, code is work on local server but when i Upload it to my server it doesn't work.
Index.php
<form action="" method="post" id="teachome">
<label>
Category</label**strong text**>
<select id="listt" type="text" name="nam" style="width:188px;" required>
<?php
$data1 = mysqli_query($con,"SELECT * FROM admin_cat");
echo "<option value=>--select--</option>";
while($rows = mysqli_fetch_array($data1)){?>
<option value="<?php echo $rows['cat']; ?>"><?php echo $rows['cat']; ?></option>
<?php } ?>
</select>
<label>Class</label>
<select id="cat" type="text" name="cls" style="width:188px;" required>
<option value="">--Select--</option>
</select>
</form>
<!--Ajax -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#listt").change(function() {
var data = $("#teachome").serialize();
//alert(data);
$.ajax({
type: 'POST',
url: 'fetch.php',
data: data,
datatype: 'json',
success: function(data) {
var obj = jQuery.parseJSON(data);
$('#cat').empty();
$.each(obj, function(index, value) {
$("#cat").append("<option>" + value.class + "</option>");
});
}
});
});
});
</script>
Fetch.php
<?php
$cat=$_POST['nam'];
$sql= mysqli_query($con,"select * from admin_class where category='$cat'")or die(mysqli_error());
$result = mysqli_fetch_all($sql, MYSQLI_BOTH);
echo json_encode($result);
?>
Internal Error 500 is occurred in Response on live server.

Query MySQL database using value from a dropdown, then populate a text field with the result without refreshing the page

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);
}
?>

AJAX comment system Validation problems

So i am haveing this page where it is displaying articles andunderneet each article it will have a textarea asking allowing the user to insert a comment.I did the AJAX and it works fine.Some of the validation works fine aswell(Meaning that if the textarea is left empty it will not submit the comment and display an error).The way i am doing this validation is with the ID.So i have multi forms with the same ID.For the commets to be submited it works fine but the validtion doesnt work when i go on a second form for exmaple it only works for the first form
AJAX code
$(document).ready(function(){
$(document).on('click','.submitComment',function(e) {
e.preventDefault();
//send ajax request
var form = $(this).closest('form');
var comment = $('#comment');
if (comment.val().length > 1)
{
$.ajax({
url: 'ajax_comment.php',
type: 'POST',
cache: false,
dataType: 'json',
data: $(form).serialize(), //form serialize data
beforeSend: function(){
//Changeing submit button value text and disableing it
$(this).val('Submiting ....').attr('disabled', 'disabled');
},
success: function(data)
{
var item = $(data.html).hide().fadeIn(800);
$('.comment-block_' + data.id).append(item);
// reset form and button
$(form).trigger('reset');
$(this).val('Submit').removeAttr('disabled');
},
error: function(e)
{
alert(e);
}
});
}
else
{
alert("Hello");
}
});
});
index.php
<?php
require_once("menu.php");
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="comments.js" type="text/javascript" ></script>
<?php
$connection = connectToMySQL();
$selectPostQuery = "SELECT * FROM (SELECT * FROM `tblposts` ORDER BY id DESC LIMIT 3) t ORDER BY id DESC";
$result = mysqli_query($connection,$selectPostQuery)
or die("Error in the query: ". mysqli_error($connection));
while ($row = mysqli_fetch_assoc($result))
{
$postid = $row['ID'];
?>
<div class="wrapper">
<div class="titlecontainer">
<h1><?php echo $row['Title']?></h1>
</div>
<div class="textcontainer">
<?php echo $row['Content']?>
</div>
<?php
if (!empty($row['ImagePath'])) #This will check if there is an path in the textfield
{
?>
<div class="imagecontainer">
<img src="images/<?php echo "$row[ImagePath]"; ?>" alt="Article Image">
</div>
<?php
}
?>
<div class="timestampcontainer">
<b>Date posted :</b><?php echo $row['TimeStamp']?>
<b>Author :</b> Admin
</div>
<?php
#Selecting comments corresponding to the post
$selectCommentQuery = "SELECT * FROM `tblcomments` LEFT JOIN `tblusers` ON tblcomments.userID = tblusers.ID WHERE tblcomments.PostID ='$postid'";
$commentResult = mysqli_query($connection,$selectCommentQuery)
or die ("Error in the query: ". mysqli_error($connection));
#renderinf the comments
echo '<div class="comment-block_' . $postid .'">';
while ($commentRow = mysqli_fetch_assoc($commentResult))
{
?>
<div class="commentcontainer">
<div class="commentusername"><h1>Username :<?php echo $commentRow['Username']?></h1></div>
<div class="commentcontent"><?php echo $commentRow['Content']?></div>
<div class="commenttimestamp"><?php echo $commentRow['Timestamp']?></div>
</div>
<?php
}
?>
</div>
<?php
if (!empty($_SESSION['userID']) )
{
?>
<form method="POST" class="post-frm" action="index.php" >
<label>New Comment</label>
<textarea id="comment" name="comment" class="comment"></textarea>
<input type="hidden" name="postid" value="<?php echo $postid ?>">
<input type="submit" name ="submit" class="submitComment"/>
</form>
<?php
}
echo "</div>";
echo "<br /> <br /><br />";
}
require_once("footer.php") ?>
Again the problem being is the first form works fine but the second one and onwaord dont work properly

try this:
var comment = $('.comment',form);
instead of
var comment = $('#comment');
That way you're targeting the textarea belonging to the form you're validating
ps.
remove the id's from the elements or make them unique with php, all element id's should be unique