I have created a html css javascript, a tree when you select an option, another options will be visible (according the first option selected) in this example there is only 2 options.
the problem is that at the end, there is a button that should add a new form (row) with same options, to start all over, when i click that button it add new row but the script doesn't work, I have no idea how to fix it!
Here is a JSFiddle
$("#addMore").click(function() {
$(".row-fluid:last").clone().appendTo(".wrapper");
});
$("#produse").change(function() {
var $this = $(this),
value = $this.val(); // save value
$('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
$("#ModeleCanapele").show();
break;
case 'Coltare':
$("#ModeleColtare").show();
break;
case 'Mobila':
$("#ModeleMobila").show();
break;
case 'Fotolii':
$("#ModeleFotolii").show();
break;
case 'Seturi':
$("#ModeleSeturi").show();
break;
// ...etc
}
});
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
The problem is that you were generating a new row, but still referencing the first row (and you were doing so via your naive use of Ids). Instead, your code needs to operate only upon a specific row at a time -- so, I've edited your code to pass in a reference to the row, then we can use your same JQuery Selectors, but starting from the referenced row.
NOTE: Several others have been blaming the use of duplicate Ids, but clearly that is not the problem. The fact is you CAN use duplicate Ids, and it is common to do so in situations like this.
To be clear, current HTML specification does state that:
If the id value is not the empty string, it must be unique in a document. ref
But, as a separate stack exchange discussion notes, this is not the case in practice (and probably never will be). In practice, Id is only expected to be unique within a scope, such as within a reusable component (i.e., your cloneable <tr>).
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
#ModeleColtare,
#ModeleSeturi {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button id="filter" name="filter" onclick="resetFunction()">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
IDs need to be unique. Use a class
You need to delegate the event handlers when you insert dynamic content
DRY, don't repeat yourself
function resetFunction() { // not sure what you want here?
$(this).closest(".row-fluid").remove();
}
$(function() {
$("#addMore").click(function() {
var $clone = $(".row-fluid:last").clone(true)
$('.sub_select_class',$clone).hide(); // we hide every second select
$clone.appendTo(".wrapper");
});
$(".row-fluid").on("click",".filter", resetFunction);
$(".row-fluid").on("change", ".produse", function() {
var value = $(this).val(), // save value
$parent = $(this).closest(".row-fluid");
$('.sub_select_class',$parent).hide(); // we hide every second select
$(".Modele" + value,$parent).show();
});
});
.sub_select_class {
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row-fluid">
<table style="font-size:10px">
<tbody>
<tr>
<td>
<select class="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select>
</td>
<td>
<select class="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select>
</td>
<td>
<select class="ModeleColtare sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select>
</td>
<td>
<select class="ModeleSeturi sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select>
</td>
<td>
Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
<td>
<button class="filter" name="filter">Reset</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>
Related
I'm trying to modify and example from this same page but its not working as I want.
I have two groups in a select, and I want chose any option from one of the second group "Unique" and if you select any option from that group show Div, else show nothing.
the html:
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email"
name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint"
checked required/>
</div>
the Js:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value ==
'Diplomacy' || 'Survival' ? 'block' : 'none';
}
css :
.extras{
display: none;
}
You can access the optgroup by finding the selected option, using closest() to find the enclosing optgroup tag, then accessing it's label attribute
function doSomething(element) {
// get optgroup
let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
console.log(optgroup)
if (optgroup == 'Unique') {
console.log("do something ...")
}
}
.extras {
display: none;
}
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email" name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" onchange='doSomething(this)' required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>
I am currently working on a web form that is supposed to take in user input. The marital form asks the user if they are currently married and if they answer "yes" then another drop down type of question is suppose to appear underneath asking "how many times how you been married?" and so on and so forth. I created the decisions statements, but when I tested the marital form and put in "yes" nothing additional popped up.
The expected outcome is that when the user answers "yes" another question it is supposed to appear underneath.
Marital.php
<!doctype html>
<html lang="en">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.active {
background-color: #4CAF50;
color: white;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
</style>
<head>
</head>
<body style="text-align:center;">
<div style="margin:0 auto; text-align:center;">
<img src="../Images/CBH Logo 200px.png" alt="CBH Logo" height="80" width="80">
</div>
<h2>Johnson Behavioral Health Mental Evaluation Intake Application</h2>
<br>
<div class="navbar">
<a>Education History</a>
<a class="active" href="Marital.php">Marital History</a>
<a>Employment History</a>
<a>Military History</a>
<a>Substances History</a>
<a>Social/Personal History</a>
<a>Physical Health History</a>
<a>Mental Health History</a>
</div>
<form method="POST" id="marital_form" onsubmit="SetSectionComplete('marital')">
<br></br>
<table style="margin:0 auto;">
<tr>
<td class="Question">
Are you currently married?
</td>
<td style="width:100px;">
<select type="text" id="married" name="married" style="width:100%;" class="needs_saved_marital" required>
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="evermarried_row">
<td>
Have you ever been married?
</td>
<td>
<select type="text" id="evermarried" name="evermarried" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanymarriages_row">
<td>
How many times have you been married?
</td>
<td>
<select type="text" id="howmanymarriages" name="howmanymarriages" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5 or more'>5 or more</option>
</select>
</td>
</tr>
<tr style="display:none" id="divorced_row">
<td>
Have you ever been divorced?
</td>
<td>
<select type="text" id="divorced" name="divorced" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="widowed_row">
<td>
Are you widowed?
</td>
<td>
<select type="text" id="widowed" name="widowed" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="children_row" required>
<td>
Do you have any children?
</td>
<td>
<select type="text" id="children" name="children" style="width:100%;" class="needs_saved_marital">
<option value=''></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<tr style="display:none" id="howmanychildren_row">
<td>
How many children do you have?
</td>
<td>
<select type="text" id="howmanychildren" name="howmanychildren" style="width:100%;" class="needs_saved_marital">
<option value=''></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='6'>6</option>
<option value='7 or more'>7 or more</option>
</select>
</td>
</tr>
</table>
<table style="margin:0 auto;">
<tr>
<td><button class="reset_button" type="reset" value="Reset" id="marital_reset">Clear Marital</button></td>
<td><input type="button" value="Back!" onclick="history.back()"></td>
<td><button class="save_button" formaction="Employment.php" id="marital_save" name="marital_save" value="Submit">Next</button></td>
</tr>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="Marital.js">
function Marital_Validation() {
$('#marital_save').css('border-color', '#163c6a');
$('#marital_save').css('background', 'none');
$('#marital_save').css('background-color', 'green');
$('#marital_save').css('color', 'white');
$('#marital_save').text('Saved');
$('#marital_indicator').css('background-color', 'green');
}
</script>
</body>
</html>
Marital.js
/*
Marital variables:
married
evermarried
howmanymarriages
divorced
widowed
children
howmanychildren
*/
$(function(){
$("#married").change(function(){
var option=$("#married").val();
if (option==='No'){
$("#evermarried_row").show();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#evermarried").change(function(){
var option=$("#evermarried").val();
if (option==='No'){
$("#children_row").show();
$("#howmanymarriages_row").hide();
}
if (option==='Yes'){
$("#howmanymarriages_row").show();
}
});
$("#howmanymarriages").change(function(){
var option=$("#howmanymarriages").val();
var married=$("#married").val();
if (option==='1'){
if (married==='Yes'){
$("#children_row").show();
$('#divorced_row').hide();
$("#widowed_row").hide();
}
if (married==='No'){
$('#divorced_row').show();
}
}
if (option==='2' || option==='3' || option==='4' || option==='5 or more'){
$('#divorced_row').show();
}
});
$("#divorced").change(function(){
var option=$("#divorced").val();
var married=$("#married").val();
var timesmarried=$("#howmanymarriages").val();
if (option==='No'){
$("#widowed_row").show();
}
if (option==='Yes'){
if (timesmarried==='1'){
$("#widowed_row").hide();
$("#children_row").show();
}
if (timesmarried==='2' || timesmarried==='3' || timesmarried==='4' || timesmarried==='5 or more'){
$("#widowed_row").show();
}
}
});
$("#widowed").change(function(){
$("#children_row").show();
});
$("#children").change(function(){
var option=$("#children").val();
if (option==='No'){
$("#howmanychildren_row").hide();
}
if (option==='Yes'){
$("#howmanychildren_row").show();
}
});
$(".needs_saved_marital").change(function(){
var married=$("#married").val();
var evermarried=$("#evermarried").val();
var howmanymarriages=$("#howmanymarriages").val();
var divorced=$("#divorced").val();
var widowed=$("#widowed").val();
var children=$("#children").val();
var howmanychildren=$("#howmanychildren").val();
if (married==='Yes'){
$("#evermarried").attr('required',false);
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#howmanymarriages").attr('required',true);
}
if (married==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#evermarried").attr('required',true);
}
if (evermarried==='Yes'){
$("#howmanymarriages").attr('required',true);
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (evermarried==='No'){
$("#divorced").attr('required',false);
$("#widowed").attr('required',false);
$("#children").attr('required',true);
}
if (howmanymarriages==='2' || howmanymarriages==='3' || howmanymarriages==='4' || howmanymarriages==='5 or more'){
$("#divorced").attr('required',true);
$("#widowed").attr('required',true);
}
if (children==='Yes'){
$("#howmanychildren").attr('required',true);
}
if (children==='No'){
$("#howmanychildren").attr('required',false);
}
});
});
It is working as expected. Checkout this fiddle: https://jsfiddle.net/ax6kfjvz/
I'm guessing you're including jQuery after your script. Or you're not including jQuery at all. Try this template:
<!doctype html>
<html lang="en">
<head>
<title>Couples Issues</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="js/your-awesome-script.js"></script>
</body>
</html>
When using a library, you must include them before your script otherwise the browser has no idea where let's say this function $() is coming from.
Here is a good article.
You should trim the strings to avoid unmatched error and better use css visibility hidden!
// like this
var option=$("#married").val().trim();
// like this
<tr style="visibility: hidden;" ></tr>
enter image description hereI have to create "View" and "Update" radio buttons with a dropdown below each one. To do this, I've written the following code:
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number
<table>
<tr>
<td>
<div style="width:200px;text-align: left; display: inline;">
<select id="Select" ;>
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
However, I'm unable to place the drop-down menu below radio buttons; this is what I get instead:
enter image description here
Using CSS:
.container {
width: 100%;
}
.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}
.cell {
display: inline-block;
width: calc(50% - 2px);
}
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<div class="container">
<div class="radio-buttons">
<div class="cell">
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</div>
<div class="cell">
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
</div>
<div class="dropdowns">
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</div>
</div>
Using Tables:
You can use a table to align items together like so:
td {
width: 50vw;
}
<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>
<table>
<tr>
<td>
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</td>
<td>
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
</td>
</tr>
<tr>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
Here when i select lose from drop down then I want to change label from win to lose, is it possible to change label (header).
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="los">lose</option>
</select>
</td>
<td>win</td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
Yes, you can set onChange event listener on the select with vanilla javascript, for example:
//html
<select id='mySelect' onchange='mySelectOnChange()'>
<option value='win'>win</option>
<option value='lose'>lose</option>
</select>
<span id='result'></span>
//js
function mySelectOnChange() {
document.querySelector('#result').innerHTML = document.querySelector('#mySelect').value
}
You can do it much more simpler if you use any framework/library supporting two-way data binding. e.g. Angular.js / Vue.js
Just try this
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="lose">lose</option>
</select>
</td>
<td><span id="header_td"></span></td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
In your script
<script>
function getAlert() {
var selected_value = document.getElementById('action').value;
$("#header_td").text(selected_value);
}
</script>
There are about 6-7 <select> items in a <table> column. In order to press Submit button, the condition is all <select> items should be selected. So how this can be done using Javascript..?
The sample code seems to be like this:
<table>
<tr>
<td><select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td><select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td><select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<table id="mytable">
<tr>
<td>
<select name="name1" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "10" >10</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name2" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "20" >20</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name3" style="width: 90px; height: 20px">
<option value = "--" >--</option>
<option value = "30" >30</option>
</select>
</td>
</tr>
</table>
<form action="" method="post" onsubmit="if(!check()) return false;">
<input type="submit" />
</form>
<script type="text/javascript">
function check() {
elements=document.getElementById("mytable").getElementsByTagName("select");
for(i=0;i<elements.length;i++){
if(elements[i].value == "--") { return false; }
}
return true;
}
</script>
var arr=new Array();
status=true;
function fnc()
{
elements=document.getElementById("atable").getElementsByTagName("option");
for(i=0;i<elements.length;i++)
{
arr=elements[i].value;
if(Number(arr)=='NaN')
{
status=false;
break;
}
console.log(Number(arr));
}
if(status==true)
document.getElementById("formname").submit();
}
you also give your table an id
<table id="atable">
One option is to use the jQuery validation plugin, then add "required" to all your select fields.
<form id="my_form">
<select name="select1" class="required"> ... </select>
<select name="select2" class="required"> ... </select>
<select name="select3" class="required"> ... </select>
....
</form>
Then the javascript is as simple as -
$('#my_form').validate();
All you need to do to use the plugin is include the jQuery and jQuery validation scripts in the page head
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
....
</head>
UPDATE
Obviously your requirement is a pretty simple one, and adding a full js library to your site for this use case is definitely over-kill. If this is the only validation you're going to do I'd recommend a pure js solution (such as polin's answer). However if you're likely to have further validation requirements on your site, then the jQuery validation plugin is quite powerful.