Angular JS md-datepicker - php

I want to insert my md-datepicker value into PHP database but while inserting the error is that the data is undefined, in case of Date. How should I insert the value of md-datepicker inside the PHP Page.
reservation.html
<div id="reservation" class="reservation" ng-controller="ReservationController">
<h2><i>Reservations</i></h2>
<div class="datepicker" ng-controller="DatePickerController">
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap required>
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter Date" md-open-on-focus required></md-datepicker>
</div>
<input type='text' class='myBox' placeholder="Enter your name..." ng-model="username">
<input type='text' class='myBox' style="margin-left:100px;" placeholder="Enter your mobile number..." ng-model="mobile_number">
<div class="book">
<button type="submit" class="btn btn-primary btn-lg" ng-click="insertData()">Book Your Meal</button>
</div>
</div>
datepicker.js
app.controller('DatePickerController',['$scope',function($scope){
this.myDate = new Date();
var [] newDate = ctrl.MyDate.Split(T);
string finalDate = newdate[0];
$scope.myDate = finalDate;
this.isOpen = false;
}]);
reservation.js
app.controller("ReservationController",['$scope', '$http', function ($scope,$http) {
$scope.insertData = function(){
//window.location.href='index.html#/menu';
$http.post('database/push_Reservation.php',{'username':$scope.username, 'mobile_number': $scope.mobile_number, 'mydate': $scope.myDate})
.then(function(data){
console.log(data);
});
}
}]);

DatepickerController:
app.controller('DatePickerController',['$scope',function($scope){
this.myDate = new Date();
var [] newDate = ctrl.MyDate.Split(T);
string finalDate = newdate[0];
$scope.myDate = finalDate;
this.isOpen = false;
$scope.$emit('response', $scope.myDate);
}]);
ReservationController:
app.controller("ReservationController",['$scope', '$http', function ($scope,$http) {
$scope.$on('response', function (evnt, data) {
$scope.myDate = data;
});
$scope.insertData = function(){
//window.location.href='index.html#/menu';
$http.post('database/push_Reservation.php',{'username':$scope.username, 'mobile_number': $scope.mobile_number, 'mydate': $scope.myDate})
.then(function(data){
console.log(data);
});
}
}]);

Related

Record not insert into the database using laravel 8 ajax

