nishanthi nishanthi - 5 months ago 22
Javascript Question

How to insert modal values into db using ajax post request?

View code:

<div class="price">
<form name="priceform" >
<div class="modal fade" id="price">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span
aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Selling Information</h4>
</div>
<div class="modal-body" id="modal-content">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-sm-12">
<b>Listing Information</b>
<h6>Seller SKU ID <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Unique identifier
for the listings">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="skuid" id="skuvalue" class="pricevalue"/>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Status Details</b>
<h6>Listing Status <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Inactive listings
are not available for buyers on Flipkart">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<select id="dropDownId" name="listingStatus">
<option selected disabled>--Choose here--</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<br/>
<br/>
<div class="row">
&nbsp;&nbsp;&nbsp;&nbsp;<b>Price Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>MRP <a href="#" class='my-tool-tip' data-toggle="tooltip"
data-placement="right" title="Maximum retail price of the
product">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="mrp" id="mrpvalue" class="check-fill"/>
</div>
<div class="col-sm-6">
<h6>Your Selling Price <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Price at which
you want to sell this listing">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="selprice" id="selpricevalue"
class="check-fill"/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
&nbsp;&nbsp;&nbsp;&nbsp;<b>Inventory Details</b>
<div class="col-sm-12">
<div class="col-sm-6">
<h6>Fulfilment By <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Fullfilment of
FA listings will be managed by Flipkart ">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<select id="5" name="fulfillment">
<option selected disabled>Choose here</option>
<option value="Seller">Seller</option>
</select>
<br/>
<h6>Procurement SLA <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Time required
to keep the product ready for dispatch">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="sla" class="check-fill"/>Days
<br/>
<h6>Stock available for Buyers <a href="#" class='my-tool-
tip' data-toggle="tooltip" data-placement="right" title="Number
of items available for cutomer to buy after detecting pending
orders" >
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="available" readonly/>
</div>
<div class="col-sm-6">
<h6>Procurement Type <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Information on
how the inventory is procured by the seller to fulfill an
order">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<select name="procurementType">
<option selected disabled>--Choose here--</option>
<option value="instock">instock</option>
</select>
<br/>
<h6>Stock <a href="#" class='my-tool-tip' data-toggle="tooltip"
data-placement="right" title="Number of items you have in
stock">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="stock" />
<br/>
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
&nbsp;&nbsp;&nbsp;&nbsp;<b>Delivery charge to customer</b>
<div class="col-sm-12">
<div class="col-sm-4">
<h6>Local Delivery Charge <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Delivery charge
you want charge a buyer in the same city for listings which are
not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="local" />
</div>
<div class="col-sm-4">
<h6>Zonal Delivery Charge <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Delivery charge
you want charge a buyer in the same zone for listings which are
not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="zonal" />
</div>
<div class="col-sm-4">
<h6>National Delivery Charge <a href="#" class='my-tool-tip'
data-toggle="tooltip" data-placement="right" title="Delivery
charge you want charge a buyer outside your zone for listings
which are not Flipkart Assured">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="national" />
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
&nbsp;&nbsp;&nbsp;&nbsp;<b>Packaging Details</b>
<div class="col-sm-12">
<div class="col-sm-3">
<h6>Package Weight <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Weight of the
final package in kgs">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="weight" />Kgs
</div>
<div class="col-sm-3">
<h6>Package Length <a href="#" class='my-tool-tip' data-
final package in cms">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="length" />cms
</div>
<div class="col-sm-3">
<h6>Package Breadth <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Breadth of the
final package in cms">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="breadth" />cms
</div>
<div class="col-sm-3">
<h6>Package Height <a href="#" class='my-tool-tip' data-
toggle="tooltip" data-placement="right" title="Height of the
final package in cms">
<span class="glyphicon glyphicon-info-sign"
style="color:#337AB7"></span>
</a></h6>
<input type="text" name="height" />cms
</div>
</div>
</div>
<br/>
<br/>
<div class="row">
<div class="col-sm-12">
<b>Tax Details</b>
<h6>HSN <a href="#" class='my-tool-tip' data-toggle="tooltip"
data-placement="right" title="code of your product for
determining applicable tax rates">
<span class="glyphicon glyphicon-info-sign" style="color:
#337AB7"></span>
</a></h6>
<input type="text" name="hsn" />
<a href="#">Find relevant HSN codes</a>
</div>
</div>
<br/>
<br/>
<input type="submit" id="priceSave" class="save" value="Save"
style="border-radius: 8px; padding: 5px 15px; ">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-
dismiss="modal">Close</button>
<!--<button type="submit" id="priceSave" class="save"
style="border-radius: 8px; padding: 5px 15px;
display:none;">Save</button>-->
</div>

