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