i am a begineer of laravel and ajax i can do the system well in core php. i just converted to laravel.
i creating simple crud using laravel with ajax but i don't know how call the path through ajax request. what i tried so fat i attached below.pls give me the solution for it.
Screen shot of folder structure
this is view part. i name it
list.blade.php
div class="row">
<div class="col-sm-4">
<form class="card" id="frmProject">
<div class="form-group" align="left">
<label class="form-label">First name</label>
<input type="text" class="form-control" placeholder="first_name" id="first_name" name="first_name" size="30px" required>
</div>
<div class="form-group" align="left">
<label class="form-label">Last name</label>
<input type="text" class="form-control" placeholder="last_name" id="last_name" name="last_name" size="30px" required>
</div>
<div class="form-group" align="left">
<label class="form-label">Address</label>
<input type="text" class="form-control" placeholder="Address" id="address" name="address" size="30px" required>
</div>
<div class="card" align="right">
<button type="button" id="save" class="btn btn-info" onclick="addProject()">Add</button>
</div>
</form>
</div>
Ajax Call
function addProject() {
if ($("#frmProject").valid())
{
var _url = '';
var _data = '';
var _method;
if (isNew == true) {
_url = '/student';
_data = $('#frmProject').serialize();
_method = 'POST';
}
else {
_url = '/student',
_data = $('#frmProject').serialize() + "&project_id=" + project_id;
_method = 'POST';
alert(project_id);
}
$.ajax({
type: _method,
url: _url,
dataType: 'JSON',
data: _data,
beforeSend: function () {
$('#save').prop('disabled', true);
$('#save').html('');
$('#save').append('<i class="fa fa-spinner fa-spin fa-1x fa-fw"></i>Saving</i>');
},
success: function (data) {
$('#frmProject')[0].reset();
$('#save').prop('disabled', false);
$('#save').html('');
$('#save').append('Add');
get_all();
var msg;
console.log(data);
if (isNew)
{
msg="Brand Created";
}
else{
msg="Brand Updated";
}
$.alert({
title: 'Success!',
content: msg,
type: 'green',
boxWidth: '400px',
theme: 'light',
useBootstrap: false,
autoClose: 'ok|2000'
});
isNew = true;
},
error: function (xhr, status, error) {
alert(xhr);
console.log(xhr.responseText);
$.alert({
title: 'Fail!',
content: xhr.responseJSON.errors.product_code + '<br>' + xhr.responseJSON.msg,
type: 'red',
autoClose: 'ok|2000'
});
$('#save').prop('disabled', false);
$('#save').html('');
$('#save').append('Save');
}
});
}
}
Student Controller
class StudentController extends Controller
{
public function index()
{
$data['students'] = Student::orderBy('id','desc')->paginate(5);
return view('student.list',$data);
}
public function create()
{
}
public function store(Request $request)
{
$student = new Student([
'first_name' => $request->post('first_name'),
'last_name'=> $request->post('lastname'),
'address'=> $request->post('address')
]);
]);
$student->save();
return Response::json($student);
}
routes
Route::get('/', [App\Http\Controllers\StudentController::class, 'index']);
Route::get('student', [App\Http\Controllers\StudentController::class, 'index']);
Route::post('student', [App\Http\Controllers\StudentController::class, 'store'])->name('student.store');
$(document).ready(function() {
$(".btn-submit").click(function(e){
e.preventDefault();
var _token = $("input[name='_token']").val();
var email = $("#email").val();
var pswd = $("#pwd").val();
var address = $("#address").val();
$.ajax({
url: "url",
type:'POST',
data: {_token:_token, email:email, pswd:pswd,address:address},
success: function(data) {
printMsg(data);
}
});
});
function printMsg (msg) {
if($.isEmptyObject(msg.error)){
console.log(msg.success);
$('.alert-block').css('display','block').append('<strong>'+msg.success+'</strong>');
}else{
$.each( msg.error, function( key, value ) {
$('.'+key+'_err').text(value);
});
}
}
});
Please use csrf token

how to update the data using angularjs+php?

