How to replace class name inside div id?

How to replace class name inside div id? - javascript

HTML:
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
How to replace col-md-6 with col-md-4 inside div id payment_group by using jQuery? Sorry for my weak English.

Normally, you could simply do this:
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
//Or
$('#payment_group .col-md-6').addClass("col-md-4").removeClass("col-md-6"‌);
The toggle option is not the best, it will add a class if it does not exist and remove it if it does... It's a bit more concise tough...

<div id="payment_group">
<div class="col-md-6" id="changeclass">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
add one id named="changeclass" for col-md-6 div
then in jquery
$("#changeclass").toggleClass('col-md-4');

You can use $("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
Working demo
$("#payment_group .col-md-6").addClass("col-md-4").removeClass("col-md-6")
console.log("elements with class col-md-4: " + $("#payment_group .col-md-4").length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

Use addClass() and removeClass()
$("#payment_group .col-md-6").addClass('col-md-4').removeClass('col-md-6')
.col-md-4 {
color: red
}
.col-md-6 {
color: blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>

You can set the class regardless of what it was.
$("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");

$("#payment_group").find(".col-md-6").addClass("col-md-4");
$("#payment_group").find(".col-md-6").removeClass(".col-md-6");

Try with this one
$( "#payment_group div:first-child" )
$( this ).removeClass( ".col-md-6" );
$( this ).addClass( ".col-md-4" );
});
Thanks

Try this to remove the class
$(selector).removeClass(classname,function(index,currentclass))
And to add
$(selector).addClass(classname,function(index,currentclass))
You can check w3schools site here.
and for add class, check this.

I think this will going to help u as well !
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#payment_group .col-md-6').toggleClass('col-md-6 col-md-4');
});
</script>
</head>
<body>
<div id="payment_group">
<div class="col-md-6">
<div class="form-group form-md-line-input">
<label for="form_control_1">Paid Amount</label>
<input type="number" class="form-control" step="0.01" id="Paid_amount" name="Paid_amount" style="" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-md-line-input" style="margin-bottom: 0px">
<label>Payment Mode</label>
<select class="form-control selectpicker" data-live-search="true" name="Payment_mode" id="Payment_Mode" onchange="show_bank()">
<option value="">Select Payment Mode</option>
<option value="Cash">Cash</option>
<option value="Card">Card</option>
<option value="Credit">Credit</option>
</select>
</div>
</div>
</div>
<button id="gete">Submit</button>
</body>
</html>

You can use jQuery's addClass and removeClass for this:
$('#payment_group').addClass("col-md-4").removeClass("col-md-6");

Related

Redirect to form with input value from previous form in Laravel

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>&nbsp<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.

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

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>

Show a div on select value codeigniter

I have this dropdown
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
I want to hide this one,
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
and then when I selected yes on the first dropdown, it will show the second dropdown. how can I do this ?

what i did is
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name = "LEAVE_ENTITLED" id = "LEAVE_ENTITLED">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
<div class="solop box-body" style="display:none" id = "Yes">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name = "SOLO_P">
<option></option>
<option value= "Yes">Yes</option>
<option value= "No">No</option>
</select>
</div>
</div>
</div>
then my javascript is
$(function() {
$('#LEAVE_ENTITLED').change(function(){
$('.solop').hide();
$('#' + $(this).val()).show();
});
});

