I am having trouble getting this validation to work. I am validating that a selectbox has been chosen and not left on the default option within my form.
Form:
<label for="reason">How can we help?</label>
<select name="reas">
<option value="Please Select">Please Select</option>
<option value="Web Design">Web Design</option>
<option value="branding">Branding</option>
<option value="rwd">Responsive Web Design</option><span id="dropdown_error"></span>
</select>
Onclick event:
$(document).ready(function(){
$('#contactForm').submit(function(){
return checkSelect();
});
});
Function:
function checkSelect() {
var chosen = "";
var len = document.conform.reas.length;
var i;
for (i = 0; i < len; i++){
if (document.conform.reas[i].selected){
chosen = document.conform.reas[i].value;
}
}
if (chosen == "Please Select") {
document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
return false;
}
else{
document.getElementById("dropdown_error").innerHTML = "";
return true;
}
}
I also get this error in the console:
Uncaught TypeError: Cannot set property 'innerHTML' of null
I am really new to javascript, so, I am learning and trying some simple examples at the moment, but I cannot see what is causing this not to validate.
Any help appreciated
First, you can't have your error span inside the <select>. Move it outside of the <select> HTML, and that will make the JS error go away.
<label for="reason">How can we help?</label>
<select name="reas">
<option value="select">Please Select</option>
<option vlaue="Web Design">Web Design</option>
<option vlaue="branding">Branding</option>
<option vlaue="rwd">Responsive Web Design</option>
</select>
<span id="dropdown_error"></span>
Then, since you are already using jQuery, you could shorten your whole validation function to just this:
function checkSelect() {
var chosen = $('select[name="reas"]').val();
if (chosen == "select") {
$("dropdown_error").text("No Option Chosen");
return false;
} else {
$("dropdown_error").text("");
return true;
}
}
Change your default selection to an optgroup:
<optgroup>Please Select</optgroup>
Then it won't be selectable
https://developer.mozilla.org/en-US/docs/HTML/Element/optgroup
Your default value is "select" and you are checking "Please Select". Use the same value.
Change this
<option value="select">Please Select</option>
to
<option value="Please Select">Please Select</option>
EDIT: I would use the following code. To fix javascript issue, make sure you put the script just before closing body tag. Your script is executing before the document is parsed
<label for="reason">How can we help?</label>
<select id="reas" name="reas">
<option value="">Please Select</option>
<option vlaue="Web Design">Web Design</option>
<option vlaue="branding">Branding</option>
<option vlaue="rwd">Responsive Web Design</option><span id="dropdown_error"> </span> </option>
function checkSelect() {
var chosen = document.getElementById["reas"].value;
if (chosen == "") {
document.getElementById("dropdown_error").innerHTML = "No Option Chosen";
return false;
}
else{
document.getElementById("dropdown_error").innerHTML = "";
return true;
}
}
Related
I am using a jquery code found on Stakeoverflow to remove duplication value in the dropdown. my problem is the jquery code worked for the first dropdown but will not work for the second dropdown any help will be welcome
1st dropdown
<select id="AssetStoredWhere" name="AssetStoredWhere" class="form-control js-example-disabled-results
select">
<option value="#ViewBag.AssetStoredWhere">#ViewBag.AssetStoredWhere</option>
<option value="UK">UK</option>
<option value="EU">EU</option>
<option value="Worldwide">Worldwide</option>
</select>
2bd Dropdown
<select asp-for="Dpiaavailable" id="Dpiaavailable" name="Dpiaavailable" class="form-control js-
example-disabled-results select">
<option value="#ViewBag.Dpiaavailable">#ViewBag.DpiaavailableValue</option>
<option value="False">No</option>
<option value="True">Yes</option>
</select>
Jquery code
var seen = {};
jQuery('.select').children().each(function () {
var txt = jQuery(this).attr('value');
if (seen[txt]) {
jQuery(this).remove();
} else {
seen[txt] = true;
}
});
You need another loop to iterate through the select elements themselves, not through the option elements of every select as one. Try this:
$('.select').each(function() {
var seen = {};
$(this).children().each(function() {
var $option = $(this);
if (seen[$option.val()]) {
$option.remove();
} else {
seen[$option.val()] = true;
}
});
});
I require a bit of jQuery to do the following:
A user can currently select Program and/or a region.
If a user selects Program AND a Region I require the option values of the region dropdown to change to "?region=1" and "?region=2"
<select class="program" id="program">
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Greatly appreciate the assist.
My attempt at JQuery:
$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })
You need to further extend the change event for #program and include a similar one for #region.
var programSelected = null;
var regionSelected = null;
$('#program').on('change', function(element) {
programSelected = $('#program option:selected').text();
updateRegionOptions();
});
$('#region').on('change', function(element) {
regionSelected = $('#region option:selected').text();
updateRegionOptions();
});
function updateRegionOptions() {
if(programSelected != null && regionSelected != null) {
$('#region option').each(function() {
var modifiedString = '?';
modifiedString += $(this).val().replace(/\d+/,'');
modifiedString = modifiedString.replace('.html','');
modifiedString += '=';
modifiedString += $(this).val().match(/\d+/);
$(this).val(modifiedString);
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="program" id="program">
<option value="" selected disabled>Select Program</option>
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="" selected disabled>Select Region</option>
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Explanation of the logic above:
on('change' event for both #region and #program
Set the relevant variable programSelected or regionSelected depending on the change event
Run function updateRegionOptions();
If the variables programSelected and regionSelected both have a value
For each of the options in #region
Mutate the existing value to be of the form "?region=1" and "?region=2"
Update the value section of each of the option elements to have this value
The relevant JSFiddle for review.
If this solved your issue, please accept this answer :)
How do you select a value from a dropdown list, by using the text, instead of the value or the index?
The HTML:
<select name="category_group" id="category_group" sel_id="" >
<option value="0" selected="selected">Kies de rubriek</option>
<option value='1000' style='background-color:#dcdcc3;font-weight:bold;' disabled="disabled" id='cat1000' >
-- VOERTUIGEN --
</option>
<option value='1020' id='cat1020' >
Auto's
</option>
<option value='1080' id='cat1080' >
Auto's: Onderdelen
</option>
<option value='1040' id='cat1040' >
Motoren
</option>
<option value='1140' id='cat1140' >
Motoren: Onderdelen
</option>
</select>
the script:
this.fillSelectors('form[name="formular"]', {
'select[name="category_group"]': 'Motoren'
}, false);
This does not work, but it works using the value of "Motoren" (which is 1140).
How can I make it work, using fillSelectors, with the text?
CasperJS' fill functions only work by using the value. In your case this doesn't work because you're trying to set the shown value not the assigned option value. Though, this can be easily extended:
casper.selectOptionByText = function(selector, textToMatch){
this.evaluate(function(selector, textToMatch){
var select = document.querySelector(selector),
found = false;
Array.prototype.forEach.call(select.children, function(opt, i){
if (!found && opt.innerHTML.indexOf(textToMatch) !== -1) {
select.selectedIndex = i;
found = true;
}
});
}, selector, textToMatch);
};
casper.start(url, function() {
this.selectOptionByText('form[name="formular"] select[name="category_group"]', "Motoren");
}).run();
See this code for a fully working example on the SO contact page.
I am trying to write a JavaScript function where if value 1 from the first dropdown(pcount) automatically selects value 1 for drop down 2(listedname), But then if anything besides value 1 (2,3,4) is chosen I do not want drop down 2 to do anything except default back to please select if value 1 was selected and then changed to another value. I am very new to JavaScript and programming in general and have not been able to find any examples similar to this. So any help will help!
JavaScript Funtion:
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value = 1){
document.getElementById("listedname").value = 1;
}else
document.getElementById("listedname").value = 2;
}
}
</script>
Dropdown 1 and 2:
<select id="pcount" onchange="leaveChange()">
<option value="" selected="selected">Please Select</option>
<option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
</select>
<select id="listedname">
<option value="" selected="selected">Please Select</option>
<option value="1">Business Name</option>
<option value="2">Individual Owner</option>
</select>
If you are doing your if clause with one equals sign, Javascript will check if your element is set to the new value successfully.
Instead, when you do a comparison, use double equal signs (in your case)
if (document.getElementById("pcount").value == 1){
If anyone is looking for the JavaScript function here you go!
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value == 1){
document.getElementById("listedname").value = 1;
}
else if (document.getElementById("pcount").value != 1){
document.getElementById("listedname").value = "";
}
}
</script>
I have a select with loads of options. (Code below shortened for sake of example).
I want it to set the value of the input textfield "hoh" to "10" when you click/select all dropdown options, except one, that should set it to 50.
I imagined something like this would work, but its not. What am I doing wrong here?
<select>
<option onselect="document.getElementById('hoh').value = '50'">Hey</option>
<option onselect="document.getElementById('hoh').value = '10'">Ho</option>
<option onselect="document.getElementById('hoh').value = '10'">Lo</option>
....
</select>
<input type="text" id="hoh" value="10">
Something like this should work:
<script>
function myFunc(val) {
if (val == '50') {
document.getElementById('hoh').value = val;
} else {
document.getElementById('hoh').value = '10';
}
}
</script>
<select onchange="myFunc(this.value)">
<option value="1">one</option>
<option value="2">two</option>
<option value="50">fifty</option>
</select>
http://jsfiddle.net/isherwood/LH57d/3
The onselect event refers to selecting (or highlighting) text. To trigger an action when a dropbox selection changes, use the onchange event trigger for the <select> element.
E.g. Since you didn't already set the value attribute of your option tags.
<select id="myselect" onchange="myFunction()">
<option value="50">Hey</option>
<option value="10">Ho</option>
<option value="10">Lo</option>
....
</select>
and somewhere inside of a <script> tag (presumably in your HTML header) you define your javascript function.
<script type="text/javascript>
function myFunction() {
var dropbox = document.getElementById('myselect');
document.getElementById('hoh').value = dropbox[dropbox.selectedIndex].value;
}
</script>
I'm not sure it's wise to repeat the same value among different options in a droplist, but you could expand on this to implement the result other ways, such as if the sole option which will have value 50 is in a certain position, you could compare the selectedIndex to that position.
you could add an onchange event trigger to the select, and use the value of an option to show in the textbox
see http://jsfiddle.net/Icepickle/5g5pg/ here
<select onchange="setValue(this, 'hoh')">
<option>-- select --</option>
<option value="10">Test</option>
<option value="50">Test 2</option>
</select>
<input type="text" id="hoh" />
with function setValue as
function setValue(source, target) {
var tg = document.getElementById(target);
if (!tg) {
alert('No target element found');
return;
}
if (source.selectedIndex <= 0) {
tg.value = '';
return;
}
var opt = source.options[source.selectedIndex];
tg.value = opt.value;
}
Try this code
var inp = document.getElementById('hoh');
sel.onchange = function(){
var v = this.value;
if( v !== '50'){
v = '10';
}
inp.value = v;
};