We Keep Coding

Refresh tag value with dynamically generated data

I have a main php page displaying dynamically generated cards through a loop. I am trying to refresh the content for certain tags, but it doesn't seem to work so far.
This is my main.php file:
<div class="col" style="width: ">
<div class="card shadow-sm h-100 border-dark rounded" style="width: 240px; background-color: #ededed">
<span class="mySpan">
<div class="container">
<input type="hidden" class="cardid" name="mycardId" value="
<?php echo $cardId ?>" id="cardid">
<div class="card-body px-0 py-0">
<table id="firstTable" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="width: 237px; table-layout: fixed;">
<thead>
<tr>
<th colspan="3" id="row1field1" name="row1field1" class="text-center py-1 px-1 fw-bold
<?php if($selectField == "EXP") echo "text-decoration-line-through" ?>" style="max-width: 237px; text-transform: uppercase; font-size: 18px;" contenteditable="true" data-name="row1field1"> <?php echo $row1field1; ?> </th>
</tr>
</thead>
</table>
<table id="row4" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="max-width: 238px; min-height: 50px; border: thin solid lightgray">
<tr>
<td name="row4field1" id="row4field1" class=" py-1" style="max-width: 104px; border-right: thin solid gray; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field1; ?> </strong>
</h6>
</td>
<td name="row4field2" id="row4field2" class=" py-1" style="max-width: 104px; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field2; ?> </strong>
</h6>
</td>
</tr>
</table>
</div>
<div>
</span>
</div>
</div>
This is what I've tried so far using javascript:
$(document).ready(function(){
setInterval(function(){
$("#row1field1").load(" #row1field1 > *");
}, 5000);
});
Unfortunately, after the refresh, all content from row1field1 is gone. I believe this could be because the IDs are not unique, but I'm using the hidden value cardId to differentiate each card. Any advice on how to properly refresh these dynamic content is greatly appreciated.

How to add a div below a row of table which is collapsable?

I am making a kind of a lobby. The lobby will contain a list of games. Displayed in <table>. Each <tr> contains name, no of players etc in <td>. Now I want that when I click on the row a corresponding details of the game should be displayed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">Button</button>
<table class="table text-align=">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#game-1">
<td>Game 1</td>
<div class="collapse" id="game-1">Description of game 2</div>
</tr>
<tr data-toggle="collapse" data-target="#game-2">
<td>Game 2</td>
<div class="collapse" id="game-2">Description of game 2</div>
</tr>
</tbody>
</table>
I have tried to use that <div> inside <tr>. But that didn't worked well and its showing details outside table.
I want to make the details appear right after the row.
My second question is that what is the best way to on show only one deatils at a time.
Note: I know I can add another row after the row but that will ruin the structure of my table. So I don't wanna do that.

Here is simple implementation based on your code:
$(function() {
$('.collapse-item').click(function(e) {
e.preventDefault();
const target = $(this).data('target');
if (!$(target).hasClass('show')) {
$('.collapse-content').removeClass('show');
}
$(target).toggleClass('show');
});
});
.table .collapse-content > td {
padding: 0 .75rem;
}
.collapse-content > td > div {
height: 0;
opacity: 0;
}
.table .collapse-content.show > td {
padding: .75rem;
}
.collapse-content.show > td > div {
height: 100px;
opacity: 1;
}
.collapse-content > td, .collapse-content > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all ease-in-out;
transition: all 1s ease-in-out;
}
.collapse-content.show > td, .collapse-content.show > td > div {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<button class="btn btn-primary">Button</button>
<table class="table text-align">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="collapse-item" data-target="#game-1">
<td>Game 1</td>
</tr>
<tr class="collapse-content" id="game-1">
<td>
<div>Description of game 1</div>
</td>
</tr>
<tr class="collapse-item" data-target="#game-2">
<td>Game 2</td>
</tr>
<tr class="collapse-content" id="game-2">
<td>
<div>Description of game 2</div>
</td>
</tr>
</tbody>
</table>
Alternatively, you can use Bootstrap accoridon:
#accordion {
margin: 2rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Game #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Game 1 details
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Game #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Game 2 details
</div>
</div>
</div>
</div>
You may also look at Datatables child rows. And here is sliding example.

not able to print scrollable table content

HI all I have following html,cc & js code.I am only able to print visible parts of the below table. when more contents comes I have applied css to make a table scrollable and user can scroll and see all the data inside the table.but when I am trying to print I am not able to print entire contents of the table.
It always print visible parts in the sheet.
The following table use bootstrap 3 styles inside table.
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="page-logo">
<a href="index.html">
<img src="assets/layouts/layout3/img/Logo5.png" alt="logo">
</a>
</div>
<h5 class="modal-title" id="exampleModalLongTitle">Receipt Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="printThis">
<div class="portlet-body">
<div class="table-scrollable" style="height:170px;overflow:auto;">
<table class="table table-hover">
<thead>
<tr>
<th> # </th>
<th>VOC ID </th>
<th>Plate No</th>
<th>Operation</th>
<th>Date & Time</th>
<th>Amount Paid </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> 12345678 </td>
<td> AB 34567 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
<tr>
<td> 2 </td>
<td> 1245666 </td>
<td> YA 56789 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
<tr>
<td> 4 </td>
<td> 73214666 </td>
<td> AA 45678 </td>
<td>Modify </td>
<td>01/01/2018 12:34 PM</td>
<td> 10 OMR </td>
</tr>
</tbody>
</table>
</div>
<div class="pull-right"> Total Amount Paid: <b>45 OMR</b></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btnPrint">Print Details</button>
</div>
</div>
</div>
</div>
My css for printing
<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#printSection, #printSection * {
visibility: visible;
}
#printSection {
position: absolute;
left: 0;
top: 0;
}
}
</style>
My js for printing
<script language="javascript">
document.getElementById("btnPrint").onclick = function () {
printElement(document.getElementById("printThis"));
window.print();
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
}
</script>

