Hi there i'm new to web developing and have encounter this problem can anyone help me
so the code is
<div id="compatibility-clone" class="row" style="display: none;">
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_brand">
<option></option>
#foreach ($vehicleBrands as $key => $val)
<option value="{{ $val->id }}" {{ (old('vehicle_brand') == $val->id) ? 'selected' : '' }}>{{ $val->name }}</option>
#endforeach
</select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_model"></select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_type"></select>
</div>
<div class="col-md-3">
<select class="form-control compatibility-item" name="vehicle_year"></select>
</div>
</div>
is being cloned to this div
<div id="compatibility" class="form-group">
<label for="Compatibilities" style="width: 100%">Compatibilities</label>
<button id="addCompatibilities" type="button" class="btn btn-outline-info">Add Compatibilites</button>
</div>
My Js and Jquery is
$("#addCompatibilities").on('click', function(e){
e.preventDefault();
var compatibilitiesClone = $('#compatibility-clone').clone();
compatibilitiesClone.removeAttr('id');
$('#addCompatibilities').before(compatibilitiesClone.show())
$('#compatibility').find('.compatibility-item').select2({
placeholder: "Select",
allowClear: true,
width: '100%',
});
$('#compatibility').find('.row').each(function() {
$(this).find('select[name="vehicle_brand"]').change(function(){
console.log($(this).val());
$(this).find("select[name=vehicle_model]").empty();
generateModels($(this).val());
});
});
});
if i try to create 2nd or 3rd... row then i click the button, the error occur because apparently my drop down in cloned div compatibility-clone also changed. i wonder if there is a way too solve this??
P.S
sorry for the bad grammar
Related
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>
I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});
I have a code block that only appears after a checkbox is checked, but this block is inside a foreach, it will be repeated more than once. the first one works when I click the checkbox, the second repetition no longer works.
how can I solve?
<div class="col-md-12 form-group mb-3" id="2">Adicionar 2ª cor <input type="checkbox" id="isChecked_3"/></div>
<div id="cor4" style="display:none;">
<div class="col-md-12 form-group mb-3">
<label for="sel5"><h6>Selecionar Cor 2:<h6></label>
<select class="form-control" id="sel5" name="{{ $proposedphase->id_proposedphase.'arm_color_2'}}">
<option value="0">Selecionar Cor</option>
#foreach ($colors as $color)
<option value="{{ $color->id_color }}">{{ $color->name }}</option>
#endforeach
</select>
</div>
<script>
$(document).ready(function(){
$('#isChecked_3').change(function(){
if($(this).prop('checked')){
$('#cor4').show();
} else {
$('#cor4').hide();
}
});
});
</script>
An id must be unique on the page. You're using id="cor4" for all the affected <DIV> elements, so you're lucky to have anything working. You could change the id for a class and work on that, but you still have the problem of the id applied to your <select> element.
<div class="col-md-12 form-group mb-3" id="2">Adicionar 2ª cor <input type="checkbox" id="isChecked_3"/></div>
<!-- Change id to class here -->
<div class="cor4" style="display:none;">
<div class="col-md-12 form-group mb-3">
<label for="sel5"><h6>Selecionar Cor 2:<h6></label>
<select class="form-control" id="sel5" name="{{ $proposedphase->id_proposedphase.'arm_color_2'}}">
<option value="0">Selecionar Cor</option>
#foreach ($colors as $color)
<option value="{{ $color->id_color }}">{{ $color->name }}</option>
#endforeach
</select>
</div>
<script>
$(document).ready(function(){
$('#isChecked_3').change(function(){
if($(this).prop('checked')){
// Change id selector to class selector here...
$('.cor4').show();
} else {
// ...and here
$('.cor4').hide();
}
});
});
</script>
I am currently developing an application with Laravel 5.8 version and i use JQuery UI dialog as "pop-up" with some form to add datas in list.
So i have for example this type of form-popup :
<div class="dialog" id="addTr" data-open="{{ isset($_GET['popUpTr']) ? $_GET['popUpTr'] : 'close' }}" title="Ajouter une tranche">
<form method="POST" action="{{ route('tranches.store') }}">
#csrf
<input hidden type="text" name="ID_PROJET" value="{{ isset($projet->ID_PROJET) ? $projet->ID_PROJET : null }}">
<div class="row minimized">
<div class="col-3">
<span>Type contact</span><span class="required-star">*</span>
</div>
<div class="col-8">
<select name="TYPE_CONTACT_" class="form-control form-control-sm" id="select-typeContactAddTr" required>
<option value="">Aucun</option>
<!-- si le projet est reservé uniquement aux entreprises (ouverture projet = 2) -->
#if($projet->OUVERTURE_ == 2)
<option value="1" {{ old('TYPE_CONTACT_') == 1 ? 'selected' : null }}>Entreprises</option>
#else
#foreach($typesContact as $tp)
<option {{ old('TYPE_CONTACT_') == $tp->CLECOD ? 'selected' : null }} value="{{ $tp->CLECOD }}">{{ $tp->LIBCOD }}</option>
#endforeach
#endif
</select>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Numéro <span class="text-9">(numérique)</span></span><span class="required-star">*</span>
</div>
<div class="col-2">
<input name="CPT_TRANCHE" id="input-cptAddTr" maxlength="2" value="{{ old('CPT_TRANCHE') }}" type="text" class="form-control form-control-sm {{ $errors->first('CPT_TRANCHE') ? 'is-invalid' : '' }}" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Libellé</span><span class="required-star">*</span>
</div>
<div class="col-8">
<input name="LIBEL_TR" id="input-libelAddTr" type="text" value="{{ old('LIBEL_TR') }}" class="form-control form-control-sm" required>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>De</span><span class="required-star">*</span>
</div>
<div class="col-5">
<input name="MT_SOUTIEN_MINI" id="montant-min-input" type="text" value="{{ old('MT_SOUTIEN_MINI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
<div class="col-4">
<span>à</span><span class="required-star">*</span>
<input name="MT_SOUTIEN_MAXI" id="montant-max-input" type="text" value="{{ old('MT_SOUTIEN_MAXI') }}" class="form-control form-control-sm budget-input" required>
<span>€</span>
</div>
</div>
<div class="row minimized">
<div class="col-3">
<span>Montant réel</span>
</div>
<div class="col-8">
<input name="MT_REEL" id="montant-reel-input" value="{{ old('MT_REEL') }}" type="text" class="form-control form-control-sm budget-input">
<span>€</span>
</div>
</div>
<div class="row minimized">
<button class="btn btn-info" type="submit">Enregistrer</button>
<button class="btn btn-info cancel-button" type="reset">Annuler</button>
</div>
</form>
</div>
The idea is that if the user make an error in the data typing, the datas are returning with the error thanks to the old function of Laravel : https://laravel.com/docs/5.8/requests#old-input
The problem is that these datas have to be delete when the user close the pop-up or click on the "cancel" button.
So i have create function that load pop up and manage the user action on it. Here is the JS code using JQuery UI (last stable version) :
var loadTrPopUp = function(elementID) {
$(function() {
$("#" + elementID).dialog({
autoOpen: false,
modale: false,
resizable: false,
height: 420,
width: 650,
closeText:"",
close: function() {
console.log("close an reset tranche")
$('#select-typeContactAddTr option:first').prop('selected',true);
$("#montant-min-input").attr("value","")
$("#montant-max-input").attr("value","")
$("#montant-reel-input").attr("value","")
$("#input-cptAddTr").attr("value","")
$("#input-libelAddTr").attr("value","")
}
})
})
$(function() {
$(".cancel-button").on('click', function() {
$("#" + elementID).dialog("close");
})
})
}
For the simple <input> that works great and the field are reinitialize when the user close the pop up. But for others types of field like <textarea> or <select>, the datas are not reinitialize.
I search on how i can reinitialize these types of input and i have adapted my code but that still not working so i think that the problem come from the old function. But i'm not sure so if someone have an idea or can help me that would be great!
Thanks in advance for your help.
I'm trying to set the values for select options to default value whenever I changed report options without submitting or refreshing the page.
But whenever I changed reports, the values for session and semester remains the same and will only change back to default value if I submit the report or refresh the page.
The HTML/Laravel
<div class="form-group">
<label class="control-label col-md-offset-1 col-md-2">Report:</label>
<div class="col-md-6">
<select id="list-report" name="list_report" class="form-control" required>
<option></option>
</select>
</div>
</div>
<div id="div-ses" class="form-group group-filter" style="display: none;">
<label class="control-label col-md-offset-1 col-md-2">Session:</label>
<div class="col-md-6">
<select id="list-session" name="list_session" class="form-control" style="width: 100%;">
<option value=""></option>
#foreach($list_session as $session)
<option value="{{ $session }}">{{ $session }}</option>
#endforeach
</select>
</div>
</div>
<div id="div-sem" class="form-group group-filter" style="display: none;">
<label class="control-label col-md-offset-1 col-md-2">Semester:</label>
<div class="col-md-6">
<select id="list-semester" name="list_semester" class="form-control" style="width: 100%;">
<option value=""></option>
#foreach($list_semester as $semester)
<option value="{{ $semester }}">{{ $semester }}</option>
#endforeach
</select>
</div>
</div>
The JQuery
$(document).ready(function() {
var list_report = <?php echo $json_list_report; ?>;
$('#list-report').select2({
data: list_report,
allowClear: true,
placeholder: 'Please Select Report Name'
});
$('#list-session').select2({
placeholder: 'Please Select Session',
});
$('#list-semester').select2({
placeholder: 'Please Select Semester',
});
$('#list-report').on('keyup change', function() {
$('#list-session').prop('selectedIndex', 0);
$('#list-semester').prop('selectedIndex', 0);
});
});
As you can see, the 'keyup change' is supposed to set the value of select back to default value but it does not seem to work. I suspect this is laravel's logic error but I don't know how to fix this. Any help?
I expect the value for session and semester dropdown would be "Please Select Session/Semester" but the actual output is the value itself
e.g Session: 2018/2019, Semester: 2
screenshot2
screenshot1
I have 4 fields in a form
Product Field.
Brand Field.
Services Field.
I want to show them all in the index, but when i go to the product url i want to show only product field and services field
I have tried .show and hide method but it's hiding the field for all url
I am trying this method to hide and Now it's hiding as per my request but compromising in the form field, and I don't want that there's an empty blank space.
The issue was different and it fixed now what I did was I created a different id and call the particular id, without compromising the margin and all and it's working like charm now.
<div style="display:none;" class="appointment" id="booking-form-modal" data-backdrop="static" data-keyboard="false">
<form method="POST" action="/submit-request" onsubmit="submitRequest();">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="productDropdown" class="form-control" name="product" required>
<option value="">Select Products</option>
#foreach($products as $product)
<option value="{{ $product['id']}}">{{ $product['name']}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="serviceDropdown" class="form-control" name="services" required>
<option value="">Select Services</option>
</select>
</div>
</div>
</div>
</form>
</div>
Script to redirect as per the request
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('brandDropdown').style.display = 'none';
}
});
</script>
How does your url look like and when do you call the provided snippet?
Could you also provide a more detailed example of your code?
I guess you want to hide the elements "onload"?
If so, then you need to wait until your elements are loaded.
window.addEventListener('load', function() {
if(/repair/.test(window.location.href))
{
document.getElementById('brandDropdown').closest('.row').style.display = 'none';
}
});
The solution was, I added another id so that it didn't compromise my form fields, kindly find the solution below.
<div id="branddrop-row" class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
And here is the script for hiding as per the request. I call the div id instead of select id so that it didn't compromise my form fields.
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('branddrop-row').style.display = 'none';
}
});
</script>