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
Related
First of all this question might be noob because i only have basic in JS.
The question is, i already create Category data in Thrust's page which only have 4IR and DEB. Which mean in Thrust DB, it have category_id.
So in this page, when i select Thrust, it should show Category that link with Thrust.
But for this case, when i select Thrust, the Category does not appear. Am i doing something wrong here? Im so lost right now
$("#pilih1").change(function() {
var thrus_id = $(this).val();
var thrusts = #json($thrusts->toArray());
$("#pilih2").html(``);
thrusts.forEach(thrust => {
console.log(thrusts);
if (thrust.thrus_id == thrus_id) {
$("#pilih2").append(`
<option value="` + thrust.id + `">` + thrust.category + `</option>
`);
}
});
});
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="namaStrategy">Strategy Name</label>
<div class="col-sm-10" style="width:30%">
<input class="form-control" type="text" name="namaStrategy" />
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="thrus_id">Thrust</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="thrus_id" id="pilih1">
<option selected disabled hidden>PLEASE CHOOSE</option>
#foreach ($thrusts as $thrust)
<option value="{{ $thrust->id }}">{{ $thrust->namaThrust }}</option>
#endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="">Category</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="category" id="pilih2">
<option selected disabled hidden>PLEASE CHOOSE</option>
<option value="DEB">DEB</option>
<option value="4IR">4IR</option>
</select>
</div>
</div>
I have some questions.
I need to do an appointment form, where I have a bunch of text fields, for the name, email, a DATE field and two dropdown menus. At the end of the form, I have a submit button, but I want it to work only if all of the fields above are filled and if the fields are not filled i have an alert message. I did the verification for the name and email to see if the textboxes are empty or not, but I can't do it for the dropdown menus and the date. The date should be picked by the customer and if it's not picked from the menu I have the placeholder "DD.MM/YYYY".
For the dropdown menus I also have placeholders, and I wanna check if the customer has picked one of the options, how can I check if the value of it is the placeholder name that i set?
This is the code to check if the name and email fields are filled and it works. But I can't find any code to work to check if date is empty or the dropdown menus option is the same placeholder.
<script language="JavaScript1.1" type="text/javascript">
function popupok() {
ok = false;
test1=false;
const textbox1 = document.getElementById("name");
const textbox2 = document.getElementById("email");
if(textbox1.value.length && textbox2.value.length > 0)
{
ok=true;
}
if(ok==true)
{
alert("appointment has been scheduled!")
}
else
{
alert("please fill the required fields!")
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="well-block">
<div class="well-title">
<h2>Programeaza-te acum!</h2>
</div>
<form required>
<!-- Form start -->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="name">Nume</label>
<input id="name" name="name" type="text" placeholder="Nume complet" class="form-control input-md"required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input id="email" name="email" type="text" placeholder="E-Mail" class="form-control input-md" required>
</div>
</div>
<!-- Text input-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="date">Data programarii</label>
<br/>
<input type="date" id="date" name="date" required>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="time">Ora programarii</label>
<select id="time" name="time" class="form-control" required>
<option value="8:00">8:00</option>
<option value="9:00">9:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option></option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="appointmentfor">Serviciul dorit</label>
<select id="appointmentfor" name="appointmentfor" class="form-control" required>
<option value="Service#1">Coafor</option>
<option value="Service#2">Cosmetica</option>
<option value="Service#3">Manichiura</option>
</select>
</div>
</div>
<!-- Button -->
<div class="col-md-12">
<br/>
<div class="form-group">
<button id="singlebutton" name="singlebutton" type="submit" onclick="popupok()">Rezerva locul!</button>
</div>
</div>
</div>
</form>```
You can -- the date seems to be an empty string, so you can simply do:
if (date) {
// date isn't an empty string, null, or undefined.
}
const input = document.getElementById("input");
console.log(`${input.value} (has value: ${!!input.value})`)
input.addEventListener("change", () => {
console.log(`${input.value} (has value: ${!!input.value})`)
})
<input type="date" id="input">
use:
const DROPDOWN = document.querySelector('.dropdown');
if(DROPDOWN.value === '') {
// do something if empty
}
if(DROPDOWN.value === 'option value') {
// do something
}
//every option has a value. in html you should specify it in tag by value = 'something';
to check if dropdown is chosen or not. although I don't know what kind of dropdown it is.
for date just do the same thing but like
if(DATE.innerHTML === "DD.MM/YYYY") { //your placeholder
// do something
}
or
if(DATE.value === "DD.MM/YYYY") { //your placeholder
// do something
}
if the user hasn't changed the date it would be same as your placeholder.
You have already used the "required" attribute in your fields which is a HTML5 attribute that forces the form not to be submitted if the field is empty, so you dont need additional JS code.
In case of select dropdowns you are missing an empty entry. Just add a first option in the dropdown with empty value and it will work. Do it like this:
<select name='myselect' id='myselect' required>
<option value=''>Please select</option>
<option value='1'>First option</option>
<option value='2'>Second option</option>
</select>
Its important to have the first option with an empty value. The first option always gets selected by default and the empty value there will trigger the validation.
I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
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
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>