Develop Reference

add value to input field automatically

How to add values automatically without add button? Just select value from dropdown and do it again and again to add them to the same input like on image.
html
<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>
<div id="add">Add</div>
<input type="text" name="programs_input" id="programs_input" />
jquery
$(document).ready(function(){
$('#add').click(function() {
var program = $("#programs_dropdown").val(); //get value of selected option
var programs = $('#programs_input').val().split(",");
if (programs[0] == "") {
programs.pop()
}
if ($.inArray(program, programs) == -1) {
programs.push(program);
}
$('#programs_input').val(programs.join(',')); //add to text input
});
});

You could make use of the .change() function in jQuery to fire your function whenever changes are made to your <select> element. You could then fetch the .val() from that and store it into a variable. You can then append() an input field with the value that you just stored to a container. Note that you will also need to use concatenation, as you will be exiting your string parameter for the append function to concatenate your drop down value. Concatenation in JavaScript is done by the use of +.
Example of concatenation in use that you will need:
$("#inputContainer").append("<input type='text' value='"+selectValue+"' /><br />");
Full example code to your question:
$( "#programs_dropdown" ).change(function() {
var selectValue = $(this).val();
if(selectValue != "default"){
$("#inputContainer").append("<input type='text' value='"+selectValue+"' /><br />");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="programs_dropdown" id="programs_dropdown">
<option value="default" selected="selected">select value</option>
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html">HTML</option>
</select>
<br />
<br />
<div id="inputContainer"></div>

I think This is the answer which you are looking for!
HTML
<select class="my-select-class">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
</select>
<br />
<br />
<input type="text" class="my-input-class">
JQuery
var allSelected = [];
$(document).ready(function(){
$(".my-select-class").on("change", function(){
let val = $(this).val();
let index = allSelected.indexOf(val);
if (index > -1) allSelected.splice(index, 1);
else allSelected.push(val);
$(".my-input-class").val(allSelected.join());
});
});
You can play around with JQuery change event and get the result which you wanted.

Required attribute not working for select tag by onclick button

I am trying to alert a value when a user clicks the submit button. I gave the "required" attribute to both select tag but it is not working.
I want to alert a value when a user submits a button. Can anyone tell where i went wrong?
Code:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
var ORSZ = OR + SZ;
alert(ORSZ);
}
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox" required>
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">

Here you go with a solution https://jsfiddle.net/1mydje82/1/
$('select').on('change', function(){
var required = false;
$('select').each(function(){
if($(this).val() === '')
required = true;
});
$('input[value="Submit"]').attr('disabled', required);
});
$('input[value="Submit"]').click(function(){
var OR = $("#request").val();
var SZ = $("#sites").val();
var ORSZ = OR + SZ;
alert(ORSZ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="request" class="dropdownbox" required>
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" value="Submit">
</form>
I've used jQuery. Initially your Submit button will be disabled.
Once you select both the drodown with values then only Submit button will be enabled.
Hope this will help you.

You can't rely on required attribute of <select>(because it's only work when form submits normally, and not supported in Opera anyhow).
You can make it happening like below:-
Example:-
function openWindow() {
var OR = document.getElementById("request").value;
var SZ = document.getElementById("sites").value;
if(OR =='' || SZ ==''){
alert('Please select values from both select-box'); return false;
}else{
var ORSZ = OR + SZ;
alert(ORSZ);
}
}
<form>
<select id="request" class="dropdownbox">
<option value="">Select</option>
<option value="ip">approve</option>
<option value="url">reject</option>
</select>
<select id="sites" class="dropdownbox">
<option value="">Select</option>
<option value="cp">Account</option>
<option value="sm">Demat</option>
</select>
<input type="button" onclick="openWindow()" value="Submit">
</form>

jQuery: Picking values from Select before/after current Drop-Down

I hope I can explain this well. Note the attached image below. Each has a classname of "classtime" and contains a list of available schedules for a class.
As you can see in the "instructions" in the image, I need to validate that a user doesn't select classes on back-to-back days. I'm not sure how to do this in jQuery; I'm fairly sure it can be done, and probably easily, but I don't know how.
So the plan is to act on the change() event of a given drop-down, and then look at the value of the select before and the select after, and if the value is not 0, complain to the user and reset the value of the current drop-down to 0.
Thanks!

This is one way with disables.
$('select').change(function(){
var hasVal = $(this).val() != 0;
var index = $('select').index(this);
var total = $('select').length;
//before select
if((index-1) >= 0){
var disableBefore = hasVal;
// check incase 2 before has a value
if(!disableBefore && ((index-2) > 0)){
disableBefore = $('select:eq(' + (index-2) + ')').val() != 0;
}
$('select:eq(' + (index-1) + ')').prop('disabled', disableBefore);
}
//after select
if((index+1) < total){
var disableAfter = hasVal;
// check incase 2 after has a value
if(!disableAfter && ((index+2) < total)){
disableAfter = $('select:eq(' + (index+2) + ')').val() != 0;
}
$('select:eq(' + (index+1) + ')').prop('disabled', disableAfter);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select>
<option value="0">a</option>
<option value="1">aa</option>
</select>
</div>
<div>
<select>
<option value="0">b</option>
<option value="1">bb</option>
</select>
</div>
<div>
<select>
<option value="0">c</option>
<option value="1">cc</option>
</select>
</div>
<div>
<select>
<option value="0">d</option>
<option value="1">dd</option>
</select>
</div>
<div>
<select>
<option value="0">e</option>
<option value="1">ee</option>
</select>
</div>
<div>
<select>
<option value="0">f</option>
<option value="1">ff</option>
</select>
</div>
<div>
<select>
<option value="0">g</option>
<option value="1">gg</option>
</select>
</div>

Using jQuery to change a dropdown menu when a checkbox is checked

i'm a bit confused about how to go about this problem. Currently when a user changes the "quantity" from the dropdown, it checks the checkmark, but when its moved to zero the checkmark is unchecked.
var val = 0
$('.drop').on('change',function() {
var val = $(this).val();
if(val > 0) {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', true);
}
else {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', false);
}
});
part of the form:
<input class='check' id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='col-lg-8'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="4" />
test
<br>
<div class='subheader'>$22.00</div>
</div>
<div class='col-lg-2'>
<select class="drop" data-cost-per-unit="2200" id="test" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</div>
</div>
</div>
I want to make it so if the checkmark is not checked and you check it, it changes the quantity to 1 and if you uncheck it, it goes to zero. But since I have this other jquery here, if i use $('.checkbox').on('change',fucntion(){} it will change every time the dropdown is moved. Whats a better solution to this problem?

The following code seems to work, from my tests on your fiddle. Both the checkbox and the select affect each other. This code assumes, as your code hints, that all checkboxes will have an id of the form switchName#, where # is a number.
Don't forget to change the 10 (switchName length) on your actual code to match your ids.
var $drops = $('.drop');
$('.check').on('change', function() {
var val = $(this).prop('checked'),
product = this.id.slice(10);
$drops.filter(function (i, e) {
return $(this).attr('prodindex') == product;
}).val(val ? '1' : '0');
});
$drops.on('change',function() {
var val = +(this.value),
product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', val > 0);
});

Drop down text input option

I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value.
I specifically want that user can enter value only when they select "Enter a value " option.
Here is what I have tried so far.
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
}
});
JS fiddle
however it wont work properly if i click the enter value option again.

I think there are many plugins that do what you want but if you want to create your own, it's a basic and simple solution.
You can create a select and a textbox with display:none like this:
<select id="ddlDropDownList">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />
<style>
#txtTextBox{
display:none;
}
</style>
then try this JQuery:
$("#ddlDropDownList").change(function(){
if($(this).val() == '-1'){
$("#txtTextBox").fadeIn();
}else{
$("#txtTextBox").fadeOut();
}
});
Check JSFiddle Demo

I have forked your JSFiddle to http://jsfiddle.net/pwdst/4ymtmf7b/1/ which I hope does what you wanted to achieve.
HTML-
<div class="ginput_container">
<label for="input_1_4">Select option</label>
<select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<div>
<label class="hidden-label" for="input_1_4_other">Other value</label>
<input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
</div>
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var $this = jQuery(this);
var val = $this.val();
var holder = $this.parent().find('.holder');
if (val === "*"){
holder.val('');
holder.removeAttr('disabled');
holder.focus();
} else {
holder.val(this.options[this.selectedIndex].text);
holder.attr('disabled', 'disabled');
}
});
When the "Enter value" option is chosen then the input box is enabled, value set to an empty string, and it is focused. If another option is chosen then the text input is disabled again, and the text value from the select list is used.

Thanks guys
I guess i have found my answer
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});
JS FIDDLE