I have a form with 5 fields connected to a Google Spreadsheet. When my user input data in the first 2 fields the 3 other fields update according to the data of the Spreadsheet.
My script is working perfectly with one criteria but I need second criteria in order to update the 3 other fields.
My HTML :
<!DOCTYPE HTML>
<HTML>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!=include("page-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<input id="ds" type="text" class="validate">
<label for="ds">Contract Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pn" type="text" class="validate">
<label for="pn">Number</label>
</div>
</div>
<h5> RESULTS </h5>
<div class="row">
<div class="input-field col s12">
<input disabled id="est" type="text" class="validate">
<label for="est" class="active">Validity date from</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est1" type="text" class="validate">
<label for="est1" class="active">Expiry Date</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est2" type="text" class="validate">
<label for="est2" class="active">Type</label>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include("page-js"); ?>
</body>
</html>
My script have to do : Search value of "est", "est1", "est2" for "ds" AND "pn"
The script is :
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById("ds").addEventListener("input",getEstimate)
function getEstimate(){
var contractNumber = document.getElementById("ds").value;
if(contractNumber.length === 8){
google.script.run.withSuccessHandler(upadteEstimate).getDateStart(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate1).getDateExpiry(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate2).getInsurancePlan(contractNumber);
}
}
function upadteEstimate(DateStart){
document.getElementById("est").value = DateStart;
M.updateTextFields();
}
function upadteEstimate1(DateExpiry){
document.getElementById("est1").value = DateExpiry;
M.updateTextFields();
}
function upadteEstimate2(InsurancePlan){
document.getElementById("est2").value = InsurancePlan;
M.updateTextFields();
}
</script>
I have tried a lot of things without success. If someone could give me some tips or advise, It will help a lot...
Thank you
J
Related
Updated Codeenter image description here
If i remove
Its show reuried filed notoifcation in input filed however if i add the jquery it's allowing me to submit the data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
Form Input Field Required attribute is not working in Google app script HTML web app
Using materialize CSS in my web app -In both the input filed have added Required attribute however on click submit button not getting any notification in input filed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email2" type="email" class="validate" required="" aria-required="true">
<label for="email2">Email</label>
</div>
<div class="input-field col s12">
<input id="example" name="example" type="text" class="validate" required="" aria-required="true">
<label for="example">Field</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit" name="action" onclick="submitForm(this)">Submit</button>
</div>
</div>
</form>
</div>
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["FirstName"] = $("#email2").val();
jsonObj["MiddleName"] = $("#example").val();
jsonObj["Submit"] = $(btnClicked).text();
google.script.run.withSuccessHandler(action).saveDate(jsonObj);
}
</script>
</body>
</html>
I'm using "script app" from google sheets and I need to allow line break in the "userform" that I have created, I will use this to feed data to my google sheet and some of the items need multiple lines in the same cell.
Is there anyway I can do that?
EXAMPLE
EXAMPLE 2
CODE
function showAdicionarClienteHTML() {
var template = HtmlService.createTemplateFromFile("AdicionarClienteHTML");
var html = template.evaluate();
html.setTitle("ADICIONAR CLIENTE").setHeight(800).setWidth(800);
SpreadsheetApp.getUi().showModalDialog(html, "Adicionar novo cliente:");
//.showModalDialog(html, "Adicionar novo cliente:");
//.showSidebar(html);
}
function appendData(data){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Clientes");
ws.appendRow([data.name,data.login,data.sninv,data.numero,data.sndtl,data.tele,data.regiao]);
}
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="nome" type="text" class="validate">
<label for="nome">Nome</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">mail_outline</i>
<input id="login" type="text" class="validate">
<label for="login">E-Mail ou Login</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">select_all</i>
<input id="sninv" type="text" class="validate">
<label for="sninv">S/N do Inversor</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">format_list_numberedl</i>
<input id="numero" type="text" class="validate">
<label for="numero">Numero do Inversor</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">select_all</i>
<input id="sndtl" type="text" class="validate">
<label for="sndtl">S/N do Datalogger</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">phone_in_talk</i>
<input id="tele" type="tel" class="validate">
<label for="tele">Telefone</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">explore</i>
<input id="regiao" type="text" class="validate">
<label for="regiao">Região</label>
</div>
<button class="btn waves-effect waves-light" type="submit" name="action" id="btn">Adicionar
<i class="material-icons right">send</i>
</button>
</div><!--END ROW -->
</div><!--END CONTAINER -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var nameBox = document.getElementById("nome");
var loginBox = document.getElementById("login");
var sninvBox = document.getElementById("sninv");
var numeroBox = document.getElementById("numero");
var sndtlBox = document.getElementById("sndtl");
var teleBox = document.getElementById("tele");
var regiaoBox = document.getElementById("regiao");
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var name = nameBox.value;
var login = loginBox.value;
var sninv = sninvBox.value;
var numero = numeroBox.value;
var sndtl = sndtlBox.value;
var tele = teleBox.value;
var regiao = regiaoBox.value;
if(name.trim().length == 0 || login.trim().length == 0 || sninv.trim().length == 0 || numero.trim().length == 0 || sndtl.trim().length == 0 || tele.trim().length == 0 || regiao.trim().length == 0){
//handle error
M.toast({html: 'Preencha todos os campos!'})
} else {
var data ={
name: nameBox.value,
login: loginBox.value,
sninv: sninvBox.value,
numero: numeroBox.value,
sndtl: sndtlBox.value,
tele: teleBox.value,
regiao: regiaoBox.value
};
google.script.run.appendData(data);
}//CLOSE ELSE
}//CLOSE ADD RECORD
</script>
</body>
</html>
The <input> tag doesn't support line breaks. If you want to add a multi-line input, you have to use <textarea> instead. So you should change all the elements which could potentially have several lines from <input> to <textarea>.
That is, you should change these lines:
<input id="sninv" type="text" class="validate">
<input id="numero" type="text" class="validate">
<input id="sndtl" type="text" class="validate">
To these ones:
<textarea id="sninv" type="text" class="validate"></textarea>
<textarea id="numero" type="text" class="validate"></textarea>
<textarea id="sndtl" type="text" class="validate"></textarea>
This way, you can add multi-line text, which will still be a multi-line when you send it to the spreadsheet.
Reference:
<textarea>
I hope this is of any help.
I have created a dynamic inline form with bootstrap 4 and javascript. I would like to fit all my fields in one row when viewed in a desktop/laptop browser. In the mobile view, I want to stack all my fields one below the other and they should be of equal width.
I tried the bootstrap grid column layout and also attempted to fix a width for each field but it does not seem to be working. Please help.
The HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
The javascript code is provided below:
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
I am unable to fit all the fields in one row in desktop view. I want my inline form to be mobile-responsive as well. Please advise.
See I have changed few things in your code . What I did was just added col-sm for div classes. You can find more about bootstrap grid system via this link. Bootstrap Grid System . Please go through the code because I have removed some codes from your original code. I think you expect this.To see the result please expan the snippet and then with Inspect Element in you browser and then navigate to mobile view . Thanks
Desktop view
Mobile view
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
This is my .gs file:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
return rs;
}
and this is my .html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get listing price of a car </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <?=result; ?> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function set_sum(result){
document.getElementById("result").innetHTML=result;
}
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
</script>
</body>
</html>
I would like to return to the user the sum of two numbers that he chooses. Namely, the user enters two numbers, presses the button and then I would like to show him back the sum of it . However, I can not find a way to do this. Can anyone help me please?
you can use withSuccessHandler() to return the sum calculated in code.gs file and set the value in a html element on the successHandler function.
.gs File:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page")
return tmp.evaluate()
}
function get_sum(el1,el2) {
var rs=parseInt(el1)+ parseInt(el2)
Logger.log(rs)
return rs;
}
.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<h1> Get sum of two values </h1>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">First element</label>
<input type="text" class="form-control" id="el1" placeholder="Enter the first number">
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput">Second element</label>
<input type="text" class="form-control" id="el2" placeholder="Enter the first number">
</div>
<div class="col-sm-5">
<button id="btn" class="btn btn-primary">Search</button>
</div>
<div class="form-group col-sm-5">
<label for="formGroupExampleInput"> <div id="resultVal" name="resultVal"> </div> </label>
<input type="text" class="form-control" id="result">
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var el1=document.getElementById("el1").value;
var el2=document.getElementById("el2").value;
google.script.run.withSuccessHandler(set_sum).get_sum(el1,el2)
}
function set_sum(result){
document.getElementById("result").value=result;
}
</script>
</body>
</html>
you can refer this article
I am trying to create a registration form in Bootstrap and then connecting it to the Oracle Database but the data entered by the user isn't sending any value to the database. Please suggest what editing I should do.
<!DOCTYPE html>
<html lang="en">
<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>Home - Student Registration Form</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">
<style>
.error{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<form id="regform" class="form-horizontal" action="NewFile.jsp">
<fieldset>
<!-- Form Name -->
<legend>Student Registration</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-4">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-4">
<input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="dob">Date of birth</label>
<div class="col-md-4">
<input id="dob" name="dob" type="text" placeholder="Date of birth" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="age">Age</label>
<div class="col-md-4">
<input id="age" name="age" type="text" placeholder="Age" class="form-control input-md" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sex">Sex</label>
<div class="col-md-4">
<label class="radio-inline"><input type="radio" name="sex" value="Male">Male</label>
<label class="radio-inline"><input type="radio" name="sex" value="Female">Female</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="subjects">Subjects</label>
<div class="col-md-4">
<select id="subjects" name="subjects" class="form-control">
<option value="1">Database</option>
<option value="2">ADA</option>
<option value="3">Networking</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddress">Local Address</label>
<div class="col-md-4">
<textarea class="form-control" id="localaddress" name="localaddress"></textarea>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="localaddresscheckbox">Permenant address</label>
<div class="col-md-4">
<label class="checkbox-inline" for="localaddresscheckbox">
<input type="checkbox" name="localaddresscheckbox" id="localaddresscheckbox" value="1">
Copy Local Address to permanent Address
</label>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="permenantaddress">Permenant Address</label>
<div class="col-md-4">
<textarea class="form-control" id="permenantaddress" name="permenantaddress"></textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-4">
<button id="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
(function() {
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");
$("#regform").validate({
rules: {
dob: "required",
localaddress: "required",
permenantaddress: "required",
firstname: {
lettersonly: true,
required: true
},
lastname: {
lettersonly: true,
required: true
}
},
submitHandler: function(form) {
form.submit();
}
});
//init datepicker
$('#dob').datepicker({
'format': 'yyyy-mm-dd',
'autoclose': true
});
//copy localaddress to permenant address on checkbox click
$('#localaddresscheckbox').click(function(){
if($(this).is(':checked')) {
var localaddress = $('#localaddress').val();
$('#permenantaddress').val(localaddress); //copy local address to permenant address box
}
else {
$('#permenantaddress').val('');
}
});
//age handler
$('#dob').datepicker().on('changeDate', function (ev) {
//get current date
var today = new Date();
var currentYear = today.getFullYear(); //current year
var selectedYear = $(this).val().split('-')[0]; //selected dob year
var age = Number(currentYear) - Number(selectedYear);
$('#age').val(age);
});
})();
</script>
</body>
</html>
now the data from the local address is not being copied to the permanent address.
The server side code is as follows:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#page import="java.sql.*" %>
<!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>Insert title here</title>
</head>
<body>
<%
String firstname=request.getParameter("firstname");
System.out.println("First name="+firstname);
String lastname=request.getParameter("lastname");
System.out.println("Last name="+lastname);
String dob=request.getParameter("dob");
System.out.println("Date of Birth="+dob);
String age=request.getParameter("age");
System.out.println("Age="+age);
String sex=request.getParameter("sex");
System.out.println("Sex="+sex);
String subjects=request.getParameter("subjects");
System.out.println("Subject="+subjects);
String localaddresscheckbox=request.getParameter("localaddresscheckbox");
System.out.println("Local Address="+localaddresscheckbox);
String permanentaddress=request.getParameter("permanentaddress");
System.out.println("Permanent Address="+permanentaddress);
try
{
//System.out.println(0);
//Class.forName("oracle.jdbc.driver.OracleDriver");
Class.forName("oracle.jdbc.driver.OracleDriver");
System.out.println(1);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:xe","Subhankar","oracle07");
System.out.println(2);
Statement st= con.createStatement();
//String sql = "INSERT INTO STUDENT_DETAILS VALUES (firstname,lastname,dob,age,sex,subjects,localaddresscheckbox,permanentaddress)";
String sql="INSERT INTO STUDENT_DETAILS (first_name,last_name,date_of_birth,age,sex,subject,local_address,permanent_address) VALUES ('"+firstname+"','"+lastname+"','"+dob+"','"+age+"','"+sex+"','"+subjects+"','"+localaddresscheckbox+"','"+permanentaddress+"')";
st.executeUpdate(sql);
//
//ResultSet rs=st.executeQuery("select * from studentdetails where studentid="+studentId);
}catch(Exception e)
{
e.printStackTrace();
}
%>
</body>
</html>
You have not set the action attribute.
If you want to submit form to the same page Use
action="<?php echo $_SERVER['REQUEST_URI'] ?>"