I need to update the data from MySQL DB using AngularJS + PHP.
Dashboard.html is my first page I just give only two field: name and position, and I fetch the data from DB using ng-repeat after fetch the code the user will click the edit button it will redirect to the edit.html page with the same fields: name and position. Help me to fetch that name and position data in edit.html page
Dashboard.html
<div ng-app="myapp" ng-controller="usercontroller">
<table>
<th>Name</th>
<th>Position</th>
<tbody>
<tr ng-repeat="x in names">
<td>{{x.name}}</td>
<td>{{x.position}}</td>
<td>
<span class="glyphicon glyphicon-edit" ng-click="updateData(x.name, x.position)" ></span>
</td </tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("usercontroller", function($scope, $http) {
$scope.updateData = function(name, position) {
$scope.name = name;
$scope.position = position;
$scope.btnName = "Update";
}
});
</script>
This is my edit.html page and am using ng-model to bind the data from
dashboard.html, but it is not binding. And I click the update button the data have to update with id, and I mentioned my PHP file also.
My DB name sample and table named demo.
Edit.html
<div ng-app="myapp" ng-controller="EditController">
<form name="form">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" ng-model="name" /> {{name}}
</div>
<div class="form-group">
<label for="position">Position</label>
<input class="form-control" type="text" name="position" ng-model="position" />
</div>
<input type="submit" name="btnUpdate" class="btn btn-success" ng-click="update_data()" value="{{btnName}}">
</form>
<script>
var app = angular.module("myapp", []);
app.controller("EditController", function($scope, $http) {
$scope.btnName = "Update";
$scope.update_data = function() {
$http.post(
"edit.php", {
'name': $scope.name,
'position': $scope.position,
'btnName': $scope.btnName
}
).success(function(data) {
alert(data);
$scope.name = null;
$scope.position = null;
$scope.btnName = "Update";
});
}
});
</script>
Edit.php
<?php
$connect = mysqli_connect("localhost", "root", "", "sample");
$data = json_decode(file_get_contents("php://input"));
if (count($data) > 0) {
$name = mysqli_real_escape_string($connect, $data->name);
$position = mysqli_real_escape_string($connect, $data->position);
$btn_name = $data->btnName;
if ($btn_name == 'Update') {
$id = $data->id;
$query = "UPDATE demo SET name = '$name',position = '$position' WHERE id = '$id'";
if (mysqli_query($connect, $query)) {
echo 'Updated Successfully...';
} else {
echo 'Failed';
}
}
}
?>
You have two different controllers: usercontroller and EditController. Once you leave one and enter another, you lose your bindings. So ng-model="name" in once controller is completely different from ng-model="name" in the second controller.
To make sure that they are the same, you need to create a service that will share data between controllers. You can make it like a simple storage service without any bindings.
When you want to update the data, you need to save it in the service as well. And whenever you want to edit it, you need to pull that data out of it, and populate your models.
Example of such service:
app.service("storageService", function() {
this.data = {};
this.set = function(name, position, btnName) {
this.data = {
"name": name,
"position": position,
"btnName": btnName
};
}
this.get = function() {
return this.data;
}
this.clear = function() {
this.data = {
"name": null,
"position": null,
"btnName": null
};
}
})
The you can inject it into your controllers and use it's functions:
usercontroller
app.controller("usercontroller", function($scope, $http, storageService) { // <-- note the injection
$scope.updateData = function(name, position) {
$scope.name = name;
$scope.position = position;
$scope.btnName = "Update";
storageService.set($scope.name, $scope.position, $scope.btnName); // saving data
}
});
EditController
app.controller("EditController", function($scope, $http, storageService) {
var d = storageService.get(); // loading data
$scope.name = d.name;
$scope.position = d.position;
$scope.btnName = "Update"; // = d.btnName;
$scope.update_data = function() {
$http.post(
"edit.php", {
'name': $scope.name,
'position': $scope.position,
'btnName': $scope.btnName
}
).success(function(data) {
alert(data);
$scope.name = null;
$scope.position = null;
$scope.btnName = "Update";
});
}
});

Activate JS functionality on clone two inputs fields

i have a form with various fields, and a pair of buttons of clone and remove the cloned part of the form.
Also, i have in those fields a pair of inputs of integers that when i click in one of them
the value "jump" to the other field when clicked.
The problem is when i clone the form the functionality of "jump" do not attach to the other cloned inputs.
this is the clone function :
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1;//$(".clonedInput").length;
function clone(){
cloneIndex++;
$(this).parents(".clonedInput").clone()
.appendTo("form")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
//console.log(this.val);
//this.value = $(match).val();
//console.log("El valor seleccionado es ");
//this.val = match[1].val;
}
})
.on('click', 'button.clone', clone)
.on('click', 'button.remove', remove);
return false;
}
function remove(){
if($('.actions').length == 2){
console.log('accion cancelada');
}else{
$(this).parents(".clonedInput").remove();
}
return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
an approach to this was made with this code using dinamicaly for php
$("input[id^='montoa']").on("click", function(e){
var montoa_id = this.id;
var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];
$('#'+montoa_id).value = $('#'+montob_id).val();
$('#'+montob_id).value = '';
});
the inputs are this :
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
</div>
and all the n-cloned fields are numbered by auto-increase the id like id="montoa2" and id="montob3" and so on.
all comments wil be very appreciated.
EDIT : Create a jsfiddle https://jsfiddle.net/o63c61sj/
today solved !
This time was add a param to a .clone() function
This because this is a deepWithDataAndEvent clonation event as jquery says.
.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
The solution this time for me was clone(true).
Hope someone else could be useful. `
$(document).ready(function() {
$("input[id^='montoa']").attr("placeholder", "dollars");
$("input[id^='montob']").attr("placeholder", "dollars");
$("#montoa1").on('click', function() {
var montoa = $('#montoa1').val();
$('#montoa1').val($('#montob1').val());
$('#montob1').val(0);
});
$("#montob1").on('click', function() {
var montoa = $('#montoa1').val();
$('#montoa1').val(0);
$('#montob1').val(montoa);
});
}
/*
$("input[id^='montoa']").on("click", function(e){
var montoa_id = this.id;
var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];
$('#'+montoa_id).value = $('#'+montob_id).val();
$('#'+montob_id).value = '';
});
$("input[id^='montob']").click(function(){
console.log(this.id);
});
*/
);
var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1; //$(".clonedInput").length;
function clone() {
cloneIndex++;
$(this).parents(".clonedInput").clone(true)
.appendTo("form")
.attr("id", "clonedInput" + cloneIndex)
.find("*")
.each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cloneIndex);
}
})
.on('click', 'button.clone', clone)
.on('click', 'button.remove', remove);
return false;
}
function remove() {
if ($('.actions').length == 2) {
console.log('accion cancelada');
} else {
$(this).parents(".clonedInput").remove();
}
return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post">
<div id="clonedInput1" class="clonedInput">
<div class="form-group row">
<div class="actions">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="actions">
<button class="clone btn btn-success">Duplicar</button>
<button class="remove btn btn-warning">Quitar</button>
</div>
</div>
<div class="panel-body">
<div class="form-group row">
<div class="col-md-2">
same js functions on all cloned
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
</div>
<div class="col-md-1">
<input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
`

