In Lighthouse report I have an error: "ARIA items do not have accessible names" and it looks like div.ss-list is the problem (because it has role="listbox" attribute which fails aria-input-field-name audit). Unfortunately my slimselect doesn't copy custom attributes from select when initialized, for example aria-label="category".
Is there a way to copy/add custom attributes to slimselect div.ss-list element when initializing (without injection html after initializing) or do you have any other good solutions to that issue?
Here is sample code from devtools with already created slimselect:
<select name="category" aria-label="Category" class="search__select" tabindex="-1" data-ssid="ss-59594" aria-hidden="true" style="display: none;">
<option value="">All</option>
<option value="5576">Category 1</option>
<option value="10">Category 2</option>
<option value="82">Category 3</option>
<option value="199">Category 4</option>
</select>
<div class="ss-59594 ss-main search__select" style="">
<div class="ss-single-selected ss-open-below">
<span class="placeholder">All</span>
<span class="ss-deselect ss-hide">x</span>
<span class="ss-arrow"><span class="arrow-up"></span></span>
</div>
<div class="ss-content ss-open">
<div class="ss-search">
<input type="search" placeholder="Search" tabindex="0" aria-label="Search" autocapitalize="off" autocomplete="off" autocorrect="off">
</div>
<div class="ss-list" role="listbox">
<div class="ss-option ss-disabled ss-option-selected" role="option" data-id="97962314">All</div>
<div class="ss-option" role="option" data-id="79478522">Category 1</div>
<div class="ss-option" role="option" data-id="32989768">Category 2</div>
<div class="ss-option" role="option" data-id="53607703">Category 3</div>
<div class="ss-option" role="option" data-id="31214879">Category 4</div>
</div>
</div>
</div>
Related
I wish to add row or rows into "bin type" in example below:
It depends on me how many rows it is going to be. If i will decide on three rows i wish to finalize on confirmation button and continue another table-row. I wish to do that in Thymeleaf because i don't know JavaScript. My whole project is in Spring/Hibernate/thymeleaf, contains about 40 bins in my sql DB.
Here is my html file:
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{binsFeatures}">
<option value="0">Select BIN type</option>
<option th:each="binFeature : ${binsFeatures}" th:value="${binFeature.id}"
th:text="${binFeature.name}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-dumpster"></i></span>
</div>
</div>
<div class="form-group col-md-4">
<input type="text" th:field="*{quantity}"
class="form-control input-lg"
placeholder="amount"
required="true">
<span th:if="${#fields.hasErrors('quantity')}"
th:errors="*{quantity}"
class="text-danger">
Quantity Error
</span>
<span class="input-group-addon"></span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<select class="form-control" th:field="*{type}">
<option value="0">Select Type of Inbound</option>
<option th:each="inbound : ${inbounds}" th:value="${inbound.id}"
th:text="${inbound.type}"></option>
</select>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-viruses"></i></span>
</div>
This is a noob question, I send a post request to my controller and all it can get is the request of the input. What I want is I can also get the value of $cat array.
Here's my blade:
#if (!$categories->isEmpty())
<form action="{{route('subcategory.store')}}" method="POST">
#csrf
<div class="row">
<div class="input-group mb-3 col-md-4">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Choose Category:</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
#foreach ($categories as $cat)
<option value="{{$cat->id}}">{{$cat->name}}</option>
#endforeach
</select>
</div>
<input type="text" name="subcat" id="subcat" class="form-control col-md-3 ml-5">
<button type="submit" class="btn btn-success btn-lg ml-3">Save Sub Category</button>
</div>
</form>
#endif
And here's my returned value.
{"_token":"XlzwIt2jFqcybqqSjwLLJIAChG5tui7gvHzlaeAq","subcat":"xx"}
You forgot to add name="cat" in select i guess
<select class="custom-select" id="inputGroupSelect01">
simple add name="" attr
<select class="custom-select" id="inputGroupSelect01" name="cat">
i have this page where i have form where the action url are same. My second form work perfectly fine but mu first form doesn't responding when i hit the button or <a>. I've try to switch the <form action="{{url('purchase')}}" method="post") between form, i've try to cut the action on second form and move it to first form still no luck... any idea? here's sum of my code
<form class="px-2 py-2" action="{{ url('purchase') }}" method="post">
{{csrf_field()}}
<div id="items">
</div>
<div class="row mx-1 px-2">
Purchase
</div>
</form>
that's my first form, inside of id="items" purposely empty since i fill it up with javascript
<form id="newItemForm" style="display:none;">
<div class="form-group row" id="item">
<label for="invoice" class="col-sm-2 col-form-label">Supplier</label>
<div class="col-sm-2">
<select class="form-control" onchange="newExisting(this)">
<option value="#" selected>Choose Supplier</option>
<option value="existing">Existing Supplier</option>
<option value="new">New Supplier</option>
</select>
</div>
<div class="col-sm-8" id="existingCompany" style="display:none;">
<div class="row">
<div class="col-sm-4">
<select class="form-control" name="fromE" onchange="localImport(this)">
<option value="#" checked>From</option>
<option value="f" checked>Import</option>
<option value="l" checked>Local</option>
</select>
</div>
<div class="col-sm-8">
<select class="form-control" name="supplier" id="supplierID">
<option value="#">Choose Company</option>
</select>
</div>
</div>
</div>
<div class="col-sm-8" style="display:none;" id="newCompany">
<div class="row">
<div class="col-sm-4">
<select class="form-control" name="fromN">
<option value="#" checked>From</option>
<option value="f" checked>Import</option>
<option value="l" checked>Local</option>
</select>
</div>
<div class="col-sm-4">
<input type="text" name="kind" value="" placeholder="PT, CV, FIRMA" class="form-control">
</div>
<div class="col-sm-4">
<input type="text" name="supplierName" placeholder="Company Name" class="form-control">
</div>
</div>
</div>
</div>
<div id="newItems">
<div class="form-group row" id="item">
<label for="invoice" class="col-sm-2 col-form-label">Item Name</label>
<div class="col-sm-10">
<input type="text" name="item0" class="form-control" placeholder="Item Name" onkeyup="getCompanyGoods(this)">
<span class="text text-danger" style="display:none;" id="existsWarning0">*Item already exists</span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="taxInvoice">QTY<span class="text-danger">*</span></label>
<input type="number" name="qty0" class="form-control" id="qty0" required onkeyup="calculate(this)">
</div>
<div class="form-group col-md-3">
<label for="inputPassword4">Units<span class="text-danger">*</span></label>
<input type="number" name="units0" class="form-control" id="units0" required onkeyup="calculate(this)">
</div>
<div class="form-group col-md-3">
<label for="inputPassword4">Total</label>
<div class="form-controll font-weight-bold" style="font-size:x-large;" id="total0">IDR0.00</div>
</div>
</div>
</div>
<label class="btn btn-primary" id="newRow" onclick="addRow()">+ Item</label>
<input type="hidden" name="type" value="new">
<input type="hidden" name="nore" value="#" id="nore">
<input type="number" name="totalItem" value="0" id="totalItem">
<button name="button" class="btn btn-danger float-right" >Purchase</button>
</form>
this is my second form and it work perfectly....
Change
Purchase
to
<button type='submit'>Purchase</button>
Because you have used a tag instead of button type "submit"
Purchase
Change it to like this
<button class="btn btn-primary" type="submit"> Purchase </button>
I am using materialize css. I created a tab and put select element inside it. But it was not closing after selecting element.I am using materialize 0.98.
If i put it outside tab then it works.
Here is my code :
My Scrtipt
<script>
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select();
});
</script>
Html Code :
<div class="main mainContentMargin">
<div class="row">
<!-- This will Work-->
<div class="col s12 input-field">
<select id="company_select1" name="company_select1">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
<div class="row">
<div class="card col s12 medium">
<ul id="tabs-swipe-demo" class="tabs tabs-fixed-width" style="margin-bottom: 1%">
<li class="tab col s6">To Supplier</li>
<li class="tab col s6">Using Product</li>
</ul>
<div id="test-swipe-1" class="col s12">
<!-- This will Work but not closing the dropdown-->
<div class="row">
<div class="col s12 input-field">
<select id="company_select" name="company_select">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
</div>
<div id="test-swipe-2" class="col s12">
</div>
</div>
</div>
</div>
Dropdown is not closing because we make tab swipeable. That's why it dropdown click event was catched by the tab.
I just set the stopPropogation option to true in dropdown and it work
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select({"stopPropagation":true});
});
I have a simple (naked) MailChimp email signup form that I can't get to work in IE9. Every other browser seems fine. I know this question has been asked before but in various different circumstances. We are using JQuery Form Plugin.
<script type="text/javascript">
$(document).ready(function(){
$("#mc-embedded-subscribe-form").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
/*DO SOME OTHER STUFF*/
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="mc_embed_signup">
<form action="//#####.us3.list-manage.com/subscribe/post?u=#############&id=##########" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE10">State </label>
<select name="MMERGE10" class="" id="mce-MMERGE10">
<option value=""></option>
<option value="NSW">NSW</option>
<option value="VIC">VIC</option>
<option value="QLD">QLD</option>
<option value="WA">WA</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_8bd18de15624fc1fb89b76d51_29d17890f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>