2

I am having difficulty getting this to work, everything works except the dependent dropdown, am I doing something wrong?

I am trying to add this to a google sheet script working with a sheet, it all seems to work except the dependent dropdown.

This is the error I'm getting:

Uncaught ReferenceError: nameCheck is not defined

if I test this code on an HTML tester it seems to work correctly, however, it does not seem to work in google sheets.

<html lang="en">
<body>
<h4>Add a Customer</h4>
 Select a Date: <input type="date" id="date" name="start" class="mb-3">
<div>
     Sales Rep:&nbsp;&nbsp;
    <select id="rep">
        <option>select option</option>
        <option>Neil</option>
        <option>Dave</option>
        <option>Bob</option>
        <option>Trick</option>
    </select>
</div>
 &nbsp;&nbsp;
<div class="add-customer-form">
    <div class="form-group">
        <label for="first-name">Company name : </label>
        <input type="text" class="form-control" id="first-name">
    </div>
    <div>
         Product type:&nbsp;&nbsp;
        <select id="input" onchange="nameCheck()">
            <option>select option</option>
            <option>CASH</option>
            <option>Training</option>
            <option>Optional Modules</option>
            <option>Annual Additional Modules</option>
            <option>Hosting Existing user moving Licence</option>
            <option>Rentals</option>
            <option>Existing Customer - Rentals</option>
            <option>Existing Customer - CASH</option>
            <option>other</option>
            google.script.run.nameCheck();
            console.log(input);
        </select>
        <div>
             Product:&nbsp;&nbsp;
            <select id="output" onchange="nameCheck()">
            </select>
                 

        </div>
    </div>
     &nbsp;&nbsp;
</div>
<div class="form-group">
    <label for="first-name">Quantity : </label>
    <input type="number" class="form-control" id="last-name">
</div>
<div class="form-group mt-3">
    <label for="phone-number">Previous CAD : </label>
    <input type="text" class="form-control" id="phone-number">
    <div class="form-group">
        <label for="sales-price">Sales Price : </label>
        <input type="number" class="form-control" id="salesP">
    </div>
    <div class="form-group">
        <label for="deposit">Deposit : </label>
        <input type="number" class="form-control" id="deposit">
    </div>
    <div class="form-group">
        <label for="install">No. Intallments : </label>
        <input type="number" class="form-control" id="install">
    </div>
    <div class="form-group">
        <label for="invoice">Invoice Nr : </label>
        <input type="text" class="form-control" id="invoice">
    </div>
    <div class="form-group">
        <label for="Notes">Notes : </label>
        <input type="text" class="form-control" id="notes">
    </div>
     &nbsp;&nbsp; <button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
     Successfully Added!!
</div>
<script>     

function nameCheck(){
     var a=document.getElementById("input").value;
                console.log(a);
                if(a==="CASH")
                {
                    var arr=["Cash 1","cash2"];
                }
                else if(a==="Existing Customer - CASH")
                {
                    var arr=["existing 1", "existing 2"];
                }
                    else if(a==="Training")
                {
                    var arr=["Level 1 Training (in-house)","Level 2 Training (in-house)","Level 3 Training (in-house)","Onsite Training (up to 4 people)","Training Online per hour","Principles of Design (Renee Mascari)","Graham Hayden Sales/Care","KBBConnect training (per hours)","Training Solus (in-house) - 8 people"];
                }
                var string="";
                for(i=0;i<arr.length;i++)
                {
                    string=string+"<option value="+arr[i]+">"+arr[i]+"</option>";
                }
                document.getElementById("output").innerHTML=string;
            }
                        
        </script>
</body>
</html>

Screenshot off dialog:

Screenshot off dialog

Oleg Valter is with Ukraine
  • 9,619
  • 8
  • 37
  • 59
Henri van Lier
  • 21
  • 2
  • Define what "does not work" means (please *never* ask a question without determining specifics). Also, what do you mean by "in google sheets"? – Oleg Valter is with Ukraine Aug 11 '20 at 09:20
  • I'm using script editor in google sheets, what workes off an HTML page – Henri van Lier Aug 11 '20 at 09:28
  • Henri, sorry, but that does not make sense to me. What exactly are you doing? Custom dialog/menu? A sidebar? A Web App that happens to also be a bound script project? Also, the script editor is just a web IDE offered by Google as part of the Apps Script platform. – Oleg Valter is with Ukraine Aug 11 '20 at 09:39
  • i am creating a sales board, but the data will be added via the app. so currently im just trying to get the dependant dropdown to work, so if product type is selected it will give me a product dependant on what is in product type – Henri van Lier Aug 11 '20 at 09:45
  • so if Product type is "cash" then it should give me option on the product for "Cash 1" or "cash2" and if "Existing Customer - CASH is selected on product type then the product should give me options of "existing 1" and "existing 2" – Henri van Lier Aug 11 '20 at 09:47
  • Henri, apologies, but I am not asking you about the type of the app or its purpose. I am asking how are you using the html file - is it for a dialog, sidebar, or a web app... – Oleg Valter is with Ukraine Aug 11 '20 at 09:47
  • 1
    my apologies it's via a dialog , i will add a screenshot to the post – Henri van Lier Aug 11 '20 at 09:52
  • Henri, thanks for clarifying (as you see below, the uncertainty might attract "shots in the dark" type of answers). Regarding the issue: try adding the `change` event handler with `addEventListener`, not via global attribute `onchange`. Btw, does the error happen immediately upon load? – Oleg Valter is with Ukraine Aug 11 '20 at 09:57
  • What are the purpose of `google.script.run.nameCheck();` and `console.log(input);`? Also add the code that you use to open the dialog. Ref [mcve]. – Rubén Aug 13 '20 at 19:16

1 Answers1

1

The code in the question have several issues, i.e.:

  1. Bad HTML

Remove google.script.run.nameCheck(); and console.log(input); from

<select id="input" onchange="nameCheck()">
    <option>select option</option>
    <option>CASH</option>
    <option>Training</option>
    <option>Optional Modules</option>
    <option>Annual Additional Modules</option>
    <option>Hosting Existing user moving Licence</option>
    <option>Rentals</option>
    <option>Existing Customer - Rentals</option>
    <option>Existing Customer - CASH</option>
    <option>other</option>
    google.script.run.nameCheck();
    console.log(input);
 </select>

The above because JavaScript can't be included that way between HTML tags.

  1. Use of HTML attributes for handling events.

Instead of

<select id="input" onchange="nameCheck()">

Use

<select id="input">

then between <script></script> use something like

document.getElementById('input').onchange = nameCheck;

or use addEventListener

Related

Rubén
  • 34,714
  • 9
  • 70
  • 166