select ajax result and replace in input search PHP

I want select result Ajax request and Replace it on my input.
result display in result div,I want selected one of them and insert to mobile input and hidden results
<form method="post" action="#" class="form-horizontal" id="adduser">
<div class="form-group"><label class="col-sm-2 control-label">Mobile</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="mobile" id="mobile" autocomplete="off" />
<div id="result"></div></div>
</div>
<input type="submit" name="useradd" id="useradd" class="btn btn-block btn-w-m btn-success" value="add">
</form>
ajax jquery :
<script>
$(document).ready(function(){
var req = null;
$('#mobile').on('keyup', function(){
var mobile = $('#mobile').val();
if (mobile && mobile.length > 2)
{
$('#loading').css('display', 'block');
if (req)
req.abort();
req = $.ajax({
url : 'ajax.php',
type : 'POST',
cache : false,
data : {
mobile : mobile,
},
success : function(data)
{
console.log(data)
if (data)
{
$('#loading').css('display', 'none');
$("#result").html(data).show();
}
}
});
}
else
{
$('#loading').css('display', 'none');
$('#result').css('display', 'none');
}
});
});
</script>
fetch data and return in Ajax.php
if(isset($_POST['mobile'])) {
$user = new User();
$result = $user->Searchuser($_POST['mobile']);
$mobiles= array();
$names = array();
while ($info = $result->fetch(PDO::FETCH_ASSOC)) {
echo $info['firstname'].'-'.$info['mobile'].'<br/>';
}
}
Look this pic :
I want select Dany and insert that to mobile input

How to check time overlap in bootstrap date

I want to check shift start time and shift time values overlapped or not. if user enter overlapped values it should prompt error. please advice
<div class="form-group">
<label for="">Shift Start:</label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' name="shift_start" class="form-control"
id='datetimepicker3' value="{{old('shift_start')}}" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-time"></span>
</span>
</div>
<div class="form-group">
<label for="">Shift End:</label>
<div class='input-group date' id='datetimepicker5'>
<input type='text' name="shift_end" class="form-control"
value="{{old('shift_end')}}" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
this is my script
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm'
});
});
Create a javascript function :
function checkTime()
{
var start = $('#datetimepicker3').val();
var end = $('#datetimepicker5').val();
var tabStart = start.split(':');
var tabEnd = end.split(':');
var dateStart = new Date();
dateStart.setHours(parseInt(tabStart[0]));
dateStart.setMinutes(parseInt(tabStart[1]));
var dateEnd = new Date();
dateEnd.setHours(parseInt(tabEnd[0]));
dateEnd.setMinutes(parseInt(tabEnd[1]));
if(dateStart < dateEnd)
{
alert('ok');
}
else
{
alert('ko');
}
}
Then in you datetimepicker :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
});

Categories