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/
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/
When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks
I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.
"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010
I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help
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>