how to passing datepicker value to controller? - javascript

i new to use laravel framework,,
i want to passing datepicker value after user select the date
i try to give button, to submit that value, but i got error.
Anybody have idea to passing value without button ?
this is my blade :
<form id="myform" name="myform">
<input type="text" id="datepicker" name="datepicker" value="Date"/>
<input placeholder="Submit" type="button" id="submitMe" style="width:
100px;"/>
//can i passing this value without button?
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
</form>
<script>
$("#submitMe").click(function() {
$.ajax({
type: 'POST',
url: "/index/getDate",
method: "POST",
dataType: "json",
data: $('#myform').serialize(),
success: function(data) {
console.log("Done");
}
});
return false;
})
</script>
this is my route :
Route::post('index/getDate', 'UserController#getDate')-
>name('Usercontroller.getDate');
this is my controller :
function getDate(Request $request){
$date = urldecode ($_GET['datepicker']);
echo "chosen date is: ".$date;
}
i try to get output like this :
thankyou so much, if somebody want to help me :))

try this in your controller:
function getDate(Request $request){
$date = $request->datepicker;
return "chosen date is: ".$date;
}
then in your view:
<input type="text" id="datepicker" name="datepicker" value="Date"/>
<label id="dateSelected"></label>
<script>
$("#submitMe").click(function() {
$.ajax({
type: 'POST',
url: "/index/getDate",
method: "POST",
data: $('#myform').serialize(),
success: function(data) {
console.log(data);
$('#dateSelected').text(data);
}
});
return false;
})
</script>

you pass the form data with POST method, so you can get the parameter with
$request->input('datepicker');

Related

How to pass an array of "FormData" via ajax and access in Laravel controller

