google.script.run not working: Uncaught InvalidArgumentError: Failed due to illegal value in property: 0

Question

My small form-handling script seems to have somehow broken google.run.script . I invoke it like this:

google.script.run.withSuccessHandler(worked).verwerkForm(this.parentNode);

When running the script here's what i get as an error:

Uncaught InvalidArgumentError: Failed due to illegal value in property: 0

Previous versions were running fine and i have no clue what it is i did that broke the code. Google apps script is, to put it mildly very annoying when it comes to errormessages or documentation. If anyone can help that'd be great!

For reference i've also submitted an issue here: google script issue report

The index file i'm using:

> <?!= include('Stylesheet'); ?> <div class="container">    <h1
> id="PageHeader">World Basketball Coaches Community -
> Inschrijving/Application</h1>    <img
> src="https://drive.google.com/a/apps.howest.be/uc?export=view&id=0B1m3_53fwZc8cmdKYjJvakk3WDA"/>
> <p id="required">* required</p>    <form id="form">
>       <div class="special">
>          <p>Aanhef <span class="required">*</span></p>
>          <label><input type="radio" name="voorvoegsel" value="Mr" checked />Mr</label>
>          <label><input type="radio" name="voorvoegsel" value="Mrs"/>Mrs</label>
>          <label><input type="radio" name="voorvoegsel" value="Miss"/>Miss</label>
>          <span></span>
>       </div>
>       <div>
>          <label for="voornaam">Voornaam /Prénom /First name <span class="required">*</span></label>
>          <input type="text" name="voornaam" id="voornaam" placeholder="Voornaam"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="naam">Naam /Nom /Name <span class="required">*</span></label>
>          <input type="text" name="naam" id="naam" placeholder="Naam"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="geboortedatum">Geboortedatum/ Date de naissance/ Date of birth <span class="required">*</span></label>
>          <input type="date" name="geboortedatum" id="geboortedatum"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="nationaliteit">Nationaliteit / Nationalité / Nationaliteit <span class="required">*</span></label>
>          <input type="text" name="nationaliteit" id="nationaliteit" placeholder="Nationaliteit"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="stad">Stad / Ville / City <span class="required">*</span></label>
>          <input type="text" name="stad" id="stad" placeholder="Stad"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="land">Land / Pays / Country <span class="required">*</span></label>
>          <input type="text" name="land" id="land" placeholder="Land"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="opleiding">Opleiding/ Education <span class="required">*</span></label>
>          <select name="opleiding" id="opleiding" >
>             <option value=" "></option>
>             <option value="secondary school">Secondary school</option>
>             <option value="high school">High school </option>
>             <option value="bachelor">Bachelor</option>
>             <option value="master">Master</option>
>             <option value="university">University</option>
>          </select>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="gsm">Gsm <span class="required">*</span></label>
>          <input type="text" name="gsm" id="gsm" placeholder="+32 000 00 00 00"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="email">E-mail <span class="required">*</span></label>
>          <input type="email" name="email" id="email" placeholder="someone@example.com"/>
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label for="passport">Upload passport or ID copy (PDF or JPEG) <span class="required">*</span></label>
>          <input type="file" name="passport" accept="image/jpeg,application/pdf" id="passport">
>          <span class="fout"></span>
>       </div>  
>       <div>
>          <label for="color_passport">Upload color passport size photo (JPEG)<span class="required">*</span></label>
>          <input type="file" name="pic" accept="image/jpeg" id="color_passport">
>          <span class="fout"></span>
>       </div>
>       <div class="permission">
>          <label for="akkoord">
>             Ik geef mijn akkoord om deze gegevens aan FIBA over te maken in het kader van de "World Basketball Coaches Community". 
>             Je donne mon accord pour le transfert de mes données à la FIBA dans le cadre du projet "World Basketball Coaches Community"
> <span class="required">*</span>
>          </label>
>          <section id="checkPermission"><input type="checkbox" value="ja" id="akkoord"/> Ik ben akkoord</section> 
>          <span class="fout"></span>
>       </div>
>       <div>
>          <label></label>
>          <input type="button" value="Submit" onclick="submit()"/>
>       </div>    </form> </div> <div id="result" class='hide'>
>     </div> <?!= include('testJavascript'); ?>

TestJavascript i'm using:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function submit() {
      google.script.run.withSuccessHandler(worked).verwerkForm(this.parentNode);
}