My updated css, It works now. I just overrided height in "print.
<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility: hidden;
}
#printSection, #printSection * {
visibility: visible;
height: auto !important
}
#printSection {
position: absolute;
left: 0;
top: 0;
}
}
</style>

Get value from defined <td> (ASP.NET MVC)

I have View where I show some data via table
Here is code
#foreach (var item in Model)
{
<tr >
<td class="point">
#(rowNo += 1)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Email)
#Html.Hidden("clientEmail", item.Email)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Position)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Company.CompanyName)
</td>
<td style="text-align: end;">
<button type="submit" id="send" class="sendinviteclass" style="color: white">Отправить приглашение</button>
I have button with id="send" and I need to get Email by it via JS.
My trouble in that - I can have for example 5 rows in table and so I can have 5 buttons.
How I can get value from email what I need via JS?
UPDATE
Here is page source code
<div style="padding-left: 70px; padding-bottom: 20px;">
<p>
<a href="/">
<img src="/images/logo.png" alt="image" height="100px" width="110px">
</a>
</p>
</div>
<div class="navbar">
<div class="container" style="position: relative">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/">Видео Интрервью</a>-->
</div>
<div class="navbar-collapse collapse center-block">
<ul class="nav navbar-nav">
<li>Компании</li>
<li>Подтвержденные</li>
<li>Приглашения</li>
<li>Создать интервью</li>
<li>Просмотр</li>
<li>Входящие</li>
<li>Архив</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="6_mqaCf427P4eDczunVjASai_ZRrITyXFFtIwygRva6gR8Mr5nNZJqU8IBwTbt_HYx8bjjz81WHzLkbljebv6iALVFrIFh7N-KDi3rc6nJ_o8m3fYOsciskGTOX6stGRPop_D7qr240jQ2disCDSkg2" /> <ul class="nav navbar-nav navbar-right">
<li>
</li>
<li>Выйти</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<form action="/Clients/SendEmail" method="post"><form action="/Clients" method="post"> <table class="table">
<tr style="background: #d1d3d4">
<th></th>
<th style="font-size: 20px; text-align: center;">
Email
</th >
<th style="font-size: 20px; text-align: center;">
Клиент
</th>
<th style="font-size: 20px; text-align: center;">
Должность
</th>
<th style="font-size: 20px; text-align: center;">
Компания
</th>
<th></th>
</tr>
<tr>
<td style="height: 40px; width: 40px; background: red;">
<a href='/Clients/Create'>
<img style="object-fit: cover;" src='/Images/plus.png'/>
</a>
</td>
</tr>
<tr >
<td class="point">
1
</td>
<td class="email_text" style="text-align: center; font-size: 18px;">
nemesises#live.com
<input id="clientEmail" name="clientEmail" type="hidden" value="nemesises#live.com" />
</td>
<td style="text-align: center; font-size: 18px;">
Сухомлин Евгений
</td>
<td style="text-align: center; font-size: 18px;">
C# Developer
</td>
<td style="text-align: center; font-size: 18px;">
Фокстрот
</td>
<td style="text-align: end;">
<button type="button" onclick="sender()" data-email="nemesises#live.com" id="email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
<a href='/Clients/Edit/2033'>
<img src='/Images/Edit.png'/>
</a>
<!-- <a class="editclass" href="/Clients/Edit/2033">Редактировать</a>-->
<a href='/Clients/Delete/2033'>
<img src='/Images/Delete.png'/>
</a>
</td>
</tr>
</table>
</form><script>
function sender(element) {
$(element).data('email');
alert(email);
}
</script>

Add data- prop to your button like:
<button type="submit" id="send" onclick="sender(this)" data-email="#item.email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
And in JS:
var email = $(this).data('email')
Assuming this is your button.

Javascript Not working on form submit

I have wrote javascript in php file the thing is that i want to select input from dropdown using javascript the default value in dropdown is SELECT and when i submit the form i need the alert message like please select value in drop down lable. and apart from this i also need this for all dropdown option.wherever it found "SELECT" alert should be there with respective lable
My try is:
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<?php if(isset($_POST['empsubmit'])) {
if(isset($_POST['areaname']) && isset($_POST['flat']) &&
isset($_POST['rentsale'])) {
$an=$_POST['areaname']; $flat=$_POST['flat'];
$rentsale=$_POST['rentsale'];
$_SESSION['an']=$an; $_SESSION['flat']=$flat; $_SESSION['rentsale']=$rentsale; }
} if(isset($_REQUEST['unsetsession'])) { session_destroy();;
header('location:home.php'); break; } ?>
<!DOCTYPE html> <html lang="en"> <head> <title>Shree Shree
Property,Kolhapur</title> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 1em 15px; margin-top: 50px;
border-radius: 0;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} .active { background-color: #00bfff; }
} .col-sm-2{background-color: gray;} .col-sm-8{background-color: #e0e0eb; border-radius: 25px;}
.mainBlock4{background-color: gray; overflow: scroll; height:
220px;} .mainBlock5{background-color: gray; overflow: scroll;
height: 240px;} th{text-align: center; background-color:black;
color:white;} .td1{color:black;}
.tr1:nth-child(even) {
background-color: #e0e0eb; } .trclose{} .closebutton{ border-collapse: collapse;} .button {
background-color: black;
border-radius: 10px;
color: white;
padding: 0.1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer; border: 2px solid red;} .button:hover {
background-color: gray; /* Green */
color: white;
</style> </head> <body>
<nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../riteshproject/logo.png" align="center" style="width:70px;height:50px;">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li> <li class="current" id="dddd"><a
href="../riteshproject/aboutus.php" >About US</a></li> <li>Contact US</li>
<li>Add Property</li> <li>Luxarious Property</li> <li><a href="#">Property For
Sale</a></li> <li>Other Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../riteshproject/Login/login.php"><span class="glyphicon glyphicon-log-in"></span><img
src="../riteshproject/login1.jpg" width="60" height="25"></a></li>
</ul>
</div> </div> </nav> <div class="container-fluid text-center"> <div class="row content">
<div class="col-sm-2 sidenav" align="center" id="2">
<head>
<title></title>
<script type="text/javascript">
var picPaths = ['../riteshproject/img/prop1.jpg','../riteshproject/img/prop2.jpg','../riteshproject/img/prop3.jpg','../riteshproject/img/prop4.jpg',
'../riteshproject/img/prop5.jpg'];
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picPaths.length; i++) {
imgO[i] = new Image();
imgO[i].src = picPaths[i];
}
function swapImage() {
curPic = (++curPic > picPaths.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,2000);
}
window.onload=function() {
imgCont = document.getElementById('imgBanner');
swapImage();
}
</script>
</head>
<body>
<div>
<img id="imgBanner" src="" alt="" />
</div>
</body>
<div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
</div>
<div class="col-sm-8 text-left"> <form action="" method="POST" onsubmit="notSELECT()">
<table><tr><td><h4><b>Welcome To Shree Shree Property,Kolhapur</b></h4></td></tr></table>
<hr>
<h5><b><i><marquee width="365px" height="10px" direction=slide BEHAVIOR=ALTERNATE left:355px>Search Property in
kolhapur... </marquee></i></b></h5>
</hr>
<table> <tr> </tr> <tr> </tr> <tr> <td width='35px'></td> <td>
<select name="rentsale" id="rentsale" value="select">
<option>RENT</option>
<option>SALE</option>
</select>
</td>
<td><input type="radio" name="radio" value="flat" checked>FLAT</td>
<td width='35px'></td> <td><input type="radio" name="radio" value="Bungalo">Bungalow</td> </tr> <tr height="60px">
<td height="20px" />Area
<td style="text-align:left">
<select name="areaname" id="areaname" value="select" class="NotEmpty">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select code,areaname from areamaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['areaname']?>"><?php echo $row['areaname']?></option>
<?php
}
?>
</select>
</td>
<td></td>
<td>Flat</td>
<td style="text-align:left">
<select name="flat" id="flat" value="select">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select flat from flatmaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['flat']?>"><?php echo $row['flat']?></option>
<?php
}
?>
</select>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
<input type="submit" name="empsubmit" style="width:75" id="submit" value="Search" class="button" onclick="showDiv()">
</td> </tr> </table> </form>
<?php if(isset($_SESSION['an'])) {
?>
<div class="heddendiv" width="30px">
<html><b>
Property Found for your search...</b>
<div Class="mainBlock4" style="width:100%">
<form name="leavesanction" action="" method="POST" onsubmit="notSELECT()" >
<table border=3px solid black;>
<tr>
<th width="15%" align="center">Area</th>
<th width="15%" align="center">Flat/Bungalo</th>
<th width="12%" align="center">BHK</th>
<th width="12%">Rent</th>
<th width="16%">Deposit</th>
<th width="10%">SQ Ft</th>
<th width="10%">FLoor</th>
<th width="10%">Lift</th>
</tr>
<?php
$select="select area,proptype,address,bhk,rent,diposit,sqft,floor,lift
from propertymaster where area='$an' and bhk='$flat' and rentorsale='$rentsale'";
$property=mysql_query($select);
while($row=mysql_fetch_assoc($property))
{
?>
<tr class="tr1">
<td class="td1">
<?php echo $row['area'];?>
</td>
<td align="center">
<?php echo $row['proptype'];?>
</td>
<td>
<?php echo $row['bhk'];?>
</td>
<td>
<?php echo $row['rent'];?>
</td>
<td>
<?php echo $row['diposit'];?>
</td>
<td>
<?php echo $row['sqft'];?>
</td>
<td>
<?php echo $row['floor'];?>
</td>
<td width="20px">
<?php echo $row['lift'];?>
</td>
</tr>
<?php
}
?>
</table>
<table class="closebutton">
<tr class="trclose" align="center">
<td></td>
<td width='260px'></td>
<td>
<a href="home.php?unsetsession=1">
<input type="submit" name="Close" style="width:75" id="Close" value="Close" class="button"></a>
</td>
</tr>
</table>
</form>
</div>
</html>
</div>
<?php } ?>
<?php if(!isset($_SESSION['an'])) { ?>
<div Class="mainBlock5" style="width:100%">
<p>testing div</p> </div>
<?php } ?>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p> <img src="../riteshproject/login1.jpg" width="80" height="50">
</div>
<div class="well">
<p>ADS</p>
</div>
</div> </div> </div>
<footer class="container-fluid text-center">
<p><b><marquee>Designed,Developed and Maintened By Shree Shree
Property,Kolhapur Mob No 9373002173</b></marquee></p> </footer>
</body> </html>
<script> function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true; }
</script>
in javascript i done following with function
i get the values using getElementByName
and using if condition i checked it with "SELECT"
and shown alert();
i wrote that function in form tag onsubmit="notSELECT()"
so plz help me out to show alert msg
please help me

In this code:
function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
You try to select all elements with the className of "areaname", but I can't seem to find any class with that name. Perhaps this is what you wanted:
function notSELECT() {
var inputControls = document.getElementById("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
EDIT:
For your second question (you stated in the comments) here is the code:
function notSELECT() {
var inputControlsAreaName = document.getElementById("areaname");
var inputControlsFlat = document.getElementById("flat");
if (inputControlsAreaName.value== "SELECT") {
alert("Please select areaname");
return false;
}
if (inputControlsFlat.value== "SELECT") {
alert("Please select flat");
return false;
}
return true;
}