Develop Reference

JQuery post to submit HTML form data to php file not working

I am new to Jquery but I have done a lot with html/php in the past. What I need to do is submit for data from within a popup modal, insert that into a mysql database on localhost and then open teh next popup via javascript. As redirecting to the php page does not allow you to load js, I have looked into using jquery to post the data to my phpfile, which will then insert the data and return a code to the jquery, which will then load the next popup if the post was succesful. I have tried different tutorials, but I just cannot get the code to work. Below is my index.php file, which contains the popup form and jquery code...
<div id="survey1" class="w3-modal">
<div class="w3-modal-content w3-animate-top w3-card-4">
<div class="w3-container w3-padding-16">
<div class="section-heading text-center">
<div class="col-md-12 col-xs-12">
<h1>BASIC <span>DETAILS</span></h1>
<p class="subheading">The basics of your business and your website.</p>
</div>
</div>
<form role="form" class="login-form" method="post" action="http://localhost/basic.php" id="basicForm">
<div class="input-group form-group">
<span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
<input type="text" class="form-control" placeholder="Full Name" aria-describedby="basic-addon1" name="name" id="name">
</div>
<div class="input-group form-group">
<span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
<input type="text" class="form-control" placeholder="Email" aria-describedby="basic-addon1" name="email" id="email">
</div>
<div class="input-group form-group">
<span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
<input type="text" class="form-control" placeholder="Business Name" aria-describedby="basic-addon1" name="bname" id="bname">
</div>
<div class="input-group form-group">
<span class="input-group-addon" id="basic-addon1"><i class="fas fa-envelope"></i></span>
<input type="text" class="form-control" placeholder="Business Type" aria-describedby="basic-addon1" name="btype" id="bemail">
</div>
<div id="response"></div>
<button class="btn" type="submit" id="submit1" name="submit1" style="width:40%; float: right;"></button>
</form>
<script>
$(document).ready(function(){
$('#basicForm').on('submit', function(e){
e.preventDefault();
$('#submit1').prop('disabled', true);
var name = $('#name').val();
var email = $('#email').val();
var bname = $('#bname').val();
var btype = $('#bemail').val();
if(name == '' || email == '' || bname == '' || btype == '')
{
$('#submit1').prop('disabled', false);
}
else
{
$.post(
'http://localhost/TDS/basic.php',
$('#basicForm').serialize(),
function(data)
{
$('form').triggered("reset");
$('#submit1').prop('disabled', false);
}
);
}
});
});
</script>
</div>
</div>
</div>
And this is my php insert file...
<?php
require('connection.php')
if(isset($_POST["name"]))
{
$name = mysqli_real_escape_string($con, $_POST["name"]);
$email = mysqli_real_escape_string($con, $_POST["email"]);
$bname = mysqli_real_escape_string($con, $_POST["bname"]);
$btype = mysqli_real_escape_string($con, $_POST["btype"]);
$insert_query = "INSERT INTO Details ('Name', 'Email', 'Business Name', 'Businesss
Type') VALUES ('".$name."', '".$email."', '".$bname."', '".$btype."')";
if(mysqli_query($con, $insert_query))
{
echo json_enchode(success => 1);
}
else
{
echo json_enchode(success => 0);
}
}
?>
Any help would be much appreciated!

