I am adding items to cart with ajax request but i don't know how to update the cart with ajax response.
This is my index.blade.php code from where i am adding items to cart with some inputs in cart:
<form id="product-1">
#csrf
<div class="modal-body cart-addon" style="margin-top: 20px">
<div class="food-item white">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-6">
<div class="item-img pull-left">
<a class="restaurant-logo pull-left" href="#"><img id="image"/> </a>
</div>
<div class="rest-descr">
<h6><input id="name" name="name" style="width: 200px; border: none; margin-top: 15px" readonly></h6>
</div>
</div>
<!-- end:col -->
<div class="col-xs-6 col-sm-2 col-lg-2 text-xs-center"> <span class="price pull-left">$<input id="price" name="price" style="width: 50px; border: none" readonly></span></div>
<div class="col-xs-6 col-sm-4 col-lg-4">
<div class="row no-gutter">
<div class="form-group">
<select class="form-control" id="quantity" name="quantity" required>
<option selected="selected" disabled="disabled" value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<select class="form-control" id="spice" name="spice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Spice</option>
<option value="Mild" style="font-size: 14px">Mild</option>
<option value="Medium" style="font-size: 14px">Medium</option>
<option value="Hot" style="font-size: 14px">Hot</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="naan" name="naan" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Naan</option>
<option value="No Naan" style="font-size: 14px">No Naan</option>
<option value="Naan" style="font-size: 14px">Naan</option>
<option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
<option value="Roti" style="font-size: 14px">Roti</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="rice" name="rice" required>
<option selected="selected" disabled="disabled" style="font-size: 14px" value="">Choose Lunch Rice</option>
<option value="No Rice" style="font-size: 14px">No Rice</option>
<option value="Rice" style="font-size: 14px">Rice</option>
</select>
</div>
<input class="form-control" name="instructions" id="instructions" placeholder="Instruction"/>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<div class="col-md-3">
<input hidden name="products_id" id="products_id">
<button type="submit" class="btn theme-btn">Add to cart</button>
</div>
</div>
</div>
</form>
Ajax Request:
<script>
$("#product-1").submit(function (e){
e.preventDefault();
let quantity = $("#quantity").val();
let spice = $("#spice").val();
let naan = $("#naan").val();
let rice = $("#rice").val();
let instructions = $("#instructions").val();
let products_id = $("#products_id").val();
let _token = $("input[name=_token]").val();
$.ajax({
url: "{{route('product.addToCart')}}",
type: "get",
data:{
products_id:products_id,
quantity:quantity,
spice:spice,
naan:naan,
rice:rice,
instructions:instructions,
_token:_token
},
beforeSend: function() {
},
success:function(response)
{
$("#product-1")[0].reset();
$('#product-modal').modal('hide');
$('#product-modal').trigger("click");
}
})
});
and this is my controller:
public function getAddToCart(Request $request)
{
$products = Products::find($request->products_id);
$quantity = $request->input('quantity');
$instructions = $request->input('instructions');
$spice = $request->input('spice');
$naan = $request->input('naan');
$rice = $request->input('rice');
$oldCart = Session::has('cart') ? Session::get('cart') : null;
$cart = new Cart($oldCart);
for ($i = 1; $i <= $quantity; $i++)
{
if ($naan == "Garlic Naan"){
$cart->garlic_add($products, $products->id, $instructions, $spice, $naan, $rice);
} else
$cart->add($products, $products->id, $instructions, $spice, $naan, $rice);
}
$request->session()->put('cart', $cart);
$oldCart = Session::get('cart');
$cart = new Cart($oldCart);
$request->session()->put('cart', $cart);
return back();
return redirect('/');
}
This is my blade part where i am showing cart.
#if(Session::has('cart'))
#foreach($carts as $product)
<div class="order-row bg-white">
<div class="widget-body">
<div class="title-row">{{ $product['item']['name'] }}
<form id="reduceProduct">
<input name="id" id="id" value="{{$product['item']['id']}}">
<button type="submit" style="background-color: transparent; border: 0;"><i class="fa fa-trash pull-right" style="color: #FF3300"></i></button>
</form>
</div>
<div class="title-row">{{ $product['instructions'] }}</div>
<div class="title-row">{{ $product['spice'] }}</div>
#if(!empty($product['rice']))
<div class="title-row">{{ $product['rice'] }}</div>
#endif
<div class="form-group row no-gutter">
<div class="col-xs-8">
<select class="form-control b-r-0" id="exampleSelect1">
<option>Size SM</option>
<option>Size LG</option>
<option>Size XL</option>
</select>
</div>
<div class="col-xs-4">
<input class="form-control" type="number" value="{{ $product['qty'] }}" id="example-number-input">
{{ $product['item']['price'] }}
{{ $product['price'] }}
</div>
</div>
</div>
</div>
#endforeach
<!-- end:Order row -->
<div class="widget-delivery clearfix">
<form>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio4" name="radio" type="radio" class="custom-control-input" checked=""> <span class="custom-control-indicator"></span> <span class="custom-control-description">Delivery</span> </label>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6 b-t-0">
<label class="custom-control custom-radio">
<input id="radio3" name="radio" type="radio" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Takeout</span> </label>
</div>
</form>
</div>
<div class="widget-body">
<div class="price-wrap text-xs-center">
<p>TOTAL</p>
<h3 class="value"><strong>$ 25,49</strong></h3>
<p>Free Shipping</p>
<button onclick="location.href='checkout.html'" type="button" class="btn theme-btn btn-lg">Checkout</button>
</div>
</div>
Can any help me with the code that how can i update the cart with ajax response.
ThankYou
Related
I'm working with Form in Laravel. In that form have a modal that containts another form.
Here's the screenshot of the Form :
SS1 (I can't post an image because my reputation is not enough)
when I click on New button (besides of Customer Name input text) there will be a modal that containts form to input new customers and new unit. Here's the screenshot of the modal :
SS2
and the idea is,after I complete the input of new customer and unit, the data i've inputted will automatically input the main form.
and this is what I've done so far :
$("#main_form2").on("submit", function(event) {
event.preventDefault();
value = $(this).serialize();
alert(value);
$.ajax({
type: 'post',
url: $(this).attr('action'),
data: {
'value': value
},
success: function(data) {
$('#customer_id').val(data.customer_id)
$('#customer_name').val(data.customer_name)
$('#customer_pic').val(data.customer_pic)
$('#unit_province').val(data.customer_province)
$('#unit_cities').val(data.customer_site)
$('#unit_sn').val(data.unit_sn)
$('#unit_brand').val(data.unit_brand)
$('#unit_type').val(data.unit_type)
$('#unit_model').val(data.unit_model)
},
error: function() {}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="{{route('ticket-service/store')}}" method="POST" id="main_form">
#csrf
<div class="panel panel-inverse">
<div class="panel-heading ui-sortable-handle">
<h4 class="panel-title">Ticket Service Create</h4>
<div class="panel-heading-btn">
<i class="fa fa-expand"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_from"><b>Inquiry From</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_from form-control-sm" name="ticket_inquiry_from" id="ticket_inquiry_from">
<option value="">Select Option</option>
<option value="Phone">Phone</option>
<option value="Website">Website</option>
<option value="WhatsApp">WhatsApp</option>
<option value="Email">Email</option>
</select>
<span class="text-danger error-text ticket_inquiry_from_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_inquiry_to"><b>Inquiry To</b> <span class="text-danger">*</span></label>
<select class="form-control ticket_inquiry_to form-control-sm" name="ticket_inquiry_to" id="ticket_inquiry_to">
<option value="">Select Option</option>
<option value="Marketing">Marketing</option>
<option value="Service">Service</option>
<option value="Sparepart">Sparepart</option>
</select>
<span class="text-danger error-text ticket_inquiry_to_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_inquiry_pic"><b>Inquiry PIC</b><a class="text-danger"> *</a></label>
<select class="js-example-basic-multiple" class="form-control form-control-sm form-select form-select-sm" name="ticket_inquiry_pic[]" multiple="multiple" style="width:100%;">
#foreach(SiteHelpers::get_user_all() as $pic)
<option value="{{$pic->id}}" <?php echo (old( 'ticket_inquiry_pic')==$ pic->user_name) ? 'selected' : ''?>>{{$pic->user_name}}</option>
#endforeach
</select>
<span class="text-danger error-text ticket_inquiry_pic_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_date"><b>Ticket Date</b></label>
<div class="col-sm-13">
<input type="text" class="form-control form-control-sm" name="ticket_date" value="{{date('Y/m/d')}}" readonly/>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="service_request_date"><b>Service Request Date</b> <span class="text-danger">*</span></label>
<div class="col-sm-13">
<div class="input-group date" id="datepicker-disabled-past" data-date-format="dd-mm-yyyy" data-date-start-date="Date.default">
<input type="text" class="form-control form-control-sm" name="service_request_date" value="{{old('service_request_date')}}" />
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>
<span class="text-danger error-text service_request_date_error"></span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="liability_charges"><b>Charges To</b> <span class="text-danger">*</span></label>
<select class="form-control liability_charges form-control-sm" name="liability_charges" id="liability_charges">
<option value="">Select Option</option>
<option value="Principal">Principal</option>
<option value="Dept. Marketing">Dept. Marketing</option>
<option value="Dept. Part">Dept. Part</option>
<option value="Dept. Service">Dept. Service</option>
<option value="Customer">Customer</option>
<option value="Free Charge">Free Charge</option>
</select>
<span class="text-danger error-text liability_charges_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="ticket_category"><b>Category</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_category" id="ticket_category">
<option value="">Select Category</option>
<option value="Inspection">Inspection</option>
<option value="Commissioning">Commissioning</option>
<option value="Regular Service">Regular Service</option>
<option value="Repair / Troubleshooting">Repair / Troubleshooting</option>
<option value="Training">Training</option>
<option value="Warranty">Warranty</option>
<option value="Sparepart">Sparepart</option>
<option value="Unit">Unit</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_category_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="customer_id"><b>Customer</b><span class="text-danger"> *</span></label>
<div class="input-group">
<input type="hidden" id="customer_id" name="customer_id" value="{{(isset($data)) ? $data->customer_id : ''}}">
<input type="text" class="form-control form-control-sm" placeholder="Customer Name" id="customer_name" href="{{route('population/popup_media')}}" data-toggle="modal" data-target="#modal-default" value="{{(isset($data)) ? $data->customer_name : ''}}">
<div class="input-group-prepend">
<span style="cursor:pointer;" class="input-group-text form-control-sm" href="#modal-new-customer" id='new-customer' rel='tooltip' data-placement='top' data-toggle='modal' title='Add New Customer'><i class="fa fa-user"></i> <b>New</b></span>
</div>
</div>
<span class="text-danger error-text customer_id_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_pic"><b>Customer PIC</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_pic" name="customer_pic" placeholder="Customer PIC">
<span class="text-danger error-text customer_pic_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_phone"><b>Customer Phone</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="customer_phone" name="customer_phone" placeholder="Customer Phone">
<span class="text-danger error-text customer_phone_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="customer_email"><b>Customer Email</b></label>
<input type="text" class="form-control form-control-sm" id="customer_email" name="customer_email" placeholder="Customer Email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="unit_sn"><b>Unit SN</b></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit SN" readonly>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_brand"><b>Unit Brand</b></label>
<input type="text" class="form-control form-control-sm" id="unit_brand" name="unit_brand" placeholder="Unit Brand" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="category"><b>Unit Type</b></label>
<input type="text" class="form-control form-control-sm" id="category" name="category" placeholder="Type" disabled>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_model"><b>Unit Model</b></label>
<input type="text" class="form-control form-control-sm" id="unit_model" name="unit_model" placeholder="Unit Model" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm province_name" name="unit_province" id="unit_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_province_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="cities"><b>Unit City</b> <span class="text-danger">*</span></label>
<select class="form-control form-control-sm cities" name="unit_cities" id="unit_cities">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text unit_cities_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_site"><b>Site/Workshop Address</b> <span class="text-danger">*</span></label>
<input type="text" class="form-control form-control-sm" id="unit_site" name="unit_site" placeholder="Unit Site">
<span class="text-danger error-text unit_site_error"></span>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="unit_status"><b>Unit Status</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="unit_status" id="unit_status">
<option value="">Select Status</option>
<option value="Breakdown">Breakdown</option>
<option value="Stand By">Running</option>
<option value="Working">Stand By</option>
</select>
<span class="text-danger error-text unit_status_error"></span>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ticket_complaints"><b>Informed Issue</b> <span class="text-danger">*</span></label>
<textarea name="ticket_complaints" id="ticket_complaints" class="form-control form-control-sm" style="height: 99px;"></textarea>
<span class="text-danger error-text ticket_complaints_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="ticket_notes"><b>Notes</b></label>
<textarea name="ticket_notes" id="ticket_notes" class="form-control form-control-sm" style="height: 99px;"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ticket_status"><b>Ticket Status</b> </label>
<select class="form-control category form-control-sm" name="ticket_status" id="ticket_status">
<option value="OPEN">OPEN</option>
<option value="Finished">Finished</option>
</select>
<span class="text-danger error-text ticket_status_error"></span>
</div>
</div>
<div class="col-md-3 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guidance"><b>Ticket Guidance</b> <span class="text-danger">*</span></label>
<select class="form-control category form-control-sm" name="ticket_guidance" id="ticket_guidance">
<option value="">Select Guidance</option>
<option value="Phone">Phone</option>
<option value="Other">Other</option>
</select>
<span class="text-danger error-text ticket_guidance_error"></span>
</div>
</div>
<div class="col-md-6 ticket-detail" style="display:none;">
<div class="form-group">
<label for="ticket_guide_name"><b>Guide Name</b> <span class="text-danger">*</span></label>
<input type="text" name="ticket_guide_name" id="ticket_guide_name" class="form-control form-control-sm">
<span class="text-danger error-text ticket_guide_name_error"></span>
</div>
</div>
</div>
<button type="submit" class="btn btn-sm btn-success m-r-5">Submit</button>
Cancel
</div>
</div>
</form>
<!-- the modal -->
<div class="modal fade" id="modal-new-customer" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Customer</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form action="{{ route('customer/storeWithPopulation') }}" method="POST" id="main_form2">
#csrf
<div class="modal-body">
<div class="panel-body">
<label for="unit"><b><i>Customer(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="customer_name"><b>Customer Name</b> <span class="text-danger">*</span></label>
<input type="hidden" name="customer_id" value="temp">
<input type="hidden" name="unit_status_stock" value="DELIVERED">
<input type="text" class="form-control" id="customer_name" name="customer_name" placeholder="Customer Name" value="{{old('customer_name')}}">
<span class="text-danger error-text customer_name_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="PIC"><b>PIC</b></label>
<input type="text" class="form-control" id="customer_pic" name="customer_pic" placeholder="PIC" value="{{old('customer_pic')}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="province_name"><b>Unit Province</b> <span class="text-danger">*</span></label>
<select class="form-control province_name" name="customer_province" id="customer_province">
<option value="" disabled="true" selected="true">Choose Province</option>
#foreach(SiteHelpers::get_province() as $province)
<option value="{{$province->id}}">{{$province->province_name}}</option>
#endforeach
</select>
<span class="text-danger error-text customer_province_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="cities"><b>Site</b> <span class="text-danger">*</span></label>
<select class="form-control cities" name="customer_site" id="customer_site">
<option value="0" disabled selected>Select City</option>
</select>
<span class="text-danger error-text customer_site_error"></span>
</div>
</div>
</div>
</br>
<label for="unit"><b><i>Population(s)</i></b></label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="brand"><b>Brand</b><span class="text-danger"> *</span></label>
<select class="form-control brand form-control-sm" name="unit_brand" id="unit_brand">
<option value="">Chose Brand</option>
#foreach($brands as $brand)
<option value="{{$brand->brand}}">{{$brand->brand}}</option>
#endforeach
</select>
<span class="text-danger error-text unit_brand_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="model"><b>Category</b><span class="text-danger"> *</span></label>
<select class="form-control category form-control-sm" name="unit_category" id="unit_category">
<option value="" disabled>Select Category</option>
</select>
<span class="text-danger error-text unit_category_error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 tes">
<div class="form-group">
<label for="model"><b>Model</b><span class="text-danger"> *</span></label>
<select class="form-control model form-control-sm" name="unit_model" id="unit_model">
<option value="" disabled>Select Model</option>
</select>
<span class="text-danger error-text unit_model_error"></span>
</div>
<div class="form-group">
<label for="serial_number"><b>Serial Number</b><span class="text-danger"> *</span></label>
<input type="text" class="form-control form-control-sm" id="unit_sn" name="unit_sn" placeholder="Unit Serial Number">
<span class="text-danger error-text unit_sn_error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="year"><b>Unit Year</b><span class="text-danger"> *</span></label>
<input type="number" class="form-control form-control-sm" id="unit_year" name="unit_year" placeholder="Unit Year">
<span class="text-danger error-text unit_year_error"></span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer" style="background-color:#cccccc;">
Close
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
here's my Controller :
public function storeWithPopulation(Request $request){
abort_unless(\Gate::allows('master-customer-create'),403);
$validator = Validator::make($request->all(),Customer::$createRules,Customer::$customMessage);
$validator2 = Validator::make($request->all(),Population::$createRules,Population::$customMessage);
if(!$validator->passes() && !$validator2->passes()){
$errors = array_merge($validator->errors()->toArray(),$validator2->errors()->toArray());
return response()->json(['status'=>0, 'error'=>$errors]);
}else{
$last_id = Customer::all()->last();
$customer_id = 'CUST-'.$last_id->id;
$values_customer = [
'customer_id'=>$customer_id,
'customer_name'=>$request->customer_name,
'customer_pic'=>$request->customer_pic,
'customer_site'=>$request->customer_site,
'customer_province'=>$request->customer_province,
];
$values_population = [
'customer_id' => $customer_id,
'unit_model'=>$request->unit_model,
'unit_sn'=>$request->unit_sn,
'unit_year'=>$request->unit_year,
'unit_status_stock'=>$request->unit_status_stock,
];
$new_customer = Customer::create($values_customer);
$new_population = Population::create($values_population);
if( $new_population ){
$brands = DB::table('t_brand')->get();
$data = SiteHelpers::get_population_by_sn($new_population->unit_sn);
return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
// return response()->json(['status'=>1, 'url'=>'/service/forms/ticket-service/create',['data'=>$data,'brands'=>$brands]]);
}
}
}
The problem is, everytime I succeeded create new customer in the modal it also redirect into the main form,but got refreshed and the main form completely in blank condition. I want to grab all the new customer I've just inputed into the main form.
hopefully somebody can help me. Thank you in advance.
this is my JavaScript code. i tried my best can anyone help me.How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to .
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control #error('category_id') is-invalid #enderror" name="category_id[]">
<option>Select Category</option>
#foreach($categories as $category)
<option value="{{$category->id}}" >{{$category->cat_name}}</option>
#if(count($category->childs))
#foreach($category->childs as $cat)
<option class="sub_child" value="{{$cat->id}}">-- {{$cat->cat_name}}</option>
#endforeach
#endif
#endforeach
</select>
#error('category_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty[]" class="form-control #error('qty') is-invalid #enderror" placeholder="Qty on combo" value="{{ old('qty') ?? 1 }}" required data-error="This field is required." />
<div class="help-block with-errors"></div>
#error('qty')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control #error('product_id') is-invalid #enderror" multiple name="product_id[]">
</select>
#error('product_id')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
#enderror
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$("body").on("click",".add-more",function(){
var html = $(".after-add-more").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".after-add-more").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".after-add-more").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-12 col-xl-12 col-lg-12">
<div class="after-add-more">
<div class="row">
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Categories</label>
<select class="selectpicker category form-control" name="category_id">
<option>Select Category</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option class="sub_child" value="1"> 1</option>
<option class="sub_child" value="2"> 2</option>
<option class="sub_child" value="3"> 3</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-2 col-xl-2 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Qty</label>
<input type="number" name="qty" class="form-control" placeholder="Qty on combo" value="1" required data-error="This field is required." />
<div class="help-block with-errors"></div>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o">
<label for="usr">Select Products</label>
<select class="products selectpicker form-control is-invalid" multiple name="product_id">
<option value="a" >a</option>
<option value="b" >a</option>
<option value="c" >c</option>
<option value="d" >d</option>
<option value="e" >e</option>
</select>
<span class="invalid-feedback" role="alert"><strong></strong></span>
</div>
</div>
<div class="col-lg-12 col-xl-12 col-md-12">
<div class="form-group f-g-o change">
<label for=""> </label><br/>
<a class="btn btn-success add-more">+ Add More</a>
</div>
</div>
</div>
</div>
</div>
I need that, at the beginning, only the following select form is displayed:
<div class="col-md-3">
<div class="form-group">
<select class="form-control tagging tagging_gouvernorat" onchange="yesnoCheck()">
<option disabled selected>Etat</option>
<option id="noCheck" value="actif">Actif</option>
<option id="yesCheck1" value="loue">Loué</option>
<option id="yesCheck2" value="vendu">Vendu</option>
</select>
</div>
</div>
Then, if <option id="noCheck" value="actif">Actif</option> is selected, no fields are displayed.
the other fields are displayed only if one of these options is selected:
<option id="yesCheck1" value="loue">Loué</option>
<option id="yesCheck2" value="vendu">Vendu</option>
but I don't know how to do ?
here is my html and javascript
function yesnoCheck() {
if (document.getElementById("yesCheck1").selected) {
document.getElementById("ifYes1").style.display = "block";
} else {
document.getElementById("ifYes1").style.display = "none";
}
if (document.getElementById("yesCheck2").selected) {
document.getElementById("ifYes2").style.display = "block";
} else {
document.getElementById("ifYes2").style.display = "none";
}
}
function yesnoCheck1() {
if (document.getElementById("agence").selected) {
document.getElementById("vagence").style.display = "block";
} else {
document.getElementById("vagence").style.display = "none";
}
}
<div class="col-xl-12 col-lg-12 col-md-12 layout-spacing">
<form id="social" class="section social">
<div class="info">
<h5 class="">Situation actuelle du Bien</h5>
<div class="row">
<div class="col-md-11 mx-auto">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<select class="form-control tagging tagging_gouvernorat" onchange="yesnoCheck()">
<option disabled selected>Etat</option>
<option id="noCheck" value="actif">Actif</option>
<option id="yesCheck1" value="loue">Loué</option>
<option id="yesCheck2" value="vendu">Vendu</option>
</select>
</div>
</div>
<div class="col-md-3" id="ifYes1" style="display: none;">
<div class="form-group">
<input id="basicFlatpickr" value="Date de la fin de contrat" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Date de la fin du contrat" id="df" name="df">
</div>
</div>
<div class="col-md-3" id="ifYes2" style="display: none;">
<div class="form-group">
<input id="basicFlatpickr" value="Date de la vente" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Date de la vente">
</div>
</div>
<div class="col-md-3" id="prix">
<div class="form-group">
<input type="text" class="form-control mb-4" id="prix" placeholder="Prix final" name="price">
</div>
</div>
<div class="col-md-3" id="how">
<div class="form-group">
<select class="form-control" name="how" onchange="yesnoCheck1()">
<option disabled selected value="comment">Comment ?</option>
<option id="seul" value="seul">Seul</option>
<option id="ag" value="viaagence">Via une agence</option>
</select>
</div>
</div>
<div class="col-md-3" id="vagence" style="display: none;">
<div class="form-group">
<input type="text" class="form-control mb-4" id="vag" placeholder="Agence" value="" name="agence">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
I have a jquery code like this:
let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
$('#' + item ).val($options[item] );
});
I want to fill all input value in the id from the $keys with data in the $options. but it doesn't work. but if I do it manually like this it works:
$("#title").val($options.title);
$("#type").val($options.type);
$("#location").val($options.location);
I'm sure that the problem is in the this code: $('#' + item ) i try so many things but seem it doesn't work. so is it any way i can fix this?
Here's my HTML:
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
<input type="hidden" id="csrf" name="csrf_token">
<input type="hidden" name="id" id="id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Add Widget
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="title">
Widget Title *
</label>
<div class="col-lg-8">
<input id="title" name="title" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="type">
Type *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="type" name="type">
<option value="">Select Widget Type</option>
<option value="popular-post">Popular Post</option>
<option value="recent-post">Recent Post</option>
<option value="featured-post">Featured Post</option>
<option value="post-tabs">Post Tabs</option>
<option value="post-carousel">Post Carousel</option>
<option value="tags">Tags</option>
<option value="archive">Archive</option>
<option value="calender">Calendar</option>
<option value="blockquote">Blockquote</option>
<option value="mini-gallery">Mini Gallery</option>
<option value="list">List</option>
<option value="search">Search</option>
<option value="testimonials">Testimonial Carousel</option>
<option value="social-media">Social Media</option>
<option value="contact-us">Contact Us</option>
<option value="flickr">Flickr Feed</option>
<option value="instagram-feed">Instagram Feed</option>
<option value="recent-tweets">Recent Tweets</option>
<option value="video">Video</option>
</select>
</div>
</div>
<div id="post_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="post_number">
Number of Post
</label>
<div class="col-lg-8">
<input id="post_number" name="post_number" class="form-control" autofocus>
</div>
</div>
<div id="testimonial_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="testimonial_number">
Number of Testimonial
</label>
<div class="col-lg-8">
<input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
</div>
</div>
<div id="galleries_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="image_number">
Number of Image
</label>
<div class="col-lg-8">
<input id="image_number" name="image_number" class="form-control" autofocus>
</div>
</div>
<div id="video_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="video_url">
Video URL
</label>
<div class="col-lg-8">
<input id="video_url" name="video_url" class="form-control" autofocus>
</div>
</div>
<div id="blockquote_div">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_author">
Author
</label>
<div class="col-lg-8">
<input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_content">
Quote
</label>
<div class="col-lg-8">
<input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="location">
Location *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="location" name="location">
<option value="">Select Position</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="submit_button" type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
and here's my full edit script:
$(document).on('click', 'a.edit', function (event) {
event.preventDefault();
let $id = $(this).closest('tr').data('id');
let url = "/admin/widgets/" + $id + "/edit";
$.post(url,{ id: $id, csrf_token: $csrf }).done(function (data) {
console.log(data.options);
let $options = JSON.parse(data.options);
var post = ["popular-post", "recent-post", "featured-post", "post-tabs","post-carousel"];
if (post.includes($options.type)){
post_div.show();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'testimonials'){
post_div.hide();
testimonial_div.show();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'mini-gallery'){
post_div.hide();
testimonial_div.hide();
galleries_div.show();
video_div.hide();
blockquote_div.hide();
}else if($options.type === 'video'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.show();
blockquote_div.hide();
}else if($options.type === 'blockquote'){
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.show();
}else{
post_div.hide();
testimonial_div.hide();
galleries_div.hide();
video_div.hide();
blockquote_div.hide();
}
page_modal.modal("show");
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
console.log($('#' + item));
$('form [name="' + item +'"]').val($options[item] );
});
validator.resetForm();
$(".modal-title").text("Edit Widget");
page_modal.find("form")[0].reset();
$("#id").val(data.id);
$("#csrf").val($csrf);
submit_button.html("Update Widget");
});
});
Here's the screnshot that provided by console.log('item : ' + item); and console.log('$options[item] =' + $options[item] );
Just access them in jQuery using the name attribute of the form fields.
Assuming each option keyname is the same as the form field name of course.
By using brackets [] and then the attribute name and optionally an attribute value you can target specific elements with specific values.
For more reading choose: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
+function() {
let data = {
options : '{"title":"Posts Tab","type":"post-tabs","post_number":"2","location":"right"}'
};
let $options = JSON.parse(data.options);
let $keys = Object.keys($options);
$keys.forEach(function (item,index, array) {
$('form [name="' + item +'"]').val($options[item] );
})
}();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="widget_modal" tabindex="-1" role="dialog" aria-labelledby="AddUserModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="widget_form" class="form-horizontal" method="post" enctype="multipart/form-data" action="/admin/widgets/store">
<input type="hidden" id="csrf" name="csrf_token">
<input type="hidden" name="id" id="id">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Add Widget
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="title">
Widget Title *
</label>
<div class="col-lg-8">
<input id="title" name="title" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="type">
Type *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="type" name="type">
<option value="">Select Widget Type</option>
<option value="popular-post">Popular Post</option>
<option value="recent-post">Recent Post</option>
<option value="featured-post">Featured Post</option>
<option value="post-tabs">Post Tabs</option>
<option value="post-carousel">Post Carousel</option>
<option value="tags">Tags</option>
<option value="archive">Archive</option>
<option value="calender">Calendar</option>
<option value="blockquote">Blockquote</option>
<option value="mini-gallery">Mini Gallery</option>
<option value="list">List</option>
<option value="search">Search</option>
<option value="testimonials">Testimonial Carousel</option>
<option value="social-media">Social Media</option>
<option value="contact-us">Contact Us</option>
<option value="flickr">Flickr Feed</option>
<option value="instagram-feed">Instagram Feed</option>
<option value="recent-tweets">Recent Tweets</option>
<option value="video">Video</option>
</select>
</div>
</div>
<div id="post_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="post_number">
Number of Post
</label>
<div class="col-lg-8">
<input id="post_number" name="post_number" class="form-control" autofocus>
</div>
</div>
<div id="testimonial_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="testimonial_number">
Number of Testimonial
</label>
<div class="col-lg-8">
<input id="testimonial_number" name="testimonial_number" class="form-control" autofocus>
</div>
</div>
<div id="galleries_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="image_number">
Number of Image
</label>
<div class="col-lg-8">
<input id="image_number" name="image_number" class="form-control" autofocus>
</div>
</div>
<div id="video_div" class="form-group row">
<label class="col-lg-4 col-form-label" for="video_url">
Video URL
</label>
<div class="col-lg-8">
<input id="video_url" name="video_url" class="form-control" autofocus>
</div>
</div>
<div id="blockquote_div">
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_author">
Author
</label>
<div class="col-lg-8">
<input id="blockquote_author" name="blockquote_author" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="blockquote_content">
Quote
</label>
<div class="col-lg-8">
<input id="blockquote_content" name="blockquote_content" class="form-control" autofocus>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-lg-4 col-form-label" for="location">
Location *
</label>
<div class="col-lg-8">
<select class="custom-select form-control" id="location" name="location">
<option value="">Select Position</option>
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="submit_button" type="submit" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</form>
</div>
</div>
I'm writing an app that allows my wife to add her recipes to a database i have set up. I have a form set up with both text and a file input for an image. It works fine and she can upload text and image to the database. Now, I'm trying to add a feature so that she can edit it. It's the same exact form only the data goes to a different PHP file for processing. When she clicks the "Edit" button it populates all the text inputs with the data pulled from the server and she can edit. She can also add a new photo if she wishes. Despite the fact that it's the same form, it will not upload the image. The text uploads fine, but the $_POST['recipeImage'] is always empty when I look at the object being sent to the server (recipeImage: "");
I am baffled and cannot see why this isn't working. Here is the code:
HTML FORM (IMAGE UPLOAD IS A BOTTOM):
<div id="editRecipeModal">
<div class="col-md-8">
<div class="card">
<form action="../PHP/modify_recipe.php" method="POST" role="form" class="form-horizontal" enctype="multipart/form-data" id="editRecipeForm" name="editRecipeForm">
<input class="form-control" type="hidden" value="" id="creatorIdEdit" name="creatorId">
<input class="form-control" type="hidden" value="" id="recipeIdEdit" name="recipeId" value="">
<div class="card-header card-header-text" data-background-color="purple">
<h4 class="card-title"><i class="far fa-edit"></i> Edit Recipe</h4>
</div>
<div class="card-content"
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Name</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" name="name" maxlength="150" id="editRecipeName" required>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Prep Time</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="prepTime" id="editPrepTime" required>
<span class="help-block">Numbers Only. In minutes... ie: 120 Minutes</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Servings</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="servings" id="editServings" required>
<span class="help-block">Numbers Only...</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Calories</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="number" name="calories" id="editCalories" required>
<span class="help-block">Numbers Only</span>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Brief Description</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="description" id="editBriefDescription" rows="5" required></textarea>
</div>
</div>
</div>
<hr>
<div class="row">
<label class="col-sm-2 label-on-left">Ingredients</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="ingredients" id="editPasteIngredientsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Recipe Steps</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<textarea class="form-control" name="directions" id="editPasteStepsShow" rows="20" required></textarea>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-2 label-on-left">Search Tags</label>
<div class="col-sm-9">
<div class="form-group label-floating is-empty">
<label class="control-label"></label>
<input class="form-control" type="text" id="editTags" name="tags" required>
</div>
</div>
</div><br> <br> <br> <br>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" data-style="btn btn-primary btn-round" title="vegOrVegan" data-size="7" id="vegOrVeganEditSelect">
<option disabled selected>Dietary Restrictions</option>
<option value="" name="">None</option>
<option value="T" name="T">Vegetarian</option>
<option value="VG" name="VG">Vegan</option>
</select>
<input type="hidden" id="vegOrVeganEdit" name="vegOrVegan">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="suggestedPairingEditSelect" data-style="btn btn-primary btn-round" title="Suggested Pairing" data-size="7">
<option disabled selected>Suggested Pairing</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="RW" name="RW">Red Wine</option>
</select>
<input type="hidden" id="suggestedPairingEdit" name="suggestedPairing" value="">
</div>
<div class="col-lg-4 col-md-6 col-sm-3">
<select class="selectpicker" id="" data-style="btn btn-primary btn-round" title="Some Other Attributes" data-size="7">
<option disabled selected>Some Other Attributes</option>
<option value="" name="">None</option>
<option value="B" name="B">Beer</option>
<option value="WW" name="WW">White Wine</option>
<option value="WW" name="WW">Red Wine</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;">
</div>
</div>
<div class="row" style="width: 80%; margin: 0 auto;">
<div class="col-sm-4"></div>
<div class="col-sm-4" style="text-align: center;">
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail">
<img src="../assets/img/placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail"></div>
<div>
<span class="btn btn-rose btn-round btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="recipeImage" id="recipeImageEdit" />
</span>
<i class="fa fa-times"></i> Remove
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br><br>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4" style=" text-align: center; margin: 0; padding: 0;"><button class="btn btn-primary btn-lg modRecButton" type="submit" id="submitRecipe">Submit Changes</button></div>
<div class="col-sm-4 closePanel" style="text-align: center; margin: 0; padding: 0;" id="closePanel"><button type="button" class="btn btn-default btn-lg">Cancel Changes</button>
</div>
<div class="col-sm-2"></div>
</div>
</div>
</form>
</div>
</div>
</div>
AJAX CODE
$(document).ready(function(e) {
$("#editRecipeForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: "../PHP/modify_recipe.php",
type: "POST",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function(response) {
let parsedResponse = JSON.parse(response);
let newObject = parsedResponse[0]
if (parsedResponse == 'notModified') {
showErrorModal();
}else{
reBuildAfterObjectChange(newObject.recipeId, parsedResponse);
}
},
error: function() {
showErrorModal();
}
});
}));
});
PHP CODE
<?php
include 'db_operations.php';
if(isset($_POST['name'])&& isset($_POST['description']) && isset($_POST['ingredients'])&& isset($_POST['directions']) && isset($_POST['suggestedPairing']) && isset($_POST['prepTime']) && isset($_POST['servings']) && isset($_POST['calories']) && isset($_POST['vegOrVegan']) && isset($_POST['recipeId']) && isset($_POST['creatorId']))
{
$result = '';
$name = $_POST['name'];
$description = $_POST['description'];
$ingredients = $_POST['ingredients'];
$ingredients = str_replace(';', '-', $ingredients);
$ingredients = str_replace('\n', ';', $ingredients);
$directions = $_POST['directions'];
$directions = str_replace(';', '-', $directions);
$directions = str_replace('\n', ';', $directions);
$suggestedPairing = $_POST['suggestedPairing'];
$prepTime = $_POST['prepTime'];
$servings = $_POST['servings'];
$calories = $_POST['calories'];
$vegOrVegan = $_POST['vegOrVegan'];
$recipeId = $_POST['recipeId'];
$creatorId = $_POST['creatorId'];
$tags = $_POST['tags'];
$time=time();
$lastModified = (date("Y-m-d H:i:s", $time));
modifyRecipe_recipes($name, $description, $ingredients, $directions, $suggestedPairing, $prepTime, $servings, $calories, $vegOrVegan, $lastModified, $creatorId, $recipeId, $tags);
}
if(isset($_POST['recipeImage'])){
$size = $_FILES['recipeImage']['size'];
if($size > 0){
$tmp_dir = $_FILES["recipeImage"]["tmp_name"];
$tmpImg = $_FILES['recipeImage']['name'];
$ext = strtolower(pathinfo($tmpImg, PATHINFO_EXTENSION));
$recipeImage = rand(10000, 10000000).".".$ext;
move_uploaded_file($tmp_dir, "../userRecipeImages/".$recipeImage);
$sql = 'UPDATE recipes SET recipeImage = :recipeImage WHERE creatorId = :creatorId AND recipeId= :recipeId';
$stmt = $conn->prepare($sql);
$stmt->bindParam(':creatorId', $creatorId, PDO::PARAM_STR);
$stmt->bindParam(':recipeImage', $recipeImage, PDO::PARAM_STR);
$stmt->bindParam(':recipeId', $recipeId, PDO::PARAM_STR);
$stmt->execute();
}
}
$modifiedRecipeDate = getLastModified_recipes($lastModified, $creatorId);
if ($modifiedRecipeDate === $lastModified) {
$newObject = getSingleRecipeById_recipes($recipeId, $creatorId);
echo json_encode($newObject);
}
else {
$result = "notModified";
echo json_encode($result);
}
?>
You obviously forgot to change $_POST['recipeImage'] to $_FILES['recipeImage']
Files are contained in the $_FILES global variable not $_POST
Change this
if(isset($_POST['recipeImage'])){
to
if(isset($_FILES['recipeImage'])){