I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option from the menu should enable the text field.
I did some research and found many similar problems, however none of the solutions seem to be working. I tried a very simple code on jsfiddle to see if it's the solution itself that's the problem, or my code in particular.. My original code did not work, and neither did the simplified version. Here is the simplified code sample:
HTML:
<select id="menu" onChange="checkOption()">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="D">Option D</option>
</select>
<input type="text" id="input" disabled>
JavaScript:
function checkOption() {
if(document.getElementById("menu").value != "A") {
document.getElementById("input").disable = 'false';
}
else {
document.getElementById("input").disable = 'true';
}
}
The text box remains disabled no matter what I click. I tried removing the default disable, and still no luck. I also tried various other solutions, however this was the most straightforward which is why I don't understand why it's not working.
It's probably something really obvious that I'm not seeing... I'm very very new at this, so if anyone would care to shed some light on my problem, I would be very grateful.
It's disabled not disable
document.getElementById("input").disabled = true;
You can also clean the code up by passing this into your handler and referencing that (also no need for the if, else - just disable based on a condition directly:
<select id="menu" onChange="checkOption(this)">
function checkOption(obj) {
var input = document.getElementById("input");
input.disabled = obj.value == "A";
}
Aaaaand a fiddle: http://jsfiddle.net/23EpC/
Related
I have the following:
<select size="1" id="this_emp_id" onchange="showProcessing();form.submit()">
<option value="">Choose</option>
<option value="ahr5r759797">Ahrbecker, Lisa M</option>
<option value="baryxr77ata">Barrera Garrido, Antonio</option>
<option value="baug97ee9tx">Baurley, Janet L</option>
<option value="bel7bhh3m93">Belschner, Chad Matthew</option>
<option value="bie55ed9393">Bielefeld, Emily Margaret</option>
… with many more learners
Using a separate find learner routine I get the value of a learner and use the following to change the value of the above select box:
empSelect = document.getElementById("this_emp_id");
empSelect.options[0].value = retVal;
empSelect.options[0].selected = true;
formObj.submit();
This works perfect except in IE even in Edge it does not work, is there an alternative for IE?
You should set the selectedIndex of the select element, rather than setting the selected property of the option.
empSelect.selectedIndex = 0;
Thanks to all, I found the problem, it was a form within a form, the page is a server side page and id 900+ lines long. Sorry for the inconvenience.
I am trying to create a select dropdown list with multiple options, and after clicking on the option, the selected value should be displayed with expected styling and then the dropdown list will disappear. If clicking on the "X" button of the result box, the result box should disappear and the dropdown list should show again.
I have tried to write my script as following:
JSFiddle
While I am trying to use
if ($(promo).length > 0)
to prove the existence of the selected option, I still got O from console and I am now getting stuck at this point which I can't get the desired result.
Does anyone can share some opinion on it and tell me what to do? Thank you so much for your time to read this question. Regards.
Here is a working fiddle. There are several things to note:
You should use the change event rather than click, so keyboard navigation will appropriately trigger the events as well.
There were several reference errors
There were several typos, wrong selectors in your fiddle. For example, you wrote $("selected-promo") without a period (.), resulting in a by element type selection. $(".selectPromo").css({"display":"none"}); refers to the select element, whose class is actually select-promo, etc. Pay attention to how you name things, and be consistent with names, because this is the perfect recipe for such hard to find, yet trivial bugs. For example, you are mixing camelCase and kebab-case. Pick one and stick to it, and watch out for selector operators, such as . and #.
Your fiddle didn't contain the jQuery reference and its script execution needed to be set to onDomReady.
you're actually not even able to trigger anything when changing your selection in your dropdown. Change it to $("#selectPromo").on("change",function(){ //your code }
I used vanilla JavaScript to write what I think should accomplish what you're trying to do. I didn't see anything regarding styling in your code. I added a few id attributes in your HTML:
function init() {
var selectElement = document.getElementById('selectPromo');
document.getElementById('btnDelete').style.display = 'none';
selectElement.addEventListener('change', function() {
document.getElementById('selectedPromo').innerHTML = selectElement.options[this.value].text;
document.getElementById('inputField').style.display = 'none';
document.getElementById('add-layout').style.display = 'inline';
document.getElementById('btnDelete').style.display = 'inline';
});
document.getElementById('btnDelete').addEventListener('click', function() {
selectElement.value = '';
document.getElementById('inputField').style.display = 'inline';
document.getElementById('add-layout').style.display = 'none';
document.getElementById('selectedPromo').innerHTML = '';
});
}
init();
<div class="coupon-group">
<div class="left">
<div class="input-field" id="inputField">
<div class="title">Select promotion</div>
<div class="select-group">
<select class="select-promo" id="selectPromo">
<option value="">Please choose:</option>
<option value="1" data-name="OfferA">Offer A</option>
<option value="2" data-name="OfferB">Offer B</option>
<option value="3" data-name="OfferC">Offer C</option>
<option value="4" data-name="OfferD">Offer D</option>
</select>
</div>
</div>
</div>
<div class="right"></div>
</div>
<div class="selected-promo" id="selectedPromo"></div>
<div class="hidden-content" id="add-layout">
<div>
<span class="btn-delete" id="btnDelete">X</span>
<span class="name"></span>
<input type="hidden" name="coupon_type[]" value="">
<input type="hidden" name="coupon_value[]" value="">
</div>
</div>
I have a set of input boxes and you can add more and more sets of these forms if you click the add more button. In my form I can submit data and I have got it to show up when you reload the page. However, I am stuck at making sure all of the fields have values before I run my AJAX. I use Jquery for this project
I cannot use a validation plugin because I am running magento and every time I try running the plugins in "No Conflict Mode" the plugins do not seem to work. Because I am running Magento this means I need to run Jquery in no conflict mode.
I have seen other solutions for this however they are all to do with input boxes and I have 1 input boxes and 2 select boxes. How can I make sure that all the input boxes are filled before and that all the select boxes that are not disabled have something selected before the ajax call?
Here is part of my HTML:
<form>
<input id="12">
<select id="1">
<option disabled="disabled" selected="selected">select please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<select id="2">
<option disabled="disabled" selected="selected">Select Please</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
Using a click event, if you use .val() on your <select/>, it will return null if there is no value attribute on your <option/>.
Note: This will not work if you put a value attribute on your options.
Edit: Doing a !== compare will be faster.
$("#submit-button").click(function(){
//if this is true, then it is valid
alert($("#1").val() !== null);
});
You can do it by getting the inputs value into a property.
This script would alert the number of how many inputs aren't complete or missing with base in your structure.
(no jQuery)
var myForm=document.getElementsByTagName("form")[0];
var formSelectors=myForm.getElementsByTagName("select"),
formTextBoxes=myForm.getElementsByTagName("input"),
missing=0;
var i,
length=formSelectors.length;
for(i=0;length>i;i++){
if(formSelectors[i].value===formSelectors[i].children[0].value)
//Check if select value is equal to
//select please or Select please
//MISSING! (select)
missing++
}
length=formTextBoxes.length;
for(i=0;length>i;i++){
if(formTextBoxes[i].value.length===0)
//MISSING! (input)
missing++
}
alert(missing)
Try this:
if($('#12').val()!='') {
// your code
}
So I am finding issues doing this, I am curious if its because I am using HTML form arrays.
Anywho so heres my problem, I want to change a dropdown box and have it change the text in a textbox to that value! Sound's simple enough right?
Well here's my failed attempt:
<select id=discount[0] name=discount[0]>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
<input type=text id=postdiscount[0]>
And my JS:
$("#discount[0]").change(function () {
$("#postdiscount[0]").val(this.value);
});
JSFiddle if you guys wanna play about:
http://jsfiddle.net/t75ut97f/3/
EDIT:
Has nothing to do with form items being in an array :X!
You need to escape the brackets, then just use this.value
$("#discount\\[0\\]").change(function () {
$("#postdiscount\\[0\\]").val(this.value);
});
http://jsfiddle.net/t75ut97f/2/
I made a function populating one select box using values from another select box when clicked and it works pretty well for the most of my selectboxes in the system but I am struggling with this one now lol:
function for testing the selected value and alerting if found:
function updateSelectBox(parent, child){
for(i = 0; i < document.getElementById(parent).length; i++){
if(document.getElementById(parent).options[i].selected){
alert(document.getElementById(parent).options[i].value);
}
}
this one when selected doesnt alert:
<input type="hidden" name="data[Series][3][Profession][Profession]" value="" id="Professions3_">
<select name="data[Series][3][Profession][Profession][]" multiple="multiple" id="Professions3" onchange="updateSelectBox("Professions3", "Specialisms3");">
<option value="24">Scientist</option>
and this is alerting when selected:
<input type="hidden" name="data[Series][4][Profession][Profession]" value="" id="Professions4_">
<select name="data[Series][4][Profession][Profession][]" multiple="multiple" id="Professions4" onchange="updateSelectBox("Professions4", "Specialisms4");">
<option value="24">Scientist</option>
this is the full html output from different selectbox that is also WORKING
<div class="input select"><label for="Zones">Zones</label><input type="hidden" name="data[Series][0][Zone][Zone]" value="" id="Zones_">
<select name="data[Series][0][Zone][Zone][]" multiple="multiple" id="Zones" onchange="updateSelectBox("Zones", "Countries");">
<option value="4">Europe</option>
</select>
</div>
This doesn't work. Even if it works on your page, the code in your post cannot work: your JavaScript is missing closing brackets, you're using HTLM with double quotes inside of double quotes, no one will be able to run this. So let's step back and rewrite this to something that'll definitely work:
HTML
<select onchange="updateSelectBox(this);">
<option value="0">Scientist 1</option>
<option value="12">Scientist 2</option>
<option value="24">Scientist 3</option>
</select>
JS
function updateSelectBox(selectBox) {
var sid = selectBox.selectedIndex;
var selectedOption = selectBox.children[sid];
console.log(selectedOption);
}
Now we at least have something we know works, using the minimal amount of code, that we can build back out. I'd recommend using this to build up the HTML and function you have right now. You definitely need to stop using so many strings and lookups, for instance. Especially trusting strings to not have typos is going to ruin your day (your have an input called 'Professions3_' and a select called 'Professions3'... this is just asking for trouble)