CODEWITHSUNDEEP
javascriptjquery
aparna sharma
aparna sharma

Reputation: 25

check dropdown value for every row in html table using javascript

I need to check dropdown value is not equals to select in each row of html table. when i submit the value it will show the error message if dropdown selected value is null or not selected in any row of the html table for particular dropdown column. here is my code which i try,but it is not checking all the rows.

<script type="text/javascript">
    $(function DropDownvalidate() {

        $("#btnSubmit").click(function () {

            $('#table tr').each(function () {
              if ($('#ddlDates').val() == "Select") {
                alert("Please select an option!");
                return false;
            }
            return true;
       });
        });
    });


</script>

Upvotes: 0

Views: 2545

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281922

I think the problem might be that you are adding the return true statement at a wrong place it should be outside the .each() function. Also you need to search for the id of select input inside the table row only. So use the find() function to find the select input within the current row. 

$(function() { 
            $("#btnSubmit").click(function () {
               
                $('#table tr').each(function () {
                   if ($(this).find('#ddlDates').val() == "Select") {
                      alert("Please select an option!");
                      
                      return false; 
                   } 
                }); 
                return true;
            }); 
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="table">
<th>Select options</th>
<tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr>
  <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr>
  <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr>
  <tr><td><select id="ddlDates"> <option value="Select">Select</option> <option value="PreprationDate">Prepration Date</option> <option value="EventDate">Event Date</option> <option value="DismentillingDate">DismentillingDate</option> </select></td></tr>
</table>
<button id="btnSubmit">Submit</button>

Upvotes: 0

Related Questions