The code itself is OK, but you need to load jQuery itself.
Put this somewhere in the beginning of your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
(the tips on how to include jQuery see here: https://www.w3schools.com/jquery/jquery_get_started.asp)
Except this, the code worked for me:
- The form was submitted correctly;
- The PHP endpoint received the correct POST data;
The saving to DB I didn't check, but it looks OK.
Anyways, the PHP part is out of the scope of the question.
Also, a small issue is in the code itself: there's no such method as "$('form').triggered('reset');", use "$('form').trigger('reset');" instead.

How to handle validation errors in laravel5.1 using ajax/jquery

Im creating a validation now using laravel5.1 with ajax of jquery. Everything works fine. But, what I want is to display the errors each <inputs> just like when using validation without ajax. Please see my code below, and the picture for the sample output. I've also tried it with #if of blade(laravel), but not working.
Note: Im using bootstrap framework too.
<div class="row">
<div class="col-md-6">
<div id="result">
<ul></ul>
</div>
<form action="" method="post" id="create">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="description" class="control-label">Description</label>
<textarea name="description" id="description" cols="30" rows="10" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<input type="text" name="type" id="type" class="form-control">
</div>
<div class="form-group">
<label for="price" class="control-label">Price</label>
<input type="text" name="price" id="price" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-success">
</div>
{{ csrf_field() }}
</form>
</div>
</div>
<script>
$(document).ready(function(){
var url = '{{ route('ajax-push') }}';
var token = '{{ csrf_token() }}';
$('#create').on('submit', function(){
$.ajax({
type: 'POST',
url: url,
data: { _token: token },
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(data){
var errors = data.responseJSON;
$('#result').removeClass('alert').removeClass('alert-danger');
$('#result > ul').empty();
$.each(errors, function(i, item){
$('#result').addClass('alert').addClass('alert-danger');
$('#result > ul').append('<li>' + item + '</li>');
});
}
});
return false;
});
});
</script>
Controller
public function postAjaxCreate(Request $request){
$validator = $this->validate($request, [
'name' => 'required|max:255',
'description' => 'required|min:2',
'type' => 'required|max:255',
'price' => 'required|numeric'
]);
if($validator->fails()){
return response()->json($validator->messages(), 200)->with($validator->messages());
}
}

You need to pass the from data to the ajax request
data: $('#create').serialize(),
and most likely the response doesn't have a responseJSON property, and you are sending the data twice from, remove the with function in you php function
Add the errors to the page using something similar to the following js:
$.each(data, function(i, item){
$('#'+i).addClass('alert alert-danger');
('#'+i).after('<p>' + item + '</p>');
});

How to Update/Edit data in database with AngularJS

Working on a web app , I just added the below update code and it's not working .
The summary of all the below code is :
Click a Button called update
It brings out the FORM which should contain the values of the clicked/current product.
Now when I hit save in this form it should update the database but it is not.
I am using $_GET in PHP file (update.php) to get the current Product ID.And then getting all data of that product via that ID.
PS: There is no error in console.
UPDATE CODE:
<?php
include "includes/connection.php";
switch($_GET['action']) {
case 'update_entry' :
$data = json_decode(file_get_contents("php://input"));
$index = $data->id;
$productname = $data->pname;
$company = $data->company;
$price = $data->price;
$quantity = $data->quantity;
if(isset($productname) && !empty($productname) && isset($company) && !empty($company) && isset($price) && !empty($price) && isset($quantity) && !empty($quantity)){
$query = "UPDATE `product` SET `id`='$index',`name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $index";
if(mysqli_query($con, $query)) {
return true;
} else {
echo "Error: " . $sql . "<br />" . mysqli_error($con);
}
break;
}
}
?>
Controller :
myApp.controller("updateCtrl",['$scope','$http','$routeParams','$location',function($scope,$http,$routeParams,$location){
$scope.update = function(){
var currentId = $routeParams.id;
$http.post("update.php?action=update_entry",{'id':currentId})
.then(function(data){
$location.path('/viewproduct');
});
}
}]);
HTML:
<form style="padding:10px" ng-controller="updateCtrl">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
</div>
<button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
Cancel
<h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>
Update Button:
<td ng-controller="updateCtrl"><a class="btn btn-primary" href="#/updateproduct/action={{product.id}}" >Update</a></td>

Do like below
your view part
<form style="padding:10px" ng-controller="updateCtrl">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="{{product.name}}" ng-model="productname" required>
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="{{product.company}}" ng-model="company" required>
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="{{product.price}}" ng-model="price" required>
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="{{product.quantity}}" ng-model="quantity" required>
</div>
<button type="submit" class="btn btn-default" ng-click="update()">Save updated data</button>
Cancel
<h1 ng-if="successMessage == 0">Great Data is Updated!</h1>
</form>
<td><a class="btn btn-primary" ng-click="addProductData();" >Update</a></td>
Inside your controller do like below
$scope.addProductData=function(){
var updatedata=$.param({'action':'update','productname':$scope.productname,'company':$scope.company,'price':$scope.price,'quantity':$scope.quantity,'id':currentId});
$http({
method:'POST',
url:'update.php',
data:updatedata,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
alert(response.data['msg']);
},function errorCallback(response) {
alert(response.data['msg']);
});
}
your update.php file should like below.
<?php
include "includes/connection.php";
$result=array();
if(isset($_REQUEST["action"]) && $_REQUEST["action"] !=""){
if($_REQUEST["action"]=="update"){
$productname = $_POST['productname'];
$company = $_POST['company'];
$price = $_POST['price'];
$quantity = $_POST['quantity'];
$id=$_POST['id'];
$query = "UPDATE `product` SET `name`='$productname',`company`='$company',`price`='$price',`quantity`='$quantity' WHERE id= $id";
if(mysqli_query($con, $query)) {
$result['msg']="updated successfully";
}else{
header("HTTP/1.0 401 Unauthorized");
$result['msg']="unable to updated";
}
echo json_encode($result);
}
}
?>
i think you may basic idea.now you can implement in your way.

Try to use ng-model="{{product.name}}}" and not the placeholder in HTML.
And in your controller pass that model:
$http.post("update.php?action=update_entry",$scope.product)
Then you should get some data in your PHP.

Have you checked your php alone to make sure that you can fetch and update data using the php without angular? I would use post as it is more friendly for retrieving and updating data.
I would also b separate your call to the php endpoint into a service (factory). I would also just pass the entire object back through to ensure that you aren't missing something unless you have a concern about bandwidth.
I would unit test php first. Then separate logic in angular. Then b step through in debug to see what's being passed from the view.

I think you should check this: https://github.com/eliarms/CustomerManagerApp
This is a simple customer management app using Angularjs and PHP. The goal of the application is to highlight a lot of the different features offered by AngularJS and demonstrate how they can be used together.

Image not send using javascript when submit form no refresh page

I have a javascript using send text and photo, my problem is photo not send in my directory folder and empty column photo in database.
How to fix this? I'm confused :(
This is my screenshot result
index.php
<script>
$(function () {
$('#fr_testi').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'testi.php',
data: $('#fr_testi').serialize(),
success: function () {
document.getElementById("sc_testi").innerHTML = "Succes :)";
$('#nama_testi').val("");
$('#status_testi').val("");
$('#foto_testi').val("");
$('#komentar_testi').val("");
}
});
});
});
</script>
<form method="POST" id="fr_testi" enctype="multipart/form-data">
<div class="control-group">
<label class="control-label">Nama</label>
<div class="controls">
<input name="nama" id="nama_testi" maxlength="100" type="text" required>
<input type="hidden" value="<?php echo $sk->kode?>" name="kode">
</div>
</div>
<div class="control-group">
<label class="control-label">Status</label>
<div class="controls">
<input id="status_testi" name="status" maxlength="100" type="text" required>
</div>
</div>
<div class="control-group">
<label class="control-label">Foto</label>
<div class="controls">
<input name="foto" id="foto_testi" type="file" required>
</div>
</div>
<div class="control-group type2">
<label class="control-label">Komentar</label>
<div class="controls">
<textarea maxlength="250" id="komentar_testi" name="komentar" required></textarea>
</div>
</div>
<center>
<button type="submit" class="button button_type_2 button_grey_light">Send</button><br/><br/>
<font color="green" id="sc_testi"></font>
</center>
</form>
testi.php
<?php
include "element/koneksi.php";
$nama = $_POST['nama'];
$kode = $_POST['kode'];
if ($nama!=NULL or $kode!=NULL) {
date_default_timezone_set("Asia/Jakarta");
$tglnya = date("Y-m-d");
$status = $_POST['status'];
$komentar = $_POST['komentar'];
$warna = "#52B3D9";
$kon = "NO";
$namafile_tmp = $_FILES['foto']['tmp_name'];
if($namafile_tmp){
$namafile = $_FILES['foto']['name'];
$file = $kode."_".$tglnya."_".$namafile;
copy($namafile_tmp, "images/sekolah/testimoni/{$file}");
unlink($namafile_tmp);
}
$query= "INSERT INTO sekolah_testimoni VALUES(id_testi,'$kode','$nama','$komentar','$status','$file','$warna',now(),'$kon','$kon')";
mysql_query($query);
}
else
{
echo "<script language='JavaScript'>window.history.back() </script>";
}
?>

