So I've been spinning my wheels for some time now... I am new to HTML, but the formatting and code all seems correct, but of course if it was, I would not be here right now...
I am attempting to create a modalDialog() in Google Apps Script which basically just takes a few pieces of information as inputs and moves them to a central location for data storage. The actual process of moving the data is working perfectly, but in some cases, I want to check for errors in entry before the user can actually submit the data.
The HTML, shown below, collects all that data and pops up an alert if the "personal number" is incorrect.
<!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">
<form class="col s12" id="Formid">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="lawyername" type="text" class="validate">
<label for="lawyername">Lawyer First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="clientname" type="text" class="validate">
<label for="clientname">Client Name</label>
</div>
<form action="#">
<fieldset>
<p>
<label>
<input class="with-gap" value="individual" id="check1" name="group1" type="radio" checked />
<span>Individual</span>
</label>
</p>
<p>
<label>
<input class="with-gap" value="corporation" id="check1" name="group1" type="radio" />
<span>Corporation</span>
</label>
</p>
</fieldset>
</form>
<div class="input-field col s12">
<i class="material-icons prefix">input</i>
<input id="clientpersonnummer" type="text" class="validate">
<label for="clientpersonnummer">Personnummber (YYMMDD-XXXX)</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">input</i>
<input id="address" type="text" class="validate">
<label for="address">Client Address</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Add Client
<i class="material-icons right">send</i>
</button>
</div>
</div> <!-- END ROW -->
</form>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
var lName = document.getElementById("lawyername");
var cName = document.getElementById("clientname");
var personnum = document.getElementById("clientpersonnummer");
var address = document.getElementById("address");
var radiobtn = document.querySelector('input[name="group1"]:checked');
document.getElementById("btn").addEventListener("click",addRecord);
function addRecord(){
var radiobtn = document.querySelector('input[name="group1"]:checked');
var personnum = document.getElementById("clientpersonnummer").value;
var indHyp = personnum.indexOf("-");
var sStart = personnum.slice(0,indHyp);
var sFin = personnum.slice(indHyp + 1, personnum.length);
if (sStart.length !== 6 || sFin.length !== 4) {
alert("Check Personal number! Format MUST be 'XXXXXX-XXXX'");
} else {
var data = {
lawyer: lName.value,
client: cName.value,
pn: personnum.value,
address: address.value,
radio: radiobtn.value
};
google.script.run.appendData(data);
}//End If Conditional
}//End addRecord FN
</script>
</body>
</html>
I then run this using the .GS script shown below
function showUserForm() {
var template = HtmlService.createTemplateFromFile("userform");
var html = template.evaluate();
html.setHeight(650);
SpreadsheetApp.getUi().showModalDialog(html, "Enter New Client Data");
}
function appendData(data) {
var radout = data.radio;
if (radout == 'individual') {
var wsurl = 'urlLinkHere';
var destinationSpreadSheet = SpreadsheetApp.openByUrl(wsurl);
var ws = destinationSpreadSheet.getSheets()[1];
} else if (radout == 'corporation') {
var wsurl = 'urlLinkHere';
var destinationSpreadSheet = SpreadsheetApp.openByUrl(wsurl);
var ws = destinationSpreadSheet.getSheets()[2];
} else {
alert('Selection Unclear');
}
ws.appendRow([data.client, data.pn, data.address, data.lawyer]);
SpreadsheetApp.getUi().alert("New Data Submitted");
}
I followed a tutorial to get mostly this far, but I can't seem to stop the modalDialog from clearing completely after each time the eventListener catches a "submit". And to be completely clear, I don't mean that the fields are clearing after submit, the actual HTML inside the modalDialog goes away.
Also correct a few other problems. Look at Reuben's references as he covered all of the issue in his answer.
<!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">
<form class="col s12" id="Formid">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="lawyername" type="text" class="validate">
<label for="lawyername">Lawyer First Name</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="clientname" type="text" class="validate">
<label for="clientname">Client Name</label>
</div>
<fieldset>
<p>
<label>
<input class="with-gap" value="individual" id="check1" name="group1" type="radio" checked />
<span>Individual</span>
</label>
</p>
<p>
<label>
<input class="with-gap" value="corporation" id="check1" name="group1" type="radio" />
<span>Corporation</span>
</label>
</p>
</fieldset>
<div class="input-field col s12">
<i class="material-icons prefix">input</i>
<input id="clientpersonnummer" type="text" class="validate">
<label for="clientpersonnummer">Personnummber (YYMMDD-XXXX)</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">input</i>
<input id="address" type="text" class="validate">
<label for="address">Client Address</label>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="btn">Add Client
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
window.onload = function() {
document.getElementById("btn").addEventListener("click",function(e) {
e.preventDefault();
var lName = document.getElementById("lawyername");
var cName = document.getElementById("clientname");
var personnum = document.getElementById("clientpersonnummer");
var address = document.getElementById("address");
var radiobtn = document.querySelector('input[name="group1"]:checked');
console.log("addrecord");
var radiobtn = document.querySelector('input[name="group1"]:checked');
var personnum = document.getElementById("clientpersonnummer").value;
var indHyp = personnum.indexOf("-");
var sStart = personnum.slice(0,indHyp);
var sFin = personnum.slice(indHyp + 1, personnum.length);
console.log('pn: %s sfin: %s sStart:%s',personnum,sFin,sStart);
if (sStart.length !== 6 || sFin.length !== 4) {
alert("Check Personal number! Format MUST be 'XXXXXX-XXXX'");
} else {
var data = {lawyer: lName.value,client: cName.value,pn: personnum,address: address.value,radio: radiobtn.value };
console.log('Data: %s',JSON.stringify(data));
google.script.run.appendmyData(data);
}
},false);
}
</script>
</body>
</html>
I tried all of Reuben's suggestions but could not get them to work so I reopened the question. Perhaps someone else can help you. I tend to keep my html simple and old school.
I was wrong the e.preventDefault() does work, I left off the () and so now this code is working as you expect.