I am trying to add a dropdown to a form with pre-set options. When the user selects an option I would like this to complete 2 separate text boxes according to the dropdown option.
Basic outline:
if dropdown value = 1 fill text box 1 with 00:00 and text box 2 with 01:00
if dropdown value = 2 fill tex box 1 with 01:00 and text box 2 with 02:00
Hopefully this is clear enough? I know how to set a single text box with the value set for the dropdown option but this isn't right for what is needed.
Using jQuery, add a change listener to your select box and update the inputs inside based on your selected value:
$(function(){
$("#select1").on("change",function(){
var curVal = $(this).val();
if(curVal == "1"){
$("#input1").val("00:00");
$("#input2").val("01:00");
}else if(curVal=="2"){
$("#input1").val("01:00");
$("#input2").val("02:00");
}
});
});
Here is an example http://jsfiddle.net/iaretyler/zfruguj7/
Something like this:
DEMO
$("#selectOpt").on('change',function(){
var value=parseInt($(this).find('option:selected').val());
$("#txt1").val("0"+(value-1)+":00");
$("#txt2").val("0"+(value)+":00");
});
Related
I have an ordinary select list (single not multiple). The list is headed by a title such as "Events" :
<option selected = "selected" value = " " class = "hselect" > Events </option>
Under the title are the actual choices. The user has a form to fill in, and the Events select box will appear in the form. Once the user has chosen his event, such as "register", the choice appears in an input box next to the dropdown. I use a Javascript program to do that.
The selection also remains in the select box itself, so that the form shows
|register| |register| -- the first in the select box, the second in the input box. What I need, instead, is for the select box to return itself to the heading, so that the form shows |Events| |register|.
Using the same Javascript program I can pick up the "Events" option, but I don't know how to get the select box to go back to its original configuration with Events showing at the top, and the choices underneath.
Is there a way to do this in Javascript?
To select the first option from a <select> use the "selectedIndex" property:
var target = document.getElementById('target');
target.onchange=function(){
alert('select changed!');
target.selectedIndex = 0;
};
fiddle: https://jsfiddle.net/adriel_santos/n90s0mzm/
I have 2 scripts that I need to combine, I basically have a script that allows a text input to be filled when you select an item in a select list. I also have a script that fills a select list based on input of a text input. Now I am trying to figure out how can I combine these 2 scripts so they can work together.
Heres an example of a multi select filling a text input.
http://jsfiddle.net/akhyp/1963/
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('hidden_input');
var selectedArray = new Array();
var selObj = document.getElementById('selected_items');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++) {
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
Heres an example of a text input filling a multi select based on input.
http://jsfiddle.net/akhyp/1964/
$("#txt").change(function(e){
var ar = $(this).val().split(",");
$("#sel option").each(function(){
if(ar.indexOf($(this).val()) != -1)
$(this).attr("selected","selected");
});
});
What I am trying to accomplish is something like this:
If text input is null then fill text input with selected option from the select list.
If the text input is already filled then fill in the multi select based on input from the text input.
Any help would be appreciated.
Final update:
Finally got the results I wanted, here the final product http://jsfiddle.net/akhyp/1966/ been working on this for weeks possibly months lol. Really happy to have this working.
I added another change script function, seems to have made it work. Your change set the selected, and mine transfers the values.
$('#sel').change(function(){
$('#txt').val($('#sel').val());
});
http://jsfiddle.net/snlacks/akhyp/1965/
I have product called initials like below in my test site
http://dev.mommyjewelry.com/initials/sideways-initial-necklace.html
Now if you go that page and select how many gold initials you will more select box appear below based on the selection. So If I select 2 initials I am display below 2 select boxes below where we have to select the letters of the initials
Now I am looking to make these 2 select boxes for instance in this example required. so If we click add to shopping cart button, display a pop up saying that these 2 select boxes are required. and prevent going to the shopping cart.
So again if I select how many gold initials as 3 then the 3 displayed select boxes are the ones I am looking to make in required.
I know when I have a textbox instead of select box I can use the below code
$("#product_form").submit(function(evt) {
var target = $("#yellow-gold").val(); var target1 = $("#white-gold").val();
if(target == "initial-0" && target1=="initial-0"){
alert("You must select either White Gold or Yellow Gold Necklace.");
evt.preventDefault();
}else{
var number_of_charms = $("#yellow-gold").attr("selectedIndex") + 0;
var number_of_gold = $("#white-gold").attr("selectedIndex") + 0;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}else if(number_of_gold > fields_not_empty) {
$(".error").show();
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
evt.preventDefault();
}
}
});
as you can see above from my above code that I am able to display the message when it a text box by using this line
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
but how to use the same in case of a selectbox?
Try this :
$("div[id^='sideways-yellow']:visible select[name^=Product_Attribute] option:selected[value='select-letter']").length
This should get you the number of not selected options for the gold initial(Where the option value is select-letter)
If you need to get the white one, you can just change sideways-yellow to sideways-white
Sorry about the previous answer, I didn't realize I wasn't getting only the visible ones.
I am using this code here, it pulls out the selected option value from a drop-down box named "attribute[466]" then puts that value into an input field with the id of text_qty_
jQuery(function($){
var $idval = $('#text_qty_');
$('select[name="attribute[466]"]').change(function(){
$idval.val($(this).val())
}).triggerHandler('change')
});
What I can't figure out is how to get the text from the option selected rather than the value.
As an added challenge the select element that contains the drop-down box has a randomly generated ID attribute.
Find the selected option and read the text
var txt = $(this).find('option:selected').text();
JSFiddle
I'm getting to grips with Javascript and need to do the following:
Have four checkboxes with the text "Red, Blue, Yellow, Green". When the user clicks the button, one of the colours will display randomly as text.
Any suggestions how to do this with Javascript?
I believe this is what you are trying to do:
http://jsfiddle.net/DerekL/QgGwS/
*I am using jQuery here just for explanatory purposes. Convert it to pure JavaScript if you want to.
$("button").click(function(){
$colors = $("input:checked"); //Get all the checkboxes that are checked
if( $colors.length != 0){ //At least 1 checkbox has to be checked
var index = Math.floor(Math.random()*$colors.length); //generate ran. num
$("span").html($colors[index].value); //show the value
}else{
alert("Choose a color!"); //Tell the user to check at least 1 box
}
});
One of the randomly chosen color from the list of the checked boxes will show up as you click on the button.