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
# 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>.
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>
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
})
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.
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
});