<div>
<!-- /.modal-content -->
</div>
<div>
<!-- /.modal-dialog -->
</div>


This is my bootstrap modal.I need to add those form values into db. FOr this,I have been using ajax post request.The problem is,if I commented the form tag,the url redirection works with ajax post request. But the values where not added due to commenting of form. But when included,no insertion takes place.

SCRIPT CODE:

<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#priceSave").click(function(){
$.ajax({
url: 'addPriceDetails/{{$dataId}}',
type: "post",
/*success:function(data) {
alert(data);
}*/
});
});
});
</script>


This is the script I have tried.

ROUTE CODE:

Route::post('addPriceDetails/{dataId}','priceDetails@addPriceDetails');


Controller:

public function addPriceDetails(Request $priceform,$dataId)
{
//echo ("1234");
$priceInfo = new priceInfo ;
$priceInfo->deviceCategoryId=$dataId;
$priceInfo->productId=$this->getproductId();
$priceInfo->SKUID =$priceform->input('skuid');
$priceInfo->listingStatus =$priceform->input('listingStatus');
$priceInfo->MRP =$priceform->input('mrp');
$priceInfo->sellingPrice=$priceform->input('selprice');
$priceInfo->fulfillmentBy =$priceform->input('fulfillment');
$priceInfo->procurementType =$priceform->input('procurementType');
$priceInfo->procurementSLA =$priceform->input('sla');
$priceInfo->stock =$priceform->input('stock');
$priceInfo->localDelCharge =$priceform->input('local');
$priceInfo->zonalDelCharge =$priceform->input('zonal');
$priceInfo->nationalDelCharge=$priceform->input('national');
$priceInfo->packWeight =$priceform->input('weight');
$priceInfo->packLength =$priceform->input('length');
$priceInfo->packBreadth =$priceform->input('breadth');
$priceInfo->packHeight =$priceform->input('height');
$priceInfo->HSN =$priceform->input('hsn');

$priceInfo->save();

//echo($priceInfo->SKUID);
return Redirect::back()->with('SKUID',$priceInfo->SKUID)-
>with('listingStatus',$priceInfo->listingStatus)-
>with('MRP',$priceInfo->MRP)->with('sellingPrice',$priceInfo-
>sellingPrice);
}


HERE is the controller code,to insert modal values into db ,also to redirect some of the values to the view

Answer Source

Your Javascript is not sending any of the data from the form. You need to collect that, and POST it in your AJAX call, like so:

In your Javascript

$("#priceSave").click(function(e){
    e.preventDefault();
    var data = $('form').serialize();
    $.ajax({
        url: 'addPriceDetails/{{$dataId}}',
        type: "post",
        data: data,
        dataType: 'json',
        success: function(response) {
            alert(response.SKUID);
        }
    });
});

In your Controller

public function addPriceDetails(Request $priceform,$dataId) {
    // ... all your code
    return response()->json([
        'SKUID'    => $priceInfo->SKUID,
        'listingStatus' => $priceInfo->listingStatus
        // ... any other fields you want to return
    ]);

I am not sure why you want to return some of the fields you just POSTed back. It would make more sense to return the result of the operation, eg a success or error, and then display that on the front end.