# I just want to know how to send this array the controller by requete ajax
var dataPanier=[];
function addarray(objser)
{
dataPanier.push(objser);
}
$('.target').click(function() {
var btn_name=$(this).attr("name");
switch(btn_name) {
case 'FormPVC':
var dataformPVC = new FormData(),
form_data = $('#'+btn_name).serializeArray();
$.each(form_data, function (key, input) {
dataformPVC.append(input.name, input.value);
});
dataformPVC.append('Fichier', $('#File_PVC')[0].files[0]);
/* function addarray push dataform in array*/
addarray(dataformPVC);
break;
.
.
.
more . . .
I am attempting to send multiple forms data as an array by ajax to a Larave controller.
$.ajax({
type: 'POST',
url: 'lsitedevis',
data: array ,
success: function(data) {
toastr.success('Successfully added Post!', 'Success Alert', {timeOut: 5000});
}
});
$("#btnTest").click(function(){
var formData = $('#frm1, #frm2').serialize();
console.log(formData);
$.ajax({
method: 'POST',
url: 'lsitedevis',
data: formData ,
success: function(data) {
toastr.success('Successfully added Post!', 'Success Alert', {timeOut: 5000});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frm1">
<input name="n1" type="text"/>
<input name="n2" type="hidden" value="test2"/>
<input name="n3" type="hidden" value="test3"/>
</form>
<form id="frm2">
<input name="n1" type="text" />
<input name="n2" type="hidden" value="test2"/>
<input name="n3" type="hidden" value="test3"/>
</form>
<input type="button" id="btnTest" value="send"/>
As your already using jQuery for the AJAX request, you could use the serialize() function. This supports multiple form elements, so it is possible to do:
var formData = $('#form1, #form2').serialize();
$.ajax({
type: 'POST',
url: 'lsitedevis',
data: formData ,
success: function(data) {
toastr.success('Successfully added Post!', 'Success Alert', {timeOut: 5000});
}
});
You might want to ask yourself why you have multiple forms but submitting them all as a single request. If it's for visual purposes, it might be easier to have a single form and separate the contents using other markup elements such as a <fieldset> or <div>.

Span value using Ajax

Hello i try to display a price form an AJAX call, i putted an input just to check if you get the price and it's work but i can't display the price result on a span.
{{$product->price}} have default value but it's change depending the size, i would like to display the result also in the space and hide the input.
someone knows how to do that ?
Here my html :
<input type="text" placeholder="{{$product->price}}"value="{{$product->price}}">
<div id="price">
<span class="text-muted text-normal" id="price"> {{$product->price}}€</span>
</div>
<input type="hidden" name="price" id="price" value="{{$product->price}}" />
Here my javascript :
<script>
$('#size').change(function () {
$.ajax({
type: 'GET',
url : '../{{$product->id}}/ballons-entrainement/size-price',
dataType: "json",
data : {
size : document.getElementById('size').value
},
success:function(data){
console.log(data);
$('input').attr('value', data.price);
}
});
});
</script>
You try with .html() like
<script>
$('#size').change(function () {
$.ajax({
type: 'GET',
url : '../{{$product->id}}/ballons-entrainement/size-price',
dataType: "json",
data : {
size : document.getElementById('size').value
},
success:function(data){
$('span#price').html( data.price );
}
});
});
</script>

How to evaluate json response data - ajax form?

I don't know how to write a proper question. But please let me explain this. I sent from with ajax and return with json. Each json value contain its status. So I need to test/evaluate the status and do something with it.
JSON
{url:"error",email:"ok",name:"ok"}
JS
//new port
$('#pflBtn').on('click',function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'inc/wcont8_port_db.php',
data :$(this).closest('form').serialize(),
dataType: 'json',
success: function(data){
if(data.url=="err"){//if url=error
$('#plf_url').addClass('error');//will add .error into #plf_url class
}else{
$('#plf_url').addClass('success');
}
}
})//ajax
})
html
<form class="pflForm">
<div class="form-group form-float">
<div class="form-line" id="pfl_url">
<input type="text" class="form-control" name="pfl_url" value="URL" required />
<label class="form-label">URL (www.domain.com)</label>
</div>
</div><!-- form-group form-float -->
<button type="submit" id="pflBtn">Save</button>
</form>
There are two mistakes you have made, check my comments with the code and try again by changing them:
$('#pflBtn').on('click',function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'inc/wcont8_port_db.php',
data :$(this).closest('form').serialize(),
dataType: 'json',
success: function(data){
if(data.url=="error"){// url has value 'error', but this was checking 'err'
$('#plf_url').addClass('error');//will add .error into #plf_url class but the class is not available in your html,
}else{
$('#plf_url').addClass('success');
}
}
})//ajax
})

AJAX function is not firing

Hello everyone I want to parse array to Codeigniter controller but my code is not working can you please tell me where is a mistake in this code. I am a new in jQuery I know it is a very basic mistake.
jQuery Code:
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val()
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});
HTML Code:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">State Name</label>
<input type="text" name="State" class="form-control" id="statename" placeholder="Enter State Name">
</div>
<button type="submit" class="btn btn-info" id="add_state">Submit</button>
</form>
trim is not closed properly
it suppose to be like this
$("#add_state").click(function(){
var addstate = {
State: $.trim($('#statename').val())
}
$.ajax({
type: "POST",
url: "<?php echo base_url()?>/index.php/geo/add_state",
data: addstate,
success: function(response){
alert(response);
}
});
event.preventDefault();
});
Missing ) in State: $.trim($('#statename').val(). Change it to State: $.trim($('#statename').val()).
Use $(document).on('click', '#add_state', function() { instead$("#add_state").click(function(){. Because first solution will work, if you add script before dom element was created.
Check url, maybe it's incorrect.

How to replace or update existing content in textarea by using http.post method?

I plan to POST my text content to http://language.cs.usm.my/synthesis/read.php form's textarea which is third party web page, below is the form that i get from the URL.
<form method="post" action="">
<p>Key in sentences in Malay. </p>
<textarea name="malayText" rows="4" cols="100">Malaysia ialah sebuah negara raja berperlembagaan persekutuan di Asia Tenggara yang terdiri daripada 13 negeri dan tiga wilayah persekutuan. Ia menduduki bumi berkeluasan 329,847 kilometer persegi.</textarea>
<input type="submit" value="OK" name="submit" />
</form>
The method i use to post data as below:
$scope.AudioCont = function(){
var req = $http({
method: 'POST',
url: 'http://language.cs.usm.my/synthesis/read.php',
data:{
test:"Nama saya ialah Ali"
}
})
.then(
function (response) {
alert("The data has been posted");
console.log(response);
},
function () {
alert("Failed to post!");
})
}
How can i replace the content in the existing textarea with my data?
Thanks
you have to add ng-model on the input or textarea
<form method="post" action="">
<p>Key in sentences in Malay. </p>
<textarea name="malayText" rows="4" cols="100" ng-model="yourtextarea"></textarea>
<input type="submit" value="OK" name="submit" />
</form>
and in the controller get him with $scope.yourVarName
$scope.yourtextarea ;
$scope.AudioCont = function(){
var req = $http({
method: 'POST',
url: 'http://language.cs.usm.my/synthesis/read.php',
data:{
test:$scope.yourtextarea
}
})
.then(
function (response) {
alert("The data has been posted");
console.log(response);
},
function () {
alert("Failed to post!");
})
}
You need to use ng-model
<textarea name="malayText" rows="4" cols="100" ng-model="malayText">
and then you can readily access it in your controller
var req = $http({
method: 'POST',
url: 'http://language.cs.usm.my/synthesis/read.php',
data:{
test: $scope.malayText
}
I used ajax method to solve this problem with auto submit the form when i perform the POST action. Below is my code and solution:
$.ajax({
type: 'POST',
url: 'your url',
data: {'submit': 'submit', 'malayText' : "data that wish to POST"}, // you can use as much as data you want to send,
dataType: 'JSON' // so you can use the json_encode php function
});

Categories

Resources