We Keep Coding

Fetch Data in a form through Ajax in Laravel

I am making an auto-complete form, in which user enter only the id and the whole information related to that id comes in other field. I am using ajax and Laravel 5.4. The Data is coming in alert but how i can insert data in input fields of a form. Here is my script:
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
alert(response); console.log(response);
}
});
});
</script>
this is my controller:
public function VendorDetail(Request $request)
{
$id= $request->id;
$data = DB::select(DB::raw("SELECT * from bp where id = '$id'"));
echo json_encode($data);
}
here is my console.log response:
[{"id":37,"card_name":"Maka Furniture Co.,Ltd ","trade_type":"Manufacturer","address":"Xinzhang development zones,Shengfang town,Hebei province.","fc":"121AC209","status":0,"created_at":"2018-10-10 10:02:27","user":"admin"}]
here is the screenshot of response:
Any help would be highly appreciable.

If you want all data in single input you can use this
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
dataType: 'json',//this will expect a json response
data:{id:$("#vid").val()},
success: function(response){
$("#inputfieldid").val(response);
}
});
});
</script>
or if you want on different input field you can do like this
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
dataType: 'json',//this will expect a json response
data:{id:$("#vid").val()},
success: function(response){
$("#inputfieldid1").val(response.id);
$("#inputfieldid2").val(response.2ndcolumnName);
$("#inputfieldid").val(response.3rdcolumnName);
}
});
});
</script>

In your other fields you can do the following in success method:
success: function(response) {
$('.input1').val(response.input1);
$('.input2').val(response.input2);
$('.label1').html(response.label1);
}
I hope it would helpful.

add unique ID property to your input like this:
<input id="name" type="text">
Then fill this input with ajax result by this code:
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
$('#name').val(JSON.parse(response)[0].name); //<---- This line,
}
});
});
</script>
Do this for all your input base you logic.

Suppose you have input fields like this in your form
<input type="text" name="vendor_name" id="vendor_name">
<input type="text" name="vendor_mobile" id="vendor_mobile">
<input type="text" name="vendor_email" id="vendor_email">
You ajax code should be like this and I hope you get the parameters in your JSON response
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
$('#vendor_name').val(response.vendor_name)
$('#vendor_mobile').val(response.vendor_mobile)
$('#vendor_email').val(response.vendor_email)
}
});
});
</script>
If this can't help then could you please do console.log(response) and paste the debug data so it will be easy to help you more.
<script type="text/javascript">
$('#submitid').on('click', function() {
var vid = $( "#vid" ).val();
//var id=$(this).data('id');
$.ajax({
url: '/inquiryVendor',
type: "Get",
data:{id:$("#vid").val()}, // the value of input having id vid
success: function(response){ // What to do if we succeed
console.log(response)
}
});
});
</script>
if you don't want response[0] then you need to change in your controller File like this.
$vendor = DB::table('bp')->where('id', '.$id.')->first();
return response()->json($vendor);
As per your need, this will help for sure.

How to Set An HTML SELECT element value to php variable ONSELECT

