<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src={{ url_for('get_file', filename='jq') }}></script>
<script type="text/javascript">
$(document).ready(function() {
var x = "{{msg}}"
var name= {{ name | safe}}
console.log(name[0])
console.log(x=='', name)
// $('.alert').hide()
// if (x!=''){
// $('.alert').show()
// }
$( "#locations" )[0].scrollIntoView();
$('#lname').on("change", function(){
var txt = $(this).val().toLowerCase()
console.log(txt)
for (var i = 0; i < name.length; i++) {
if (name[i]==txt){
console.log('x')
$(this).addClass("error")
break
}
else{
$(this).removeClass("error")
$(this).addClass("okay")
}
}
});
});
// validator
$(document).ready(function() {
$('.container').submit(function(e) {
var empty = $(this).find("input").filter(function() {
return this.value === "";
});
if (empty.length) {
e.preventDefault();
alert("Cannot submit empty field");
}
});
});
</script>
<style>
.okay{
border-color:#0F0;
border-radius: 4px;
border-width: 4px;
}
.error{
border-color:#F00;
}
.weekDays-selector input {
display: none!important;
}
.weekDays-selector input[type=checkbox] + label {
display: inline-block;
border-radius: 6px;
background: #dddddd;
height: 40px;
width: 30px;
margin-right: 3px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.weekDays-selector input[type=checkbox]:checked + label {
background: #2AD705;
color: #ffffff;
}
</style>
</head>
{% extends "layout.html" %}
{% block content %}
<div class="container">
<form action={{ url_for('add_category_details') }} method="post" name="loginform">
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-hover">
<th colspan="2"> Add Persons Category </th>
<tr class="table-info">
<tr id='new_cat' class="table-info">
<td> Enter New Category Name: </td>
<td><input type='text' name='lname' style="width:200px;" value=""></td>
</tr>
<tr>
<td colspan="2">
<button id='confirm' name='confirm' type='submit' class="btn btn-primary btn btn-block active">Confirm</button>
</td>
</tr>
</tr>
</table>
</div>
</div>
</form>
<!-- add forms in seperate divs -->
</div>
<div class="container">
<form action={{ url_for('delete_category_details') }} method="post" name="loginform" >
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-hover">
<th colspan="2"> Delete Persons Category </th>
<tr class="table-info">
<tr id='new_cat' class="table-info">
<td> Select Category Name: </td>
<td>
<select name="lname" id="lname" style="width:200px;">
{% for row in lname %}
<option selected disabled hidden>Select a category</option>
<option value="{{row}}">{{row}}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button id='confirm' name='confirm' type='submit' class="btn btn-primary btn btn-block active">Confirm</button>
</td>
</tr>
</tr>
</div>
</div>
</form>
</div>
<!-- form with two input dropdowns one as old category and other as new category displaying the existing categpry name -->
<!-- todo -->
<!-- form to accept color name choiced from color table in person db and category name calls update_color route -->
<div class="container">
<form action={{ url_for('update_color_category') }} method="post" name="loginform">
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-hover">
<th colspan="2"> Update Persons Category Color </th>
<tr class="table-info">
<tr id='new_cat' class="table-info">
<td> Select Category Name: </td>
<td>
<select name="category" id="category" style="width:200px;">
{% for row in lname %}
<option selected disabled hidden>Select a category</option>
<option value="{{row}}">{{row}}</option>
{% endfor %}
</select>
</td>
</tr>
<tr id='new_cat' class="table-info">
<td> Select Category Color: </td>
<td>
<select name="color" id="color" style="width:200px;">
{% for row in color %}
<option selected disabled hidden>Choose a color</option>
<option value="{{row}}">{{row}}</option>
{% endfor %}
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button id='confirm' name='confirm' type='submit' class="btn btn-primary btn btn-block active">Confirm</button>
</td>
</tr>
</tr>
</div>
</div>
</form>
</div>
<!-- display in a table categpry name and their respective color with the use of dictionary category_color -->
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-hover">
<th colspan="2"> Category Name and Color </th>
<tr class="table-info">
<tr id='new_cat' class="table-info">
<td> Category Name: </td>
<td> Category Color: </td>
</tr>
{% for key, value in category_color.items() %}
<tr id='new_cat' class="table-info">
<td> {{key}} </td>
<td> {{value}} </td>
</tr>
{% endfor %}
</tr>
</table>
</div>
</div>
</div>
<!-- <table class="table table-hover" id='locations'>
<thead>
<th> List of Added Categories</th>
</thead>
<tbody>
{% for row in lname %}
<tr class="table-info">
<td width="10px">{{row}}</td>
</tr>
{% endfor %}
</tbody>
</table> -->
</div>
{% endblock %}
so I added a jquery function to validate the multiple forms in a single html page but it is only able to validate the first form and not the forms after that, whenever I submit the other two forms it triggers api call and displays bad request, when I checked the console logs it displays error Uncaught TypeError: Cannot read properties of undefined (reading 'scrollIntoView') is it due to the fact that they are seperate divs or is something else?
Uncaught TypeError: Cannot read properties of undefined (reading 'scrollIntoView')
This is likely because your table with id='locations' is commented out, and therefore $( "#locations" )[0] is undefined.
it is only able to validate the first form and not the forms after that
Your validation script appears to be looking for $(this).find("input") - but only your first form has any <input> tags! You might be able to fix this by also looking for <select> tags: $(this).find("input,select").