mutiple <select> elements validation makes submission of form complicated

mutiple <select> elements validation makes submission of form complicated - javascript

The sample form I created contains only 3 <select> items because I'm practicing form validation with the birthdate of the user. If even one of the 3 <select> items has no value, the form is supposed to preventDefault(); otherwise it would return true.
HTML
<form action="" method="post">
<select name="month" id="month">
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>
<select name="day" id="day">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="year" id="year">
<option value="">Year</option>
<option value="">2000</option>
<option value="">2001</option>
<option value="">2002</option>
</select>
<input type="submit" value="Submit">
</form>
In my javascript file, I had two options but both failed to execute successfully.
Option 1
function validate(e) {
var selectItems = document.querySelectorAll('select');
selectItems.forEach(function(item) {
if(!item.value) {
e.preventDefault();
} else {
return true;
}
})
}
document.querySelector('form').addEventListener('submit', validate);
Option 2
function validate(e) {
var month = document.querySelector('#month');
var day = document.querySelector('#day');
var year = document.querySelector('#year');
if(!month.value && !day.value && !year.value) {
e.preventDefault();
} else {
return true;
}
}
document.querySelector('form').addEventListener('submit', validate);
In option 1, the problem I had was, though the three items are already complete, the form still doesn't return true.
In option 2, if one of the three items already has a value while the other two have no value and you submit the form, it returns true.
How should I make this correct?

This should work:
function validate(e) {
var selectItems = Array.from(document.querySelectorAll('select'));
if (selectItems.some(item => !item.value)) {
e.preventDefault();
} else {
return true;
}
}
document.querySelector('form').addEventListener('submit', validate);
<form action="" method="post">
<select name="month" id="month">
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>
<select name="day" id="day">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="year" id="year">
<option value="">Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<input type="submit" value="Submit">
</form>

Related

submit any of the text of the selected option using html

When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>

When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>

Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!

Hide select options based on previous selections

Is it possible to hide options in a select/dropdown with jQuery based on the user's selection from a previous dropdown e.g:
If user is 8 (Age Select/Dropdown), and chooses subject English (Subject Select/Dropdown) then hide Location 2 from (Locations dropdown)?
<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>
<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>
<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>
Thank you!

