So I want to make some checkboxes.
If I check one of them, that one's counter should decrease by one (it has a space variable, so if someone checks that checkbox, it should decrease by one)
Also if they uncheck that, I would like to increase the space, so increase the space (hely) variable by one.
Now my code keeps increasing only, but it does not decreases.
(Sorry for the format of the code, but since stackoverflow made a new question asking page it is not that easy to copy my code like before...)
var hely = 0;
function checkingFunction() {
if (checkbox.checked == true) {
hely--;
change.innerHTML = hely;
} else {
hely++;
change.innerHTML = hely;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<form class="checkbox" id="checkbox" action="">
<table>
<thead>
<tr>
<th></th>
<th>1.</th>
<th>2.</th>
<th>3.</th>
<th>4.</th>
<th>5.</th>
<th>6.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hétfő</th>
<td><input type="checkbox" id="he1" onclick="checkingFunction()" name="hetfo"><label id="change" for="he1">
</label></td>
<td><input type="checkbox" id="he2" onclick="checkingFunction()" name="hetfo"><label id="change" for="he2">
</label></td>
<td><input type="checkbox" id="he3" onclick="checkingFunction()" name="hetfo"><label id="change" for="he3">
</label></td>
<td><input type="checkbox" id="he4" onclick="checkingFunction()" name="hetfo"><label id="change" for="he4">
</label></td>
<td><input type="checkbox" id="he5" onclick="checkingFunction()" name="hetfo"><label id="change" for="he5"></label>
</td>
<td><input type="checkbox" id="he6" onclick="checkingFunction()" name="hetfo"><label id="change" for="he6">
</label></td>
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Jelentkezés elküldése">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
If I check one checkbox, that one's counter should decrease by one (it has a space variable, so if someone checks that checkbox, it should decrease by one)
Also if they uncheck that, I would like to increase the space, so increase the space (hely) variable by one.
You have multiple id="change" labels. When you do that, the variable change contains a collection of all of them, and assigning to change.innerHTML doesn't update any of them.
The variable checkbox refers to the <form id="checkbox">. Since forms don't have a checked property, checkbox.checked == true is never true, so hely always increments.
If you want to check the value of the box that the user checked, you need to pass it as a parameter to the function, using onclick="checkingFunction(this)".
And if you want to update the label associated with that checkbox, you can use checkbox.nextSiblingElement to refer to it.
var hely = 0;
function checkingFunction(checkbox) {
var change = checkbox.nextElementSibling;
if (checkbox.checked) {
hely--;
} else {
hely++;
}
change.innerHTML = hely;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Piarista Kollégium - Stúdiumi jelentkezés</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="topnav">
<div class="topnav-centered">
Jelentkezés
</div>
Frissítések
<div class="topnav-right">
Bejelentkezés
</div>
</div>
<div id="head">
<img src="logo.png">
</div>
<h2>Üdvözöllek, XY!</h2>
</div>
<form class="checkbox" id="checkbox" action="">
<table>
<thead>
<tr>
<th></th>
<th>1.</th>
<th>2.</th>
<th>3.</th>
<th>4.</th>
<th>5.</th>
<th>6.</th>
</tr>
</thead>
<tbody>
<tr>
<th>Hétfő</th>
<td><input type="checkbox" id="he1" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he1">
</label></td>
<td><input type="checkbox" id="he2" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he2">
</label></td>
<td><input type="checkbox" id="he3" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he3">
</label></td>
<td><input type="checkbox" id="he4" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he4">
</label></td>
<td><input type="checkbox" id="he5" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he5"></label>
</td>
<td><input type="checkbox" id="he6" onclick="checkingFunction(this)" name="hetfo"><label id="change" for="he6">
</label></td>
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Jelentkezés elküldése">
</form>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Related
Okay, so for some reason I have a crazy problem that is just making my mind go crazy. I have an open source shoutbox, worked great in the website.com/shouot/SHOUTDIREC/chat.html but once I try to embed into my previous built site(website.com/chat.php), the submit button like grays out and I can't submit the post. Another thing is it doesn't show previous post that show up when I go back to SHOUTDIREC/chat.html. I tried changing /chat.php to /chat.html nothing. Still grayed out not working submit button.
This is the ./chat.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Making a Shoutbox with PHP and jQuery</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./shout/assets/css/styles.css" />
<script type="text/javascript" src="./livechat/php/app.php?widget-init.js"></script>
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./shout/assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./shout/publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./shout/assets/js/script.js"></script>
</body>
</html>
Here is the /SHOUTDIREC/chat.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wyfi-Chat</title>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/emojione/1.3.0/assets/css/emojione.min.css"/>
<link rel="stylesheet" href="./assets/css/styles.css" />
</head>
<body>
<div class="shoutbox">
<h1>Shout box <img src='./assets/img/refresh.png'/></h1>
<ul class="shoutbox-content"></ul>
<div class="shoutbox-form">
<h2>Write a message <span>×</span></h2>
<form action="./publish.php" method="post">
<label for="shoutbox-name">nickname </label> <input type="text" id="shoutbox-name" name="name"/>
<label class="shoutbox-comment-label" for="shoutbox-comment">message </label> <textarea id="shoutbox-comment" name="comment" maxlength='240'></textarea>
<input type="submit" value="Shout!"/>
</form>
</div>
</div>
<!-- Include jQuery and the EmojiOne library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://cdn.jsdelivr.net/emojione/1.3.0/lib/js/emojione.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>
I don't know why it's not working. Maybe a permission issue? Or what? I have no clue, and my mind is going absolutely nuts.
function AjaxShowForm(a, v) {
var data = $("#" + v).serialize();
$.ajax({
type: "POST",
url: "https://api.stackexchange.com/2.2/answers/45403161?order=desc&sort=activity&site=stackoverflow",
data: data,
beforeSend: function (html) { // this happens before actual call
$("#" + a).html("<img src='//vistablog.ir/images/loading_.gif'></img>loading..");
$("#" + a).show();
},
success: function (html) { // this happens after we get results
$("#" + a).html("");
$("#" + a).show();
$("#" + a).append(html);
}
});
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form1'>
<table dir='rtl' border='0'>
<tr>
<td>name <span style="color:red">*</span></td>
<td><input type='text' name='in1' required></td>
</tr>
<tr>
<td>description</td>
<td><textarea name='in3'></textarea></td>
</tr>
<tr>
<td>family</td>
<td><input type='text' name='in2'></td>
</tr>
<tr>
<td>email</td>
<td><input type='text' name='in4'></td>
</tr>
<tr>
<td>roles</td>
<td><input type='checkbox' name='in5'></td>
</tr>
<td></td>
<td><input type='submit' value='submit' onclick='return AjaxShowForm("showajax1","form1")'></td>
</table>
<p id='showajax1'></p></form>
</center>
My Requirement Description :: I am designing a webapp in JAVA which interacts with the DB (MySQL) and registers an employee, updates the employee information, query an employee with employee id and removes a record. In the backend I am using Hibernate framework.
So I should have 4 buttons in my webpage :
Add Employee
Update Employee
Remove Employee
Query Employee
On clicking "Add Employee" it should request the user for some info like employee id, name etc. And other 3 buttons should be on hidden mode.
Same case on clicking other buttons also.
My Problem :: I have designed my Webpage, how ever when I am clicking on any of the button, nothing is getting displayed. I am not sure where is the problem.
I have limited knowledge with JSP and CSS.
Please let me know where I am doing wrong and help me out in this situation
Here is my JSP code :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>
I have three html pages separately
homepage (with two links (sign up) and (sign in) )
sign-in
sign-up
I want to hide the other page, when one page is shown only.
homepage.jsp
<!DOCTYPE html>
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<!-- write your code here -->
<div>
Create account
Sign In
</div>
<div>
<nav>
<div id="in" style="display: none;">
<jsp:include page="sign-in.jsp"></jsp:include>
</div>
</nav>
<nav>
<div id="join" style="display: none;">
<jsp:include page="sign-up.jsp"></jsp:include>
</div>
</nav>
</div>
<!-- write your code here -->
sign-in.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
sign-up.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I want to know that how do i hide the other page when the one page is shown.
Please help. I am waiting for your kind response.
I assume that you handle which submit button is clicked. So give an id to your page's outmost div. An you can manage your pages as follows:
$(function () {
$('#homepageDivId').show();
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#signInPageId input[type=button]').click(function() {
$('#homepageDivId').hide();
$('#signOutPageId').hide();
$('#signInPageId').show();
});
$('#signOutPageId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#homepageDivId').hide();
$('#signOutPageId').show();
});
$('#homepageDivId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#homepageDivId').show();
});
});
I have a jquery calendar wherein there are js files stored in Calendar folder.When i select the date, the date is inserted into a textbox.It is working fine.But i have another textbox and i want to use the same script and function for that box too.I am new to jquery so help me out with this one.
Here is the scripting :
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
I know this has something to do with the id but i am not sure how to solve this.Thanks in advance.
$("#datepicker, #datepicker0").datepicker();
Or you could give both elements the same class name and use that:
<input type="text" id="datepicker" class="datepicker"/>
<input type="text" id="datepicker0" class="datepicker"/>
$(".datepicker").datepicker();
Instead of id you can use css class Try this code
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".datepicker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input type="text" class="datepicker" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input type="text" class="datepicker" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
Assign same css class to both these textboxes and call attach datepicker by using class selector. Example:
<head>
<meta charset="utf-8">
<link href="Calendar/jquery-ui.theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="Calendar/jquery-ui.js"></script>
<link href="Calendar/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".date-picker").datepicker();
});
</script>
</head>
<body>
<tr>
<td class="unmaintable1">Registeration starts : </td>
<td class="unmaintable2"><input class="date-picker" type="text" id="datepicker"/></td>
<td class="unmaintable3">Registeration ends :
<input class="date-picker" type="text" id="datepicker0"/></td>
<td class="unmaintable4"> </td>
</tr>
you can use like if you don't want to use same class for all
$("input[id^=datepicker]").datepicker();
Or
<input type="text" id="datepicker" name="datepicker"/>
<input type="text" id="datepicker0" name="datepicker0"/>
$(function() {
$("input[name^=datepicker]").datepicker();
});
i had a text field named as bill no ,My problem is to increase value in the text field automatically , like initially the bill no will be 1 , after clicking save button it should save with 1 after saving the bill no should automatically increase to 2 ,
any advice ?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sales</title>
<link href="css/module.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/date.js"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker({dateFormat:"yy-mm-dd"});
});
</script>
</head>
<body>
<div class="reg-form">
<form method="post" name="sales" action="sales">
<table class="main">
<thead>
<tr>
<th>SALES
</th>
</tr>
</thead>
</table>
<table class="in-sec-small">
<tbody>
<tr>
<td class="label">
<label for="patient-type">PATIENT TYPE
</label>
</td>
<td>
<select id="patient_type" class="textfield-form-req-select" type="text" name="patient_type" required>
<option value="member">IP</option>
<option value="non-member">OP</option>
<option value="non-member">WIP</option>
</select>
</td>
<td class="label">
<label for="reg-type">REG TYPE
</label>
</td>
<td>
<select id="reg_type" class="textfield-form-req-select" type="text" name="reg_type" required>
<option value="member">Member</option>
<option value="non-member">Non Member</option>
</select>
</td>
<td class="label">
<label for="bill-no">BILL NO
</label>
</td>
<td>
<input id="bill_no" class="textfield-form-date-req" type="text" name="bill_no" required>
</td>
</tr>
Try code below, if you save your bill no through ajax, increase number in your ajax success callback.
$("#your-save-button-id").click(function(){
... do your save action here ...
$("#bill_no").val(parseInt($('#bill_no').val()) + 1);
})