The jquery method serialize doesn't include input file type.
If you just want to register filename on DB, you can use JS like below instead of serialize.
sendData = "";
$.each($("#formulario input, #formulario select"), function () {
if ($(this).prop("type") == "submit") return;
sendData += sendData!=""?"&":"";
sendData += $(this).prop("name") + "=" + $(this).val()
});
But if you want to upload file, save on the server and then register the location on DB, you should post directly from HTML or use FormData javascript object to perform this task.
fileInputElement = document.getElementById("yourFileInputID");
var formData = new FormData();
formData.append("userfile", fileInputElement.files[0]);
// if you need to upload multiple files you should loop through the fileInputElement.files array, appending one by one
var request = new XMLHttpRequest();
request.open("POST", "http://yourURL/");
request.send(formData);
Unfortunately this method doesn't work on old browsers. To get upload working on those you should use an iframe solution (post form to an invisible iframe without leaving the page).

Angularjs - form validation

im trying to validate my users inputs and it works greate that the user can press the submit btn and it errors the input fields that is missing so the user know what input he is missing.
My problem is that it only works when i remove action="/buy" method="post" but i need it to normal submit the form when there is no errors.
How can i do that?
Im using this form validation with angularjs validate http://www.brentmckendrick.com/code/xtform/
<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<label class="control-label" for="textinput">Fornavn <span class="star-color">*</span></label>
<input autocomplete="off" type="text" value="<?php echo set_value('fornavn'); ?>" name="fornavn" ng-model="fornavn" class="form-control" xt-validate required>
</div>
<button id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>
</form>

