We Keep Coding

How to change a border color of html select tag if value is empty or 0

I have 4 select tag with class name select2 assigned to it. I want to make the border turn to red if there's no selected options or has an value equal to empty or 0. I've tried to add class using jquery but it makes all select.select2 border turns red.
Style
<style>
.errorType {
border-color: #F00 !important;
}
</style>
HTML
<select name="category" class="form-control select2" id="category" onChange="search_Operator(this.value)">
<option value="0"> Select Operator Category</option>
<option value="1">one</option> <option value="2"> two</option>
</select>
<select name="operatorName" class="form-control select2" id="operatorName" onChange="">
<option value="0"> Select operator Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="regionName" class="form-control select2" id="regionName">
<option value="0"> Select region Name</option>
<option value="1">one</option>
<option value="2"> two</option>
</select>
<select name="type" class="form-control select2" id="type">
<option value="0"> Select type </option>
</select>
JQUERY
$(function () {
$(".select2").select2();
});
$(".select2-selection").addClass('errorType');
Any idea?
Thanks in advance.

I've attached a function to the click event of the submit button, in order to check the value of every select element on the page:
$(function () {
$('.form-control-select2').select2();
$('#submit_btn').on('click', function(){
var submit_form = true;
$(".form-control-select2").each(function(){
var selected_value = $(this).val();
if (selected_value==0 || selected_value=='') {
$(this).next().find('.select2-selection').addClass('errorType');
submit_form = false;
} else {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
return submit_form;
});
});
Fiddle here: https://jsfiddle.net/64a41thz/21/.
Also, if you want to remove the red border when valid selection is made, add the following code:
$('.form-control-select2').on('change', function(){
if ($(this).val()!=0 && $(this).val()!='') {
$(this).next().find('.select2-selection').removeClass('errorType');
}
});
Fiddle here: https://jsfiddle.net/64a41thz/24/.

This does the trick. You just need to replace #yourButton with the actual ID you use.
$(document).on("click", "#yourButton", function() {
$(".select2").each(function(index, element) {
$(element).removeClass("errorType");
if ($(element).val() === "0") {
$(element).addClass("errorType");
}
});
});

Put your select tag inside a form with an id="submit" as shown
<form class="" action="" method="post" id="submit">
and add a button below the 4 select tags with this attribute
onclick="return submit_form('form#submit')"
the button should be like this,
<button type="button" class="btn btn-default" onclick="return submit_form('form#submit')">Submit</button>
In your jquery
function submit_form (form_id) {
$(form_id).find('select[name]').each(function (index, node) {
if (node.value == 0) {
var id = "select#" + node.id;
$(id).addClass('errorType');
}
});
}
This will search select tag with name as attribute, if found, it will get the value of the name and check of its empty or not. If found empty it will add new class that turns that select tag into a red border.
Hope this will help

Select box option based on text box value

Below is my code which change select option based on text box value but I want to change value of select option without click on "Select Now" button. Means select option change directly from text box value, button is not needed to do same.
<select name="sel" id="MySelect">
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select><br><br>
Select By Text: <br>
<input type="text" name="selText" value="Six">
<input type="button" name="selectNow" value="Select Now">
$(function() {
$('input[name=selectNow]').on('click', function(event) {
selectByText($.trim($('input[name=selText]').val()));
}).click();
});
function selectByText(txt) {
$('#MySelect option')
.filter(function() {
return $.trim($(this).text()) == txt;
})
.attr('selected', true);
}

The logic is the same, except you need to hook to the keyup event on the selText element:
$('input[name=selText]').on('keyup', function() {
selectByText($.trim($(this).val()));
});
Example fiddle

Just change the event to be raised when the value of selText changes:
$('input[name=selText]').on('change', function(event) {
selectByText($.trim(this.value));
}).change();
See Fiddle

Creating a text and dropdown list search functionality

I've written a piece of code that allows a Sharepoint list user to select a search criteria from a drop down list. By default, next to this, I'd like a textbox to be present. Besides the text box on the page is a Search button and a Reset button. This looks like this:
Ideally, what I'd like is that if the user selects a specific option in the search criteria drop down list (say, Field 3), the text box will change to a drop down list, which they choose their option from and then search for as usual.
This is what I have so far:
<script type="text/javascript">
function RedirectUrl() {
var sField = document.getElementById("searchField").value;
if (sField == "Field3") {
var search = document.getElementById("dropdownSearch").value;
} else {
var search = document.getElementById("textSearch").value;
}
var url = "";
if (search != "") {
url = "FilterName=" + sField + "&FilterMultiValue=*" + search + "*";
window.location.href = //Url of our site
}
else {
return false;
}
}
function ClearUrl() {
//Refresh page
}
</script>
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
if (searchField == "Field3") {
Search text: <select id="dropdownSearch" />
<option selected value="One" >One</option>
<option value="Two">Two</option>
</select>
} else {
Search text: <input type="text" id="textSearch" />
}
</script>
<input type="button" id="btnSearch" value="Search" onclick="return RedirectUrl();" />
<input type="button" id="btnClear" value="Reset Filters" onclick="return ClearUrl();" />
The functionality of this code works. If the user selects "Field3" from the search field drop down list, whatever is selected in the drop down list is shown. If the user selects any other option from the search field drop down list, the text in the "search text" field is shown.
However, due to the if statement contained within, it looks like this:
Questions:
How can I get the code to automatically display either the text box or the drop down list depending on the user's selection in the Search Field?
How can I hide the if statement logic?
As can probably be guessed from the code I have almost zero experience in Javascript (and absolutely zero experience in JQuery, if any answers tend that way) - although I have tagged JQuery as from what little I do know I feel it might be better(?) suited for it.
Edit: My not-working code after ZiNNED's help:
Search Field:
<select id="searchField">
<option selected value="Field1">Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>Search Text:
<select id="dropdownSearch" style="display: none;">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<input id="textSearch" />
<input type="button" id="btnSearch" value="Search" />
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>

You should do a couple of things.
First: remove the if-statement from the code and hide the dropdownSearch select by default:
HTML
Search Field: <select id="searchField">
<option selected value="Field1" >Field 1</option>
<option value="Field2">Field 2</option>
<option value="Field3">Field 3</option>
<option value="Field4">Field 4</option>
</select>
Search text:
<select id="dropdownSearch" style="display: none;" />
// All options and their values
</select>"
<input type="text" id="textSearch" />
Second, add a reference to jQuery and the following JavaScript to your document:
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
This adds an event to the searchField dropdown that triggers when its value is changed. If the value equals Field3 the dropdownSearch is shown; otherwise the textSearch.
See this FIDDLE.
EDIT: After your edit, try changing the following:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js">
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
to:
<script type="text/javascript" src="link-to-Sharepoint/SiteAssets/jquery-1.11.1.js"></script>
<script>
$(document).ready(function () {
$(document).on("change", "#searchField", function () {
var show = $(this).val() == "Field3";
$("#dropdownSearch").toggle(show);
$("#textSearch").toggle(!show);
});
});
</script>
You shouldn't add JavaScript to script tags when you're also referring to an external file in it.

jQuery: Get value from multiple fields and show in text field

I have 6 different select boxes and a text field which I need to fetch the value from and combine in to one text field using jQuery.
I understand essentially I will build the value for the targetTextField with a string like this: $('#targetTextField').val(opt1+opt2+opt3+opt4+opt5+opt6+textField);
What do I use to fetch the value of select#options1 and transform that in to opt1?
Would it be along the lines of opt1 = $('select#options1').val(); or am I heading in completely the wrong direction?
I've created a basic jsfiddle with just two options at:
http://jsfiddle.net/e2ScF/2/
jQuery
$(function() {
$("#options").change(function(){
var opt1 = $('select#options').val()
}$('#targetTextField').val(opt1+opt2);
});
$("#options2").change(function(){
var opt2 = $('select#options2').val()
}$('#targetTextField').val(opt1+opt2);
});
});​
HTML
<select id="options">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">​
...but it doesn't appear to be working, so I've obviously misunderstood or missed something.

I made this demo for you, hope it helps
http://jsfiddle.net/e2ScF/5/
$(function() {
$("#options").change(function(){
setTarget() ; // Something has changed so lets rebuild the target
});
$("#options2").change(function(){
setTarget();// Something has changed so lets rebuild the target
});
});
// Just get the values you want and update the target
function setTarget(){
var tmp = $("#options").val();
tmp += $("#options2").val();
$('#targetTextField').val(tmp);
}
​

for dropdown try following
$('select option:selected').text()

have a look at this it should hopefully give you a pointer in what you need to do.
you can change the name to be a class and then just provide your format you want to display in the input. but from your question in presume it should be about that.

If you have different id for select box
var toalopt=$('select option1:selected').text();
toalopt+=$('select option2:selected').text();
toalopt+=$('select option3:selected').text();
toalopt+=$('select option4:selected').text();
toalopt+=$('select option5:selected').text();
toalopt+=$('select option6:selected').text();
document.getElementById('id where you want to club data').innerHTML=toalopt;
If you have same id
$(document).ready(function(){
$('#optionvalue).click(function(){
var values ='';
$('select[name="sameid"]').each(function(index,item){
values +=$(item).val() +' ';
});
$('id where you want to club data').val(values);
});
});
HTml will be normal select tag with id.

First of all, add a class to each of your select elements to better identify them as a group:
<select id="options" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt1Value1" >Option 1</option>
<option value="opt1Value2" >Option 2</option>
</select>
<select id="options2" class="auto-updater">
<option value="" selected>Choose...</option>
<option value="opt2Value1" >Option 1</option>
<option value="opt2Value2" >Option 2</option>
</select>
<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">
Then in jQuery, you can use map() to create an array of the values and display them:
$(".auto-updater").change(function() {
var values = $(".auto-updater").map(function() {
return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
// return $(this).val(); // include all values
}).get();
$("#targetTextField").val(values.join(','));
});
Example fiddle
You can see that I've set this up to ignore select elements which are left on their default value. If you uncomment the line beneath it will include all selects, regardless of value chosen.

Minimal code required for you as below:
$(function() {
$("select").change(function(){
var opts=$('option:selected').val();
var oldVal=$('#targetTextField').val();
$('#targetTextField').val(oldVal+opts);
});
});​
Find the jsfiddle demo here.

div to show select menu value with jquery

i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2

$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/

Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>

Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps

Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});

$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);