you just need to add change function to your drop-down and according to your requirement you need to add your logic. see below example.
$(document).ready(function(){
$("#age").change(function(){
hideOption();
})
$("#subject").change(function(){
hideOption();
})
})
function hideOption(){
var age=$("#age").val();
var subject=$("#subject").val();
if(age==8 && subject=="Maths"){
$("#location [value='Location Two']").hide();
}
else{
$("#location [value='Location Two']").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>
<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>

You can do something like below
$(document).on('change', '.age', function(e){
var val = $(this).val();
var subject = $('.subject').find(":selected").val();
if(val == 8 && subject == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
$(document).on('change', '.subject', function(e){
var age = $('.age').find(":selected").val();
var val = $(this).val();
if(age == 8 && val == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" class="age">
<option >select</8>
<option value="8">8</8>
<option value="9">9</8>
<option value="10">10</8>
<option value="11">11</8>
</select>
<select name="subject" class="subject">
<option value="English">English</8>
<option value="Maths">Maths</8>
<option value="Science">Science</8>
</select>
<select name="location" class="location">
<option value="One">Location One</8>
<option value="Two">Location Two</8>
<option value="Three">Location Three</8>
</select>

With jQuery you can use .hide() and .show() to toggle element visibility. First however, you can check if the value of a select (for example age) was changed. Based on the logic you want to have, you can for example check what the value of the change was and do something if it matches a condition.
For example:
$( "#age-select" ).change(function() {
var value = $(this).val();
if(value == 8) {
$("#location-two").hide();
} else {
$("#location-two").show();
}
});
However, notice that I added an id for the "Location Two" option ("location-two") and for the age select element. Also, to make this work properly, you have to fix the values so that they're not all 8 and fix the closing tags of the elements (not ).

If..else statement inside javascript function not working

Straight to the point, my question is, How to put a if else statement inside the copy_Power_Plant() to detect its value is Yes,No or Unclear.
The way i do, is not working. My code is at below.
...................................................................
ignore here, i need to type many details so that stackoverflow allow me to post. this is so annoying.
<!DOCTYPE html>
<html>
<body>
<script>
function copy_Type_Mount() {
document.getElementById("label_Type_Mount").innerHTML = document.getElementById("Type_Mount").value+" AC Units "}
function copy_No_Units() {
document.getElementById("label_No_Units").innerHTML = document.getElementById("No_Units").value}
function copy_Size(){
document.getElementById("label_Size").innerHTML = document.getElementById("Size").value+ " HP "}
//below this function is the problem
function copy_Power_Plant(){
var pp=document.getElementById("Power_Plant").value;
if(pp=='Yes'){
document.getElementById("label_Power_Plant").innerHTML ='+ Power Plant'}}
</script>
<font id="label_No_Units"></font> <font id="label_Type_Mount"></font><font id="label_Size"></font><font id="label_Power_Plant"></font><br>
<p1>Type of Mount:</p1><br>
<select id="Type_Mount" name="Type_Mount" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="Wall Mount">Wall Mount</option>
<option value="Ceiling Mount">Ceiling Mount</option>
</select><br><br>
<p1>Number of Units:</p1><br>
<select id="No_Units" name="No_Units" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<br>
<p1>Size (H/P):</p1><br>
<select id="Size" name="Size" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
</select>
<br>
<br>
<p1>Power Plant Installation Required?</p1><br>
<select id="Power_Plant" name="Power_Plant" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Unclear">Unclear</option>
</select>
<br>
<br>
</body>
</html>

You don't have else statements in your code. Therefore it is working only for the if statement. Implement else if and else statements to cover all 3 instances.
function copy_Type_Mount() {
document.getElementById("label_Type_Mount").innerHTML = document.getElementById("Type_Mount").value+" AC Units "}
function copy_No_Units() {
document.getElementById("label_No_Units").innerHTML = document.getElementById("No_Units").value}
function copy_Size(){
document.getElementById("label_Size").innerHTML = document.getElementById("Size").value+ " HP "}
//below this function is the problem
function copy_Power_Plant(){
var pp=document.getElementById("Power_Plant").value;
if(pp === 'Yes'){
document.getElementById("label_Power_Plant").innerHTML ='+ Power Plant'
}
else if(pp === 'No') {
document.getElementById("label_Power_Plant").innerHTML ='+ No Plant'
}
else {
document.getElementById("label_Power_Plant").innerHTML =''
}
}
<font id="label_No_Units"></font> <font id="label_Type_Mount"></font><font id="label_Size"></font><font id="label_Power_Plant"></font><br>
<p1>Type of Mount:</p1><br>
<select id="Type_Mount" name="Type_Mount" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="Wall Mount">Wall Mount</option>
<option value="Ceiling Mount">Ceiling Mount</option>
</select><br><br>
<p1>Number of Units:</p1><br>
<select id="No_Units" name="No_Units" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<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="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br>
<br>
<p1>Size (H/P):</p1><br>
<select id="Size" name="Size" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
</select>
<br>
<br>
<p1>Power Plant Installation Required?</p1><br>
<select id="Power_Plant" name="Power_Plant" onchange="copy_No_Units();copy_Type_Mount();copy_Size();copy_Power_Plant();" required>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Unclear">Unclear</option>
</select>

Use JavaScript's elseif statement to cover all three conditions:
if (pp == "Yes") {
//Yes code
} else if (pp == "No") {
//No code
} else {
//Unclear code (if by unclear you meant undefined)
}

to add on above answer, you can wanna use a switch-case statment. like this:
function copy_Power_Plant() {
var pp = document.getElementById("Power_Plant").value;
switch (pp) {
case 'Yes':
document.getElementById("label_Power_Plant").innerHTML = '+ Power Plant';
break;
case 'No':
document.getElementById("label_Power_Plant").innerHTML = '+ No Plant';
break;
case 'Unclear':
document.getElementById("label_Power_Plant").innerHTML = '';
break;
}
}

Dropdown selection error

<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
<option value="">Month</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<input type="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>
#months option[value=""] {
display: none;
}
$('#months').change(function () {
var selectedValue = $(this).val();
if (selectedValue == "") {
$(this).addClass('input_error');
$('#birthday_error').show();
}
});
when you click on dropdown if you select an option then fine if do not select an option in dropdown then show an error message and apply input_error CSS to dropdown like google sign up dropdown

1.No jQuery library is there. so code will not work.(so add jQuery library)
2.Extra # is there in your code.
3.Use $(this) instead of months variable.
And finally i hope you want like this:- (if selectbox have some value then hide error message and remove error class form select-box otherwise add error class to selectbox and show error message too):-
$(document).ready(function(){ // add this if you are adding code at top of the page not in bottom
$('#months').addClass('input_error');
$('#birthday_error').show();
$('#months').change(function () {
var selectedValue = $(this).val();
if (selectedValue == "") {
$(this).addClass('input_error'); //remove # and months variable and use $(this)
$('#birthday_error').show();
}else{
$(this).removeClass('input_error'); //remove class
$('#birthday_error').hide();//hide error message
}
});
});
.input_error{
border-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- add jQuery library-->
<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
<option value="">Month</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<input type="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>
Note:- pay attention to the comments given in code snippet

Reset first select list when second one is reset to 0

I've got some example code, what I want is when the value in the second select list is set to 0 the first one also resets to 0, at the moment they reset each other when a value is selected in one. Any help appreciated thanks:
HTML:
<select name="Standard" id="std" size="6" onClick="selectCheck(this,'del'); return true;">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option>
</select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
JS:
function selectCheck(me,other) {
var ind = me.selectedIndex;
if (ind > 0) {
document.getElementById(other).selectedIndex = 0;
}
}

Look for the specific ID
if (ind > 0 && other !='del') {
document.getElementById(other).selectedIndex = 0;
}
DEMO

<select name="Standard" id="std" size="6">
<option value="0">Select one</option>
<option value="Eggs" selected>Eggs</option>
<option value="Bacon">Bacon</option>
<option value="Toast">Toast</option>
<option value="Ham">Ham</option>
<option value="Home">Home Fries</option>
<option value="Jelly">Jelly</option> </select>
<select name="Deluxe" id="del" size="6" onClick="selectCheck(this,'std'); return true;">
<option value="0">Select one</option>
<option value="Omelet">Omelet</option>
<option value="Canadian">Canadian Bacon</option>
<option value="Muffin">Muffin</option>
<option value="Steak">Steak</option>
<option value="Cottage">Cottage Fries</option>
<option value="Preserves">Preserves</option>
</select>
<script>
function selectCheck(me,other) { var ind = me.selectedIndex; if (ind<1) { document.getElementById(other).selectedIndex = 0; } }
</script>

Develop Reference

JavaScript is the programming language of the Web.

mutiple <select> elements validation makes submission of form complicated - javascript

Related

submit any of the text of the selected option using html

Hide select options based on previous selections

If..else statement inside javascript function not working

Dropdown selection error

Reset first select list when second one is reset to 0

Categories

Resources