I am trying to create a form that can dynamically create multiple nested form. Here is a snippet of the html:
<ng-form name="" ng-repeat="form in forms1">
<button class="btn btn-success btn-md" ng-click="addNewSchedule(form)">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedule
</button><br>
<div ng-repeat="cont in form.schedule">
<div class="row">
<div class="col-md-6">
<label>Base Date Key <span style="color: red;">*</span></label>
<select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
<option value="">Select Base Date Key</option>
</select>
</div>
<div class="col-md-6">
<label>Forward Backward <span style="color: red;">*</span></label>
<select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
<option value="">Select Forward Backward Option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Schedule ID </label>
<input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
</div>
</div>
</div>
<br>
<hr>
<ng-form>
<button class="btn btn-success btn-md" ng-click="">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedules
</button><br>
<div class="row">
<div class="col-md-4">
<label>Schedule Amount <span style="color: red;">*</span></label>
<input type="text" name="schedule_amount" class="form-control" ng-model="">
</div>
<div class="col-md-4">
<label>Schedule Charge Code</label>
<select name="charge_code" class="form-control" ng-model="" ng-options="charge_two.key as charge_two.value for charge_two in schedule_charge_code track by charge_two.key">
<option value="">Select Schedule Charge Code</option>
</select>
</div>
<div class="col-md-4">
<label>Frequency <span style="color: red;">*</span></label>
<input type="text" name="frequency" class="form-control" ng-model="">
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Schedule Date <span style="color: red;">*</span> </label>
<input type="text"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="bookloan.schedule_date"
is-open="schedule_date.open"
ng-click="schedule_date.open = true"
datepicker-options="scheduleDateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
</div>
<div class="col-md-4">
<label>Schedule Type <span style="color: red;">*</span></label>
<select name="schedule_type" class="form-control" ng-model="" ng-options="schedule for schedule in schedule_type">
<option value="">Select Schedule Type</option>
</select>
</div>
</div>
</ng-form>
</ng-form>
What I have done so far, is when the user clicks the Add Schedule button it displays four input fields.Here is a snippet of the html code that is dynamically created when clicking the Add Schedule button:
<div ng-repeat="cont in form.schedule">
<div class="row">
<div class="col-md-6">
<label>Base Date Key <span style="color: red;">*</span></label>
<select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
<option value="">Select Base Date Key</option>
</select>
</div>
<div class="col-md-6">
<label>Forward Backward <span style="color: red;">*</span></label>
<select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
<option value="">Select Forward Backward Option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Schedule ID </label>
<input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
</div>
</div>
</div>
Also, here is the JavaScript code that is able to create the dynamic input fields:
var schedules;
$scope.forms1 = [{base_date_key: "",forward_backward: "",schedule_id:""}];
$scope.addNewSchedule = function(form1){
console.log(form1.schedule);
if(typeof form1.schedule === 'undefined') {
form1.schedule = [];
}
form1.schedule.push({name:"",base_date_key: "",forward_backward: "",schedule_id: ""});
schedules = form1.schedule;
};
Basically, how this should work is when you click the Add Schedule button which will display four form fields (which was mention above) and should also display Add Schedules Button. When clicking the Add Schedules button, it should dynamically add the Schedule Amount, Schedule Charge Code,Frequency,Schedule Date and the Schedule Type input fields.
Also the output of this in JavaScript should be like this:
[
{
schedule : [
{
base_date_key: "",
forward_backward:"",
schedule_id:"",
schedules : [
{
schedule_amount : "",
schedule_charge_code: "",
frequency: "",
schedule_date: "",
schedule_type: ""
}
]
}
]
}
]
How can I accomplish this thanks in advance.
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.
I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!
While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
I have a form that looks like this:
<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
<div class="form-group col-xs-3" >
<label for="powerPlantName">PowerPlant Name</label>
<input type="text" class="form-control-small" [ngClass]="{ 'has-error': f.submitted && !powerPlantName.valid }" name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantType">PowerPlant Type</label>
<select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
<option value="" disabled>--Select Type--</option>
<option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
{{ powerPlantType }}
</option>
</select>
</div>
<div class="form-group col-xs-3" >
<label for="organizationName">Organization Name</label>
<input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
</div>
<div class="form-group col-xs-3" >
<label for="powerPlantStatus">PowerPlant Active Status</label>
<select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">
<option value="" disabled>--Select Status--</option>
<option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">
{{ powerPlantStatus }}
</option>
</select>
</div>
<div class="form-group col-md-3 col-xs-4">
<button [disabled]="loading" class="btn btn-primary">Search</button>
<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
<div class="form-group col-md-3 col-xs-3">
<button class="btn btn-primary" (click)="f.reset()">Reset</button>
</div>
</form>
The layout for which looks like this:
When I click the Reset button, the default values for the drop down disappears - as shown in the figure below.
How do I make sure that the default value is retained even after hitting the Reset button?
Any ideas?
Have an additional value in the list of elements with id = -1
types:any[]=[
{id:-1,Name:'Select One'},
{id:1,Name:'abc'},
{id:2,Name:'abdfsdgsc'}
];
HTML will look as
<select [(ngModel)]="selectedElement.id">
<option *ngFor="let type of types" [ngValue]="type.id"> {{type.Name}}</option>
</select>
On Reset
reset(){
this.selectedElement = {id:-1,Name:'Select One'};
}
LIVE DEMO
Remove the form reference from f.reset(), change to reset(). Where reset() is the component class method:
reset(){
this.model.powerPlantType = '';
this.model.powerPlantStatus = '';
// and other input resettings too
}
And then change
<button type="button" (click)="reset()">Reset</button>
DEMO
Change the button type from "button" to "reset":
<button type="reset>Reset</button>
Demo
I am new to web development and I am developing a form in HTML using Bootstrap.So I have a div like below:
<div class="form-group">
<label class="col-md-4 control-label" >Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker" >
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>
So depending on the selection of number I want to dynamically create the text box like below div.
<div class="form-group">
<label class="col-md-4 control-label">Username</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="phone" placeholder="Username" class="form-control" type="text">
</div>
</div>
</div>
For example if he selects 1 then one text box should appear if selects 2 then 2 should appear.Any help is appreciated.
Try this
$('.selectpicker[name=state]').change(function() {
var i = 0;
//$('.input-group').children('input').remove() *for reset the inbox on change*
while (i < parseInt($(this).val())) {
$('.input-group').append('<input name="phone" placeholder="Username" class="form-control" type="text">')
i++;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label">Users</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-tasks"></i></span>
<select name="state" class="form-control selectpicker">
<option value=" " >Please select the number of users</option>
<option>1</option>
<option>2</option>
<option >3</option>
</select>
</div>
</div>
</div>
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.