I've just started a new Google app script and created a simple form with some jQuery behind it to handle the validation, shown below.
But whenever I click on the <button> I created, it just refreshes the page. The same thing happens with a <input type='submit'> button.
Any ideas why this is doing his and how to prevent it?
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker -->
<div>
<h1>Use the form below to enter a new entry into the calendar</h1>
<table>
<form>
<tr>
<td>
Title: <input type='input' id='title' />
</td>
<td>
Description:<input type='input' id='description' />
</td>
</tr>
<tr>
<td>
Date: <input type='text' id='date_choice' value="" />
</td>
<td>
<label for="select">Time of day</label>
<select id="select">
<option value='before' >Before School Starts</option>
<option value='morning' selected>Morning</option>
<option value='lunchtime'>Lunchtime / Afternoon</option>
<option value='afterschool'>After School has ended</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' style='text-align: center;'>
<button class="create">Insert</button>
</td>
</tr>
</form>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#date_choice" ).datepicker({
dateFormat: "dd/mm/yy"
});
$("#create").click(InsertIntoCal);
});
function InsertIntoCal(){
var title = document.getElementById("title").value;
var descr = document.getElementById("description").value;
var date = document.getElementById("date_choice").value;
var time = document.getElementById("select").value;
alert(title); alert(descr); alert(date); alert(time);
}
</script>
You've made a simple HTML / jQuery mistake. Your button has a class, but no unique id:
<button class="create">Insert</button>
^^^^^^^^^^^^^^
...yet you attempt to bind a click() handler to a specific element by id:
$("#create").click(InsertIntoCal);
^^^^^^^
As a result, InsertIntoCal() never gets called.
You want that class for styling, so keep it but add an id like so:
<button class="create" id="insert-entry">Insert</button>
Then modify the binding to use the new id:
$("#insert-entry").click(InsertIntoCal);
You can try it out in the snippet below.
WRT <input type='submit'> - that will not work in Google Apps Script, there's no POST handler waiting for form submissions. Instead, you need to keep extending your InsertIntoCal() handler to use google.script.run to send the form contents to a server-side handler.
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- https://developers.google.com/apps-script/add-ons/css -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- this CSS package is for the jquery datepicker -->
<div>
<h1>Use the form below to enter a new entry into the calendar</h1>
<table>
<form>
<tr>
<td>
Title: <input type='input' id='title' />
</td>
<td>
Description:<input type='input' id='description' />
</td>
</tr>
<tr>
<td>
Date: <input type='text' id='date_choice' value="" />
</td>
<td>
<label for="select">Time of day</label>
<select id="select">
<option value='before' >Before School Starts</option>
<option value='morning' selected>Morning</option>
<option value='lunchtime'>Lunchtime / Afternoon</option>
<option value='afterschool'>After School has ended</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' style='text-align: center;'>
<button class="create" id="insert-entry">Insert</button>
</td>
</tr>
</form>
</table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#date_choice" ).datepicker({
dateFormat: "dd/mm/yy"
});
$("#insert-entry").click(InsertIntoCal);
});
function InsertIntoCal(){
var title = document.getElementById("title").value;
var descr = document.getElementById("description").value;
var date = document.getElementById("date_choice").value;
var time = document.getElementById("select").value;
alert(title); alert(descr); alert(date); alert(time);
}
</script>
For the refresh, try to get the button outside of the form tags.
Related
Here is the issue:
<p>Choose Type of Request:</p>
<select class="typeOfRequest">
<option> Choose Type of Request</option>
<option value="fundscenter">Funds Center Request</option>
<option value="onlinestore">New Online Store and/or POS</option>
</select>
When "onlinestore" is selected, this dropdown pops up:
<p>Do you need equipment?</p>
<div class="onlinestore box">
<select id="equipmentQuestion" onchange="showDiv('hidden_div', this)">
<option selected>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
**** This is where the issue is: When "Yes" is seleted on the above dropdown, I need this div to pop up:
<div id="hidden_div">
<tr>
<td>Equipment Needed:</td>
<td>
<input type="checkbox" id="ipad_checkbox"> iPad
<br>
<div id="ipadqty_div"> <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35"
min="0"> </input>
</div>
<br>
<input type="checkbox" id="cct_checkbox"> Credit Card Terminal
<div id="cctqty_div"> <!-- THIS DIV POPS UP WHEN CHECKBOX IS CHECKED -->
Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0"> </input>
<br>
</div>
Yet, for some reason, "hidden_div" does not show up when I make the selection "Yes."
I have a feeling that it isn't working because of a parent/child div situation, because I have scoured the internet for solutions, and all of them seem to work on their own, but not in my application. But, I wasn't sure and so I was hoping someone could lead me in the right direction:
Currently, I am using javascript, but if there is a better way, that would be fine with me too.
Here is my complete code with my HTML and JS:
https://jsfiddle.net/audgepodge626/6qomenpw/2/
The issue is with your markup, It's not valid when div is used as a child of table. So I just rearranged some invalid markups to make it work.
/* This function is for the yes/no dropdown for the equipment question */
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value == "Yes" ? 'block' : 'none';
}
/* This function allows for the different types of requests to appear with select dropdown class "typeOfRequest*/
$(document).ready(function() {
$("select.typeOfRequest").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "fundscenter") {
$(".box").not(".fundscenter").hide();
$(".fundscenter").show();
} else if ($(this).attr("value") == "onlinestore") {
$(".box").not(".onlinestore").hide();
$(".onlinestore").show();
} else {
$(".box").hide();
}
});
}).change();
});
/* This section deals with the checkboxes next to "Equipment Needed"*/
$(function() {
$("#ipadqty_div").hide()
$("#ipad_checkbox").click(function() {
if ($(this).is(":checked")) {
$("#ipadqty_div").show();
} else {
$("#ipadqty_div").hide();
}
});
}).change();
$(function() {
$("#cctqty_div").hide();
$("#cct_checkbox").click(function() {
if ($(this).is(":checked")) {
$("#cctqty_div").show();
} else {
$("#cctqty_div").hide();
}
});
}).change();
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<!--icon-->
<link rel="icon" type="" href="../images/favicon.png">
<!-- Bootstrap Core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../css/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--JQuery UI CSS Files-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<!--Fund Auto Complete CSS>
<link href="./vendor/bootstrap/css/auto.css"-->
<!--Custom CSS-->
<link href="../css/scustom.css" rel="stylesheet">
<!--Hide and show divs-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This script is to Show/hide divs based on dropdown selection-->
<script src="dropdown.js"></script>
</head>
<body>
<!--HEADINGS, general page body-->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header" style="float:left">Accounting Services' Request</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<span style="text-align:center;">
Create New Request<!--for subheading, you type here-->
</span>
</div>
</div><br>
<form name="form1" action="nothing.php" method="GET" enctype="multipart/form-data">
<div class="general">
<strong style="float:left">Requester Information</strong>
<table style="float:left">
<select class="typeOfRequest">
<option> Choose Type of Request</option>
<option value="fundscenter">Funds Center Request</option>
<option value="onlinestore">New Online Store and/or POS</option>
</select>
</table>
</div>
<!-- ////////////////////////////// funds center request div //////////////////////////////////////////////// -->
<div class="fundscenter box">
Contents of fundscenter box
</div>
<div class="onlinestore box">
<h1 style="float:left">New Online Store Request</h1>
<table style="float:left">
<tr>
<td>Name of Store:</td>
<td><input name="Requester_Name" size="30" value="<?php echo $row['FIRST_NAME'];?> <?php echo $row['LAST_NAME'];?>" required></td>
</tr>
<tr>
<td>Logo:</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>Access to Reports?:</td>
<td>
<select name="accesstoReports">
<option>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td>Would you like to recieve a notification email?:</td>
<td>
<select class="typeOfRequest">
<option> Select </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr class="displayNotifEmail">
<td>Notification Email Address:</td>
<td><input name="Requester_Email" size="30"></td>
</tr>
<tr>
<td>Contact Us Email:</td>
<td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
</tr>
<tr>
<td>Fund Center:</td>
<td><input id="datepicker" name="Requested_Needed" size="15" required> </td>
</tr>
<tr>
<td>GL (Not required):</td>
<td><input readonly name="Requested_Date" size="15" value="<? echo $Created_Date; ?>"></td>
</tr>
<tr>
<td>Product excel template:<br>
Template
</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>Product Images:</td>
<td><input type="file" name="Requester_Phone" size="10"></td>
</tr>
<tr>
<td>POS:</td>
<td>
<select id="posSelect">
<option>Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</td>
</tr>
<!-- ///////////////////////////////////////////////////////////////////////////////////////// -->
<tr>
<td>Do you need equipment?:</td>
<td>
<select id="equipmentQuestion" name="form_select" onchange="showDiv('hidden_div', this)">
<option selected>Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</tr>
<tr id="hidden_div">
<td>Equipment Needed:</td>
<td>
<input type="checkbox" id="ipad_checkbox"> iPad
<br>
<div id="ipadqty_div">
Qty: <input type="number" id="ipadqty" class="numberBoxes" size="35" min="0" />
</div>
<br>
<input type="checkbox" id="cct_checkbox"> Credit Card Terminal
<div id="cctqty_div">
Qty: <input type="number" id="cctqty" class="numberBoxes" size="35" min="0" />
<br>
</div>
</td>
</tr>
<!-- -->
<!-- /////////////////////////////////////////////////////////////////////////////////////// -->
<tr>
<td>Additional Notes:</td>
<td><textarea rows="4" cols="40"></textarea></td>
</tr>
</table>
</div>
<!--
<input type="submit"></input>
-->
</form>
</body>
</html>
FYI :
The tag can contain the following child elements (and in this order): (Taken from here )
optionally a tag
followed by zero or more tags
followed optionally by a tag
followed optionally by a tag
followed by either zero or more tags or one or more
tags
followed optionally by a tag (but there can only be one
tag child in total)
optionally intermixed with one or more script-supporting elements
(i.e. either tag or ) tag
Is there any way I could create a dynamic data picker like the image given below
This is What I have tried. But I want more interactive date picker. Is there any way I could create I given in the Image. This was not as my staff needed. So, I need some good look date picker for my assignment submit
NaCH.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Challenge</title>
<!-- Viewport-->
<meta name="viewport" content="width=device-width" />
<!-- Favicons
<link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/date.js"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="block2">
<div class="container">
<div class="well"></div>
</div>
</section>
<section id="nach">
<div class="container2" style="margin-top:40px">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<tr class="header">
<td style="padding-left:25px;">Show</td>
<td>
<select>
<option value="" style="display:none;"></option>
<option value="0">KYC <span>COMPLETED</span></option>
<option value="1">MANDATE <span>SENT</span></option>
<option value="2">MANDATE <span>RECEIVED</span></option>
</select>
</td>
</tr>
<tr class="body">
<td >Sl.no</td>
<td style="text-align:left;">Customers</td>
<td>KYC COMPLETED</td>
<td>MANDATE SEND</td>
<td>CLEARED</td>
<td>DISAPPROVED</td>
</tr>
<tr id="calenderdate">
<td>01</td>
<td style="text-align:left;">Ellen <span>De generes</span></td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
<td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
</tr>
<tr id="calenderdate">
<td>02</td>
<td style="text-align:left;">De generes</td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td><input type="text" is-datepicker="1" placeholder="01/02/2016">
<img class="checked" src="img/gear.png" width="10px" height="10px">
</td>
<td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
<td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
</tr>
</table>
</div>
</div>
</section>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
<input type="text" is-datepicker="1" />
$(function() {
$("[is-datepicker=1]").each(function() {
$(this).datepicker({
showOn:"button",
buttonImage: "img/calendar.png",
buttonImageOnly: true
});
});
});
Here, we're giving an attribute for the inputs is-datepicker and telling the JS code to apply the datepicker function to each of these fields.
Use different id's like datepicker1, datepicker2 for multiple date
$( "#datepicker1" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
});
Or use foreach as suggested by Roc Khalil
I am trying to save form input into session variable using ColdFusion. I have tried many methods that I found posted on websites, but none of it is working on my code. Can anyone guide me on this?
Below is my full code.
<html>
<head>
<link rel="STYLESHEET" href="css/iesync2.css" type="text/css">
<link rel="STYLESHEET" href="css/iesync_style(awps).css" type="text/css">
<!--- <link rel="stylesheet" href="css/bootstrap-3.3.6-dist/js/jquery-ui-1.8.10.custom.css" /> --->
<link href="css/bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet">
<script src="css/bootstrap-3.3.6-dist/js/jquery-1.11.3.min.js"></script>
<!--- <script src="css/bootstrap-3.3.6-dist/js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/iesync_popup.js"></script> --->
<script language="javascript" src="css/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<cfoutput>
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
/*window.close();*/
}
}
</script>
</cfoutput>
</head>
<body>
<cfoutput>
<cfif structKeyExists(form,"submit")>
<cfset session.brandName = "#form.brandName#">
</cfif>
<center>
<div>
<form name="frmAddModel" action="" method="post" onSubmit="">
<br />
<table border="0" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td colspan="2" align="left" class="cssSubTitleC">Model</td>
</tr>
<tr class="cssLine2L">
<td align="left">Brand Code (optional)</td>
<td><input type="Text" name="brandcode" size="25" class="cssForm" maxlength="10"></td>
</tr>
<tr class="cssLine2L">
<td align="left" class="cssLine2L">Brand Name<font class="cssRequired">*</font></td>
<td><input type="Text" name="brandName" size="25" class="cssForm" maxlength="10"></td>
</tr>
</table>
<table border="0" width="50%" style="padding: 10px;">
<tr>
<td class="cssButtonLine" colspan="2">
<input type="button" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
</td>
</tr>
</table>
</form>
</div>
</center>
</cfoutput>
</body>
</html>
You are never submitting the form in your JavaScript. Add an id to your form and this $("#form-id").submit(); to your function and try again.
Add an id to your form:
<form name="frmAddModel" id="frmAddModel" action="" method="post" onSubmit="">
Then add this $("#frmAddModel").submit(); to your function:
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
$("##frmAddModel").submit();
/*window.close();*/
}
}
</script>
NOTE: you need to use double hash-tags ## because your JavaScript function is currently wrapped by cfoutput tags. Although that does not appear to be necessary as currently written.
Change field type from 'button' to 'submit':
<input type="submit" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
I have a form hosted at following link:
http://laughtertab.com/url
The code for the form is as below:
What I need is when a person enters a URL from the website, It should replace the given domain from the input and replace with the chosen one from the list. I am new to coding and all I understood so far is I need to parse the URL into domain and path, but I can't make syntax on how to get it done, I will appreciate if I can get help on making it.
<html>
<head>
<title> Laughter Tab - UTM and OGP Propagated URL Builder </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body face='verdana'>
<br><br><br><br>
<center>
<div id="entries">
<form name ="myform">
<div class="table-responsive">
<table style="table">
<tr>
<td>
<right>
Enter original URL without domain -
</right>
</td>
<td>
<input type="text" name="origin"/>
</td>
</tr>
<tr>
<td>
<right>
Select OGP propagated domain -
</right>
</td>
<td>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughtertab.com<br>
<input type="radio" name="ogpd" value="http://www.laughters.xyz/"> laughters.xyz<br>
<input type="radio" name="ogpd" value="http://www.lolrising.rocks/"> lolrising.rocks<br>
<input type="radio" name="ogpd" value="http://www.funspoted.net/"> funspoted.net<br>
<input type="radio" name="ogpd" value="http://www.grumpy-kitten.com/"> grumpy-kitten.com<br>
</td>
</tr>
<tr>
<td>
<right>
Enter your GA Campaign name -
</right>
</td>
<td>
<input type="text" name="campaign"/><br>
</td>
<tr>
<td>
</td>
<td><br>
<right>
<input type="button" value="Generate" onClick="collect(this.form)"/>
</right>
</td>
</tr>
</table>
</div>
</form>
<br><br>
Go Back to Laughter Tab Home Page
</div>
<div id="results"> </div>
<script type="text/javascript">
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
</script>
<center>
</body>
</html>
If I'm understanding correctly. You basically want to look for a domain name if it's in the input
frm.origin
and remove it from the value.
If that's the case then you can match a regex pattern, a generic example is:
/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i
Or you can google your own URL regex if you prefer
but anyways you just apply that to your value and replace it with "" (nothing)
frm.origin.value.replace(/(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "");
Which gives you
function collect(frm)
{
document.getElementById("results").innerHTML+=""+frm.ogpd.value+""+frm.origin.value.replace(/^(http:\/\/|https:\/\/){0,1}([\w\d-]+\.)*([\w\d-]{1,63})(\.(\w{2,3}))\//i, "")+"?utm_source=PNP&utm_medium=P1K&utm_campaign="+frm.campaign.value+"<hr>"
frm.reset();
}
It's not a perfect solution but it should be a good starting point.
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);
})