I have tried these solutions: How to set the first option on a select box using jQuery?
These solutions aren't working for me I think because my form is different. I have two radio buttons, and based on which radio button was selected, a dropdown is shown. By default, both dropdowns are hidden (style="display:none"). To show and hide the dropdowns I am the following simple code:
$("#contactRadioButton").click(function () {
$("#contactDropdown").show();
$("#companyDropdown").hide();
});
$("#companyRadioButton").click(function () {
$("#companyDropdown").show();
$("#contactDropdown").hide();
});
One of the code samples I've tried:
$('#contactSelect').change(function(){
$('#companySelect').val('');
});
$('#companySelect').change(function(){
$('#contactSelect').val('');
});
But I need tonly one dropdown to be submitted with a value. Right now, I can click on the contact radio button and then select a value within the dropdown. Then, I can select the company radio button and the other dropdown will be displayed, and I can select a value. Then, both dropdowns will have a value.
PS. I am using bootstrap and bootstrap select. Not sure if that can have anything to do with it.
My full form code (radio buttons and dropdowns):
<div class="form-group">
<label class="control-label">Add contact or company?</label>
<div>
<div class="radio-custom radio-success radio-inline">
<input id="contactRadioButton" name="contact_relatie" type="radio" value="1">
<label for="contactRadioButton">Contact</label>
</div>
<div class="radio-custom radio-success radio-inline">
<input id="companyRadioButton" name="contact_relatie" type="radio" value="1">
<label for="companyRadioButton">Company</label>
</div>
</div>
</div>
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
JS
$('#contactSelect').change(function(){
$('#companySelect option:first').prop('selected', 'selected');
});
$('#companySelect').change(function(){
$('#contactSelect option:first').prop('selected', 'selected');
});
HTML
<div class="form-group " id="contactDropdown" style="display:none">
<label for="name">Contact:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>
<div class="form-group " id="companyDropdown" style="display:none">
<label for="name">Company:</label>
<select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>
Solved it by using this as well, since my code WAS working behind the scenes:
$('#mySelect').selectpicker('render');
https://github.com/silviomoreto/bootstrap-select/issues/84
So for anyone using the bootstrap select, use the above code if you're running into the same issue as me.
Related
I have 2 'select' in my html code and from first select, i want to choose only one option and from second select i want to choose multiple options. I have written code in jquery to get multiple options from select.
JQuery
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
and this code is working perfect, but the problem is my second select is working fine but in my first select i am not able to choose any option and i just want to get only one option from first select.
HTML
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.MASTERID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control" id="cloneMasterIds">
<option value="">Select Master Device Id</option>
<option th:each="master : ${masterIds}" th:value="${master.value}"
th:utext="${master.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.MASTERID}"></p>
</div>
</div>
<!-- Child IDs -->
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.CHILDID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control select-checkbox" id="cloneChildIds"
multiple="multiple">
<option th:each="child : ${childIds}" th:value="${child.value}"
th:utext="${child.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.CHILDID}"></p>
</div>
</div>
Select the second select statement by id. Handle the mousedown and mousemove events:
$("#cloneChildIds").mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(() => select.scrollTop = scroll, 0);
$(select).focus();
}).mousemove(e => e.preventDefault());
I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}
Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED
I have a container that consists of a couple of inputs tag and one select tag. All of them have className, let's call it "contact". In jquery , I am accessing all of them through "contact". Also, there is checkbox that disables when you check it and when toy uncheck it, it empties the input fields and remove disable . The thing i want to do I want when i uncheck the checkbox, I want to set the the input fields as empty string, which i did, but what i did include the selection tag which i do not set as empty string
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").val("");
}
});
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10 contact">
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>
There is error but i dont know what is it
Include the $ reference in your code. That means add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
in your html
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").each(function(i, el){
if($(el)[0].nodeName != "SELECT"){
$(el).val("");
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10 contact">
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>
</div>
Sorry, I don't have enough reputation to comment.
I tested your code and that works well as you want.
You missed selecting jquery in stackoverflow code snippet.
please check follow code.
If it's not working even after you added jquery script, then please let me know jquery version you used. (don't forget to add jquery cdn or picking jquery library in code snippet editor)
if you want to keep selection of select element please remove the contact class in there like below.
$("#showCheckoutHistory").change(function(event){
if (this.checked){
$(".contact").attr("disabled","disabled");
}
else {
$(".contact").removeAttr("disabled");
/* here is the problem, how can you empty the value of the input ONlY. Without chnaging the className Javascript and Adding Another name in the HTML
*/
$(".contact").val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="showCheckoutHistory" name="showCheckoutHistory" type="checkbox"/><label for="showCheckoutHistory">check</label>
<div class="container">
<input type="text" value="oo" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="xx" class="form-control col-xs-10 contact"><br><br>
<input type="text" value="yy" class="form-control col-xs-10 contact"><br><br>
<select class="form-control col-xs-10"> <!-- I removed contact class in here to keep selection -->
<option>A</option>
<option>B</option>
<option selected>C</option>
</select>
</div>
I am working on a form for my site of which users can input their account names and then they submit the list of account names.
Below is my HTML of which is inside a form (Please ignore any smelly code, I will sort it).
<div class="form-group">
<label asp-for="Accounts" class="control-label site-font">Accounts<b style="color: red">*</b></label>
<select id="account-list" name="accounts[]" multiple="multiple" class="form-control" asp-for="Accounts"></select>
<div style="margin-top: 1%"></div>
<input type="text" id="account-name" placeholder="Enter your Account Name" class="form-control" asp-for="Accounts" />
<div style="margin-top: 1%"></div>
<select id="platform-list" class="form-control">
<option>Xbox</option>
<option>PS4</option>
<option>PC</option>
</select>
<div style="margin-top: 1%"></div>
<select id="software-list" class="form-control">
<option>Microsoft Account</option>
<option>Playstation Network</option>
<option>Uplay</option>
<option>Steam</option>
<option>Discord</option>
<option>None of the above</option>
</select>
<div style="margin-top: 1%"></div>
<input type="checkbox" id="main-account"/> Main Account
<div style="margin-top: 1%"></div>
<input type="button" class="submit-button" value="Add Account" id="add" />
<span id="account-error" asp-validation-for="Accounts" class="text-danger"></span>
</div>
My issue is that whenever I click submit I get an Invalid Cast Exception.
My Controller takes a type of Member of which the Accounts property is a list of string.
Below is what the user will see when they have added a few of their accounts, and each row will be an item within the list.
I have used JavaScript to get this working, but I don't think that this will have any effect on the issue, so I haven't included it in the question but if you want to see it then let me know.
If I have missed anything, or the question is unclear then please let me know and I will try to get back to it as soon as possible.
The reason you're getting the error is because the form is posted with something as follows:
"accounts[]" = "SelectedOption1"
"accounts[]" = "SelectedOption2"
"accounts[]" = "SelectedOption3"
....
I think that the easiest way to get around this would be to make the "Accounts" property an array/list of strings. If you are unable to do that you could use JS to store the selected values in a comma-delimited string and post that field to the accounts property instead of the control:
<select id="account-list" multiple="multiple" class="form-control" asp-for="Accounts">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input type="hidden" id="accountInternal" name="accounts[]" value="" />
$("form").submit(function () {
$("#accountInternal").val($("#account-list").val().toString());
return true;
});
I have a register form. I just need to load bootstrap form in same page behind the select menu when someone click something from select menu. Should I hide form until someone click that item in select menu right?
This is my code.
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
I need to load this form someone click Apartment in the menu.
<form>
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="Size(sqft)">
/div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bedrooms">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" placeholder="No of bathrooms">
</div>
</div>
</div>
</div>
</form>
I tried play with this code. But it redirect to another pages.
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
What method do I need to follow?
Have a look at this jsfiddle:
I gave your wrapper of your apartment an id <div class="col-md-12" id="apartment">.
So I added following jQuery to toggle your html of your apartment:
$('select.menu').change(function(){
// this function runs when a user selects an option from a <select> element
switch($(this).find("option:selected").prop('value')) {
case '1': $('#apartment').show(); break;
default: $('#apartment').hide(); break;
}
});
And don't forget to hide your #apartment:
#apartment {
display: none;
}
window.location.href will redirect you to the new page. You can just hide your form before user make a select change or get it dynamically with jQuery.load() function.
Let's say your HTML,
<div class="form-group">
<select class="form-control menu">
<option>Select category*</option>
<option>Apartment</option>
<option>Lands</option>
</select>
</div>
by default let the form is in display:none.
Jquery,
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
if($(this).val == "Apartment"){
$('form').show();
}else{
$('form').hide();
}
});
</script>