I've got three selectboxes in a fieldset.
Everything worked fine but after the new firefox update there's a problem.
When I click on the second or third selectbox it closes the dropdown and focuses the first selectbox. I have already disabled js and in the css there's only a border styling on focused element.
Any ideas?
<fieldset><div><label>Geburtsdatum:
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</label></div></fieldset>
I've deleted the optionlists.
Got any Idea?
This bug is only the latest firefox version.
Regards.
Move closing label tag after Geburtsdatum:
<fieldset><div><label>Geburtsdatum:</label>
^^
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</div></fieldset>
Related
I'm making multiple fields with drop downs in them. When I click my checkbox to disable the fields, the dropdown fields have a lighter colour on both the text field background and the text itself when compared to the text (non-dropdown) fields. Any idea how to make the colours as the same?
My code looks like this:
<form
v-on:submit.prevent
:disabled="isDisabled(option)"
>
<div class="right">
<button class="button default link small">
<input
type="checkbox"
v-model="index.Enabled"
#change="formUpdated('', index)"
>
<label :for="`status-${index}`">Enabled</label>
</button>
</div>
<div class="row">
<label class="bold">thing</label>
</div>
<div class="clg5 cmd6 csm8 cxs12">
<select v-model="thing.thing2"
:disabled="isDisabled(option)"
#keydown.enter="$event.stopPropagation()"
>
<option disabled value="">Please select one</option>
<option>option 1</option>
<option>option 2</option>
</select>
</div>
</div>
</form>
It's hard to customize the select element.
How about use Bootstrap Dropdown?
https://getbootstrap.com/docs/4.0/components/dropdowns/
Plunker.
The above plunker is working fine in Chrome and IE. But When comes to Mozilla Firefox it is not.
When I try to select the dropdown the page is reloading.How to stop that issue.
<script type="text/ng-template" id="items_renderer.html">
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" style="display:none" ng-model="item.rowId">
<input type="text" id="componentName{{$index}}" ng-style="getWidth(item.rowId)" ng-change="validateOnChange(item.componentName, 'componentName','',$index)" ng-model="item.componentName" style="width:156px;height: 23px;">
<input type="text" id="componentIdentification{{getRowId(item.rowId)}}" ng-model="item.componentIdentification" ng-change="validateOnChange(item.componentIdentification,'componentIdentification', '',getRowId(item.rowId))" style="width:125px;height: 23px;">
<select ng-model="item.componentType" id="componentType{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentType, 'componentType', 'Select', getRowId(item.rowId))" style="width:102px;height: 23px;">
<option>Select</option>
<option ng-repeat="type in typeList" value="{{type.TYPE_ID}}">{{type.COMPONENT_TYPE}}</option>
</select>
<select ng-model="item.componentState" id="componentState{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentState,'componentState', 'Select' ,getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="list in statusList" value="{{list.STATUS_ID}}">{{list.STATUS}}</option>
</select>
<select ng-model="item.actionId" id="actionId{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionId, 'actionId', 'Select',getRowId(item.rowId))" style="width:103px;height: 23px;">
<option>Select</option>
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
<select ng-model="item.actionToPerform" id="actionToPerform{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionToPerform, 'actionToPerform', 'Select',getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="actionPerform in actiontoperformList" value="{{actionPerform.ACTIONPERFORM_ID}}">{{actionPerform.ACTION_TO_PERFORM}}</option>
</select>
you need to remove the ng-model from the ui-tree-nodes div.
change this
<ol ui-tree-nodes ng-model="componentList">
to this
<ol ui-tree-nodes>
Demo
I solved this problem by disabling the drag and drop as it is calling some internal functions hence the page is reloading.
<div ui-tree="options" data-drop-enabled="false" data-drag-enabled="false">
I have a form with few input fields and select menus. I'm using bootstrap select plugin for select menus. Link
So I just completed all things and applied bootstrap validation using this plugin. Link and it's working fine except select menus.
When I click the select menu and click out side ( without selecting menu items ) It didn't do anything. Normally it should change border color and give error message like this. "Please fill out this field." But when I click submit, it working fine. After that I removed bootstrap selectpicker plugin. Then it worked fine. I'm thinking that there are conflicts with both two plugins. Please see example images.
Click select menu and outside click(not working)
Click form submit and working fine.
And I tried with this code but no luck. I need to show an error message when someone click select menu and if he doesn't choose anything and click outside like input fields. What is the best solution for this?
Here is an example
jsbin
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.select').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
You are handling the hide.bs.select event on the select class that is not on your select input. Try with .selectpicker instead :
<form data-toggle="validator">
<div class="form-group">
<label for="select" class="control-label">Title</label>
<div class="form-input">
<select class="selectpicker form-control" title="Please Select" id="select" name="select" required>
<option value=""></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
<option value="5">Dr</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
$('.selectpicker').on( 'hide.bs.select', function ( ) {
$(this).trigger("focusout");
});
Here is the updated jsbin
You have to use ".selectpicker".
Maybe it will helps you to solve yout issue:
http://formvalidation.io/examples/bootstrap-select/
I have an HTML for in which I have dropdown at the beginning, How do I change the form fields base on selection of dropdown value?
Here is the code.
Like if I select General Inquiry it should display first 2 form fields and the form fields in general div
If I select Credit Inquiry it should display first 2 form fields and the form fields in credit div
if I select payment Inquiry it should display first 2 form fields and the form fields in payment div
<form action="">
<select name="cases" id="cases">
<option value="general">General Inquiry</option>
<option value="credit">Credit Inquiry</option>
<option value="payment">Payment Issue</option>
</select><br>
<label for="email">Email Address <span>*</span></label>
<input type="text">
<label for="full name">Full Name <span>*</span></label>
<input type="text">
<div class="general" id="general">
<label for="documents">Wish to submit any requested documents?</label>
<input type="radio" name="radio">Yes
<input type="radio" name="radio">No <br><br>
<label for="select">How did you find out about us?<span>*</span></label><br>
<select name="case" id="case-type">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select><br>
</div>
<div class="credit" id="credit">
<label for="Date of Inquiry">Date of Inquiry<span>*</span></label>
<input type="date">
<label for="Agency">Agency 3 <span>*</span></label>
<input type="text">
</div>
<div class="payment" id="payment">
<label for="Service Phone Number">Service Phone Number<span>*</span></label>
<input type="text">
<label for="select">Topic<span>*</span></label><br>
<select name="case" id="case-type">
<option value="topic1">Topic 1</option>
<option value="topic2">Topic 2</option>
<option value="topic3">Topic 3</option>
</select><br><br>
</div>
<br><br>
<button>Submit</button>
</form>
Late to the party here, but here is another way
// hide all the divs
$('div').hide()
// Show and hide selected div
$('#cases').change(function () {
var value = this.value;
$('div').hide()
$('#' + this.value).show();
});
Also created a demo
I wrote for case "general"..U can follow this for other cases
$("#cases").change(function () {
var case = $( "#cases option:selected" ).val();
if(case=="general")
{
//show 2 form fields here and show div
$("#general").show();
}
});
Just hide all divs an show the corresponding one on select change if this is what you mean
$('div').hide()
$('#cases').change(function(){
var v=this.value;
$('div').hide().filter(function(){return this.id==v}).show()
});
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>