By default, hide the second drop down on page load.
Then check the first drop down value to be 'Yes' and remove hide class for second drop down.
$('#LEAVE_ENTITLED').on('change', function() {
var $this = $(this),
$dropdown2 = $('#ddlSecond');
if ($this.val() == 'Yes') {
$dropdown2.removeClass('hide');
} else {
$dropdown2.addClass('hide');
}
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="LEAVE_ENTITLED"><span>*</span>Leave Entitled:</label>
<div class="col-sm-5">
<select class="form-control" name="LEAVE_ENTITLED" id="LEAVE_ENTITLED">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>
<div class="box-body hide" id="ddlSecond">
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-2" for="SOLO_P"><span>*</span>Solo Parent ?
<br>(If leave entitled)</label>
<div class="col-sm-5">
<select class="form-control" name="SOLO_P">
<option></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
</div>

How to append child div into a parent div using jquery on the click of a button

<div class="addMore">
<div class="row addPlus">
<p class="emergencyTitle">Child 1</p>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" name="ch1_name">
</div>
<div class="form-group">
<label for="name">Class</label><br>
<select name="ch1_class">
<option value=""> 1 </option>
<option value=""> 2</option>
<option value=""> 3 </option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">DOB</label>
<input type="text" class="form-control" name="ch1_dob" id="datepicker">
</div>
<div class="form-group">
<label for="name">Section</label><br>
<select name="ch1_secion">
<option value=""> A </option>
<option value=""> B </option>
<option value=""> C </option>
</select>
</div>
</form>
</div>
</div>
</div>
On the click of a button I am doing this ..
$child = $('.addPlus')
$('.addMore').append($child)
But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.

if you want to clone the item - you can use
$('.addPlus').first().clone().appendTo('.addMore')

.addPlus is already appended to .addMore, so your jQuery would work but have no effect.
Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:
var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)

jQuery Chained Input

I've done some research but haven't been able to find and answer.
I have 1 text input and 1 selectbox.
If the selected value of the selectbox is 2, I 'd like the textbox to be hidden
If the selected value of selectbox is 1, the textbox should appear.
Here is my code:
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" class="form-control">
</div>
</div>

You can assign an id to the form-group then use that to hide/show that element
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" name="fiyatlandirma">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group" id="fiyat-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="fiyat" class="form-control"/>
</div>
</div>
then
//dom ready handler - wait for the element to load
jQuery(function($){
//change event handler to trigger when the select is changed
$('select[name="fiyatlandirma"]').change(function(){
//hide or display the group element based on the value of select
$('#fiyat-group').toggle(this.value == '2')
}).change();//to set the initial display state
})
http://learn.jquery.com/
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/change
http://api.jquery.com/toggle

Try this:
$(document).ready(function(){
$("select.form-control").change(function(){
if($(this).val()=="1")
$("input[name=fiyat]").hide();
else
$("input[name=fiyat]").show();
});
});

You can give id to all three fields: select, input label and input box
$(document).ready(function () {
$("#pricing").change(function () {
if ($(this).val() == "1") {
$("#textbox").hide();
$("#textLabel").hide();
} else {
$("#textbox").show();
$("#textLabel").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Pricing</label>
<div class="col-sm-10">
<select class="form-control" name="pricing" id="pricing">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label" id="textLabel">Our Text Input</label>
<div class="col-sm-10">
<input type="text" name="pricing" id="textbox" class="form-control">
</div>
</div>

using java script
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Fiyatlandırma</label>
<div class="col-sm-10">
<select class="form-control" id="select" name="fiyatlandirma" onclick="hide()">
<option>Please Select</option>
<option value="1">Value 1</option>
<option value="2" >Value 2</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Our Text Input</label>
<div class="col-sm-10">
<input type="text" id="fiyat" name="fiyat" class="form-control">
</div>
</div>
<script>
function hide(){
var select = document.getElementById("select").selectedIndex;
var input = document.getElementById("fiyat");
if(select == 1)
input.style.visibility= "hidden";
else if(select == 2)
input.style.visibility= "visible";
}
</script>

Develop Reference

JavaScript is the programming language of the Web.

How to replace class name inside div id? - javascript

You can set the class regardless of what it was. $("#payment_group .col-md-6").attr("class", "class-name-you-want-to-assign");

$("#payment_group").find(".col-md-6").addClass("col-md-4"); $("#payment_group").find(".col-md-6").removeClass(".col-md-6");

Try with this one $( "#payment_group div:first-child" ) $( this ).removeClass( ".col-md-6" ); $( this ).addClass( ".col-md-4" ); }); Thanks

Try this to remove the class $(selector).removeClass(classname,function(index,currentclass)) And to add $(selector).addClass(classname,function(index,currentclass)) You can check w3schools site here. and for add class, check this.

You can use jQuery's addClass and removeClass for this: $('#payment_group').addClass("col-md-4").removeClass("col-md-6");

Related

Redirect to form with input value from previous form in Laravel

How to give dynamic id to the clone div in jquery. how can i give dynamic id to the clone div?

Show a div on select value codeigniter

How to append child div into a parent div using jquery on the click of a button

jQuery Chained Input

Categories

Resources