I am Using an HTML dropdown on a page, my requirement is to when i select any value from dropdown, it want to be store in an PHP variable on the same page without submitting form or without refreshing the page.
my code is:
Script:
<script type="text/javascript">
$("#bank_name").change(function(){
var data=$(this).val();
alert(data);
$.ajax({
url:"transaction.php",
type:"POST",
data: ({"bank_code": data}),
sucess: function(response){
console.log("Success");
alert(data);
},
error: function(response){
console.log("Error");
alert(data);
}
});
<script>
PHP Code:
$bank_code=$_POST["bank_code"];
echo "Bank Code is:",$bank_code;
it gets the value of selected option and also alerts the value but after alert it doesn't echo the value in PHP.

You have type error in success ,You should remove those () brackets in data field to access $_POST in php like below,
<script type="text/javascript">
$("#bank_name").change(function(){
var data=$(this).val();
alert(data);
$.ajax({
url:"transaction.php",
type:"POST",
data: {bank_code: data),
success: function(response){
console.log("Success");
alert(response);
},
error: function(response){
console.log("Error");
alert(data);
}
});
<script>

The echo will be received as response in the success callback
$("#bank_name").change(function() {
var data = $(this).val();
alert(data);
$.ajax({
....,
success: function(response) {
console.log("Success");
// alert response instead
alert(response);
},
......
});

how to pass url to another page using ajax [duplicate]

This question already has answers here:
How to get data from one php page using ajax and pass it to another php page using ajax
(4 answers)
Closed 7 years ago.
I am trying to pass a product Id from my products.php page to my productType.php using ajax.
products.php
<?php
$test = $_GET['id'];
echo $test;
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="" src="action.js"></script>
productType.php
<?php
$id = $_GET['id'];
echo $id;
?>
action.js
$.ajax({
url: "products.php",
success: function(data){
$.ajax({
url: "productsType.php?id="+data,
success: function(data){
alert(data);
}
});
}
});

You need to convert it into variable:
$.ajax({
url: "products.php",
success: function(data){
$.ajax({
url: "productsType.php?id=" + data,
//------------------------^^^^^^^^^
});
}
});

You need to concatenate:
url: "productsType.php?id="+data,
or you can use data:{} option of ajax:
url: "productsType.php",
data:{id:data}

Use following code with async:false
$.ajax({
url: "products.php",
async:false,
success: function(data){
$.ajax({
async:false,
url: "productsType.php?id=" + data,
});
}
});

Calling js function on button click isn't working

Any reason why this isn't running when clicked? I can't seem to figure it out.
<button id="button-container-like" onclick="rate($(this).attr(\'id\'))"><span class="thumbs-up"></span>Like</button>
<script>
function rate(rating){
var data = 'rating='+rating+'&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e){
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
</script>

here you go:
<button id="button-container-like" ><span class="thumbs-up"></span>Like</button>
<script>
jQuery(document).ready(function () {
$("#button-container-like").click(function() {
rate($(this).attr("id"));
});
function rate(rating) {
var data = 'rating=' + rating + '&id=<?php echo $eventId; ?>&userid56=<?PHP echo $userid55; ?>';
$.ajax({
type: 'POST',
url: 'includes/rate.php', //POSTS FORM TO THIS FILE
data: data,
success: function(e) {
$(".ratings").html(e); //REPLACES THE TEXT OF view.php
}
});
}
});
</script>

If there's nothing else going on in this code, then remove the slashes from your onclick code. They are unnecessary and cause an error.
onclick="rate($(this).attr('id'))"

What is the proper or best way to get data from ajax?

I have this javascript code with ajax.
$('#btnCart').click(function() {
var pName = document.getElementById('prodName').value;
$.ajax({
url: 'index.php',
data: 'prdName='+pName,
success: function(data) {
$('#prod').html(data);
}
});
});
I want to get the value of pName to be returned on my php. Here's my code on my index.php side:
<?php
$prodName = $_GET['prdName'];
echo $prodName;
?>
But it returns Unidentified index: prdName.
How can I get the value from ajax to my php? Please help...

if(isset($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo $prodName;
}

You should send the data as:
data: {prdName: pName},

add this to your PHP code:
if(!empty($_GET['prdName'])){
$prodName = $_GET['prdName'];
echo cartTable($prodName);
}
also some corrections in js:
$('#btnCart').click(function() {
var pName = $('#prodName').val();
$.ajax({
url: 'index.php',
data: {prdName:pName},
success: function(data) {
$('#prod').html(data);
}
});
});

In index.php Get the prdName value from $_POST[] global array.
to send data to index.php file add type type:'POST' in ajax code
$.ajax({
type:'POST',
url: 'index.php',
data: {'prdName': pName},
success: function(data) {
$('#prod').html(data);
}
});
or you can use $.post() method in jQuery
$.post(
'index.php',
{'prdName='+pName},
function(data) {
$('#prod').html(data);
}
});
in index.php
if(isset($_POST['prdName']){
$prodName = $_POST['prdName'];
echo $prodName;
}