function worked() {
   $(".container").remove();
   $("#result").html('<h1>Dank je uw registratie is een succes!</h1>').removeClass('hide');
}
</script>

and the css:

<style>
body {
   font-family: Verdana,Arial,sans-serif;
   background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.08, #0D2C91),
      color-stop(0.76, #0788B3)
   );
   background-image: -o-linear-gradient(bottom, #0D2C91 8%, #0788B3 76%);
   background-image: -moz-linear-gradient(bottom, #0D2C91 8%, #0788B3 76%);
   background-image: -webkit-linear-gradient(bottom, #0D2C91 8%, #0788B3 76%);
   background-image: -ms-linear-gradient(bottom, #0D2C91 8%, #0788B3 76%);
   background-image: linear-gradient(to bottom, #0D2C91 8%, #0788B3 76%);
}

h1#PageHeader {
   margin-bottom:10px;
}

.container {
   margin: 0 auto;
   width: 80%;
   border-left: 1px solid blue;
   border-right: 1px solid blue;
   background: white;
   padding: 10px 10px;
   text-align:center;
}

.container form{
   display:inline-block;
}

.hide{
   display: none;
}

h1 {
   margin: 0 auto;
   display: block;
}

img {
   width: 20%;
   margin: 0 auto;
   display: block;
}

.required {
   color: #ff4444;
   font-weight: 400;
}

span.fout {
   display:block;
   color : #ff4444;
   margin-left: 36%;
}

input.fout {
   color : #ff4444;
   border: 1px solid red !important;
}

form {
   width:80%;
   text-align:left;
}

form div {
   margin: 10px 0;
   display: block;
}

form div label {
   box-sizing: border-box;
   display: inline-block;
   padding: 5px;
   width: 35%;
   font-weight: 800;
   font-family: Calibri;
}

input, select {
   display: inline-block;
   width: 50%;
}

input[type="text"], input[type="date"], input[type="email"], #opleiding {
   padding: 4px;
   font-size: 14px;
   line-height: 1.42857143;
   color: #555;
   background-color: #fff;
   background-image: none;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

#opleiding {
   width: 50.8%;
}

input[type="text"], input[type="date"], input[type="email"]{
   height: 20px;
}

select{
   height:29px;
}

.special p {
   display: inline-block;
   padding: 5px;
   width: 32%;
   font-weight: 800;
}

.special label {
   width: 10%;
   font-weight: 400;
   display: inline-block;
}

#checkPermission {
   font-family: Calibri;
   font-weight:normal;
   font-size: 16px;
   display: inline-block;
}

.permission label {

}

input[type="checkbox"]{
   width: 20px;
}

input:focus {
   border :1px solid blue;
}

input[type="button"] {
   color: #fff;
   background-color: #428bca;
   border-color: #357ebd;
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
}

#required {
   color: #ff4444;
}
</style>

The VerwerkForm function:

 function verwerkForm(e){
   //check of alle input correct is
   var statusObject = checkInput(e);
   if(!statusObject.inOrde){
     Logger.log("serversidecheck mislukt"); 
     return false;
//     throw Error("De input is niet correct.  Volgende fouten werden gevonden: " + statusObject.foutboodschappen);
   }

   //sla de files in variabelen op en stel direct ook hun naam correct in
   var fileBlobP = doeSetName(e, e.passport, "_passport");
   var fileBlobPic = doeSetName(e, e.pic, "_passport_in_color");

   //creating files
   var docPass = DocsList.getFolderById(docP).createFile(fileBlobP);
   var docColorPass = DocsList.getFolderById(docPic).createFile(fileBlobPic);

   //maak gegevens om toe te voegen klaar, open dan de spreadsheet en voeg de rij met gegevens toe
   var rijGegevens = [e.voorvoegsel, e.voornaam, e.naam, e.geboorteDatum, e.nationaliteit, e.stad, e.land, e.opleiding, e.gsm, e.email, docPass.getUrl(), docColorPass.getUrl(), new Date()];
   SpreadsheetApp.openById(idSpreadsheet).getActiveSheet().appendRow(rijGegevens);
}

SOLUTION The error turned out to be because i forgot to include a return statement for the successful case in my process form method. A simple "return ok" at

Answer 1

GAS can't pass on DIVs, you need to send in the form, either use $( "#form" )[0] or restructure your HTML so that the button parent is the form, there can be tables above it but not DIVs.