Well you can use the $http service to send any type of request to server. When you actually do form post data is posted with content-type:'application/x-www-form-urlencoded'.
For your request if you can set the correct content-type and encode the object to send correctly, it would work. See this fiddle i created earlier that sends data to server as standard form post.
http://jsfiddle.net/cmyworld/doLhmgL6/
The relevant $http request looks like
$scope.update = function (user) {
$http({
method: 'POST',
url: 'https://mytestserver.com/that/does/not/exists',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: function (data) {
var postData = [];
for (var prop in data)
postData.push(encodeURIComponent(prop) + "=" + encodeURIComponent(data[prop]));
return postData.join("&");
},
data: user
});

You can model your input fields, and delegate each field to your model as:
<form name="userForm" ng-submit="submitForm(userForm.$valid)" xt-form novalidate>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn.$invalid && !userForm.fornavn.$pristine }">
<input autocomplete="off" type="text" name="fornavn" ng-model="fornavn.input1" class="form-control" xt-validate required>
</div>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn2.$invalid && !userForm.fornavn2.$pristine }">
<input autocomplete="off" type="text" name="fornavn2" ng-model="fornavn.input2" class="form-control" xt-validate required>
</div>
<div class="col-sm-6" ng-class="{ 'has-error' : userForm.fornavn3.$invalid && !userForm.fornavn3.$pristine }">
<input autocomplete="off" type="text" name="fornavn3" ng-model="fornavn.input3" class="form-control" xt-validate required>
</div>
<button id="membership-box__payBtn" type="submit" name="betaling" class="btn btn-success text-uppercase">Go to payment</button>
</form>
And in your controller, send data using $http as:
var baseUrl=<yourBaseUrl>;
var url = baseUrl+'/buy';
var data = $scope.fornavn;
if(!$scope.userForm.$invalid){
$http.post(url, data).
success(function(data) {
if (data.error_msg) {
alert(data.error_msg);
}else{
alert("Successful! ");
}
}).
error(function(data) {
alert('error');
});
}