Question

我使用top answer to this question构建了一个表单，该表单随文件上传一起提供给表单。现在我又撞到了另一面墙。

我有类别和子类别。我希望子类别只显示其父类别已被选中。我只是无法弄清楚A）我需要把代码放在哪里（在我们的网站上它是正确的HTML），我已经尝试将它放在HTML文件和Code.gs文件中，或者B）如果我正在使用的代码甚至是正确的。

Here's the form - “Co-Op类别”是父类别，我为每个类别隐藏了包含“子类别”的div

HTML：

   <script>
  // Javascript function called by "submit" button handler,
  // to show results.
  function updateOutput(resultHtml) {
    toggle_visibility('inProgress');
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

  // From blog.movalog.com/a/javascript-toggle-visibility/
  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }
</script>

<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<form id="myForm">

    Name: <input name="name" type="text" /><br/>
    Co-Op Amount: <input name="amount" type="text" /><br/>
    Co-Op Split:<br />
    <input type="radio" name="split" value="100%">100&#37;<br>
    <input type="radio" name="split" value="50/50">50/50<br>
    <input type="radio" name="split" value="75/25">75/25<br>
    Other: <input type="text" name="split" /><br />
    Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
    Brand:  
    <select name="brand">
    <option>Select Option</option>
    <option>Bluebird</option>
    <option>Brown</option>
    <option>Ferris</option>
    <option>Giant Vac</option>
    <option>Honda</option>
    <option>Hurricane</option>
    <option>Little Wonder</option>
    <option>RedMax</option>
    <option>SCAG</option>
    <option>Snapper Pro</option>
    <option>Sno-Way</option>
    <option>SnowEx</option>
    <option>Wright</option>
    <option>Ybravo</option>
    </select><br/>
    Co-Op Category:<br />
    <input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
    <input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
    <input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
    <input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
    <input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
    <input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
     Other: <input type="text" id="other" name="category" /><br />

    <div class="dealer box" style="display: none;">DEALER</div> 
    <div class="online box" style="display: none;">ONLINE</div> 
    <div class="meetings box" style="display: none;">MEETINGS</div> 
    <div class="advertising box" style="display: none;">ADVERTISING</div> 
    <div class="pricing box" style="display: none;">PRICING</div>  
    <div class="correspondence box" style="display: none;">CORRESPONDENCE</div> 


    Email: <input name="email" type="text" /><br/>
    Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
    School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
  <input type="button" value="Submit"
      onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
</form>
</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>

<div id="output">
  <!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>

Code.gs：

var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
  var fileBlob = theForm.myFile;
  var folder = DriveApp.getFolderById(folderId);
  var doc = folder.createFile(fileBlob);

  // Fill in response template
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  var name = template.name = theForm.name;
  var amount = template.amount = theForm.amount;
  var split = template.split = theForm.split;
  var reason = template.reason = theForm.split;
  var brand = template.brand = theForm.brand;
  var category = template.category = theForm.category;
  var message = template.message = theForm.message;
  var email = template.email = theForm.email; 
  var fileUrl = template.fileUrl = doc.getUrl();

  // Record submission in spreadsheet
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 9).setValues([[name,amount,split,reason,category,brand,message,email,fileUrl]]);

  // Return HTML text for display in page.
  return template.evaluate().getContent();
}

//Toggle Secondary Categories
function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("id")=="dealer"){
            $(".box").not(".dealer").hide();
            $(".dealer").show();
        }
        if($(this).attr("id")=="online"){
            $(".box").not(".online").hide();
            $(".online").show();
        }
        if($(this).attr("id")=="advertising"){
            $(".box").not(".advertising").hide();
            $(".advertising").show();
        }
        if($(this).attr("id")=="pricing"){
            $(".box").not(".pricing").hide();
            $(".pricing").show();
        }
        if($(this).attr("id")=="correspondence"){
            $(".box").not(".correspondence").hide();
            $(".correspondence").show();
        }
        if($(this).attr("id")=="meetings"){
            $(".box").not(".meetings").hide();
            $(".meetings").show();
        }
        if($(this).attr("id")=="other"){
            $(".box").not(".other").hide();
            $(".other").show();
        }
    });
};

这一点特别是我遇到麻烦的地方：

//Toggle Secondary Categories
    function(){
        $('input[type="radio"]').click(function(){
            if($(this).attr("id")=="dealer"){
                $(".box").not(".dealer").hide();
                $(".dealer").show();
            }
            if($(this).attr("id")=="online"){
                $(".box").not(".online").hide();
                $(".online").show();
            }
            if($(this).attr("id")=="advertising"){
                $(".box").not(".advertising").hide();
                $(".advertising").show();
            }
            if($(this).attr("id")=="pricing"){
                $(".box").not(".pricing").hide();
                $(".pricing").show();
            }
            if($(this).attr("id")=="correspondence"){
                $(".box").not(".correspondence").hide();
                $(".correspondence").show();
            }
            if($(this).attr("id")=="meetings"){
                $(".box").not(".meetings").hide();
                $(".meetings").show();
            }
            if($(this).attr("id")=="other"){
                $(".box").not(".other").hide();
                $(".other").show();
            }
        });
    };

Answer 1

意外令牌是由function(){行引起的，这是jQuery document ready function的无效语法。你应该：

$(function(){
    $('input[type="radio"]').click(function(){
    ...
    });
});

修复后，您的下一个错误将是：

未捕获的ReferenceError：$未定义

那是因为你还没有包含jQuery，这是$符号在$(this)等语句中引用的内容。您有关于在Google Apps脚本中使用jQuery的更多提示，请阅读this。简而言之：您需要添加以下内容，根据您打算使用的任何jQuery版本进行调整：

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

更新了Form.html，根据您的意图显示了相应的<div>。它还包括推荐的doctype，html，head和body标签：

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
</head>

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
    // Javascript function called by "submit" button handler,
    // to show results.
    function updateOutput(resultHtml) {
      toggle_visibility('inProgress');
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = resultHtml;
    }

    // From blog.movalog.com/a/javascript-toggle-visibility/
    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
        e.style.display = 'none';
      else
        e.style.display = 'block';
    }

    //Toggle Secondary Categories
    $(function() {
      $('input[type="radio"]').click(function() {
        if ($(this).attr("id") == "dealer") {
          $(".box").not(".dealer").hide();
          $(".dealer").show();
        }
        if ($(this).attr("id") == "online") {
          $(".box").not(".online").hide();
          $(".online").show();
        }
        if ($(this).attr("id") == "advertising") {
          $(".box").not(".advertising").hide();
          $(".advertising").show();
        }
        if ($(this).attr("id") == "pricing") {
          $(".box").not(".pricing").hide();
          $(".pricing").show();
        }
        if ($(this).attr("id") == "correspondence") {
          $(".box").not(".correspondence").hide();
          $(".correspondence").show();
        }
        if ($(this).attr("id") == "meetings") {
          $(".box").not(".meetings").hide();
          $(".meetings").show();
        }
        if ($(this).attr("id") == "other") {
          $(".box").not(".other").hide();
          $(".other").show();
        }
      });
    });
  </script>

  <div id="formDiv">
    <!-- Form div will be hidden after form submission -->
    <form id="myForm">

      Name:
      <input name="name" type="text" /><br/>
      Co-Op Amount: <input name="amount" type="text" /><br/>
      Co-Op Split:<br />
      <input type="radio" name="split" value="100%">100&#37;<br>
      <input type="radio" name="split" value="50/50">50/50<br>
      <input type="radio" name="split" value="75/25">75/25<br> Other: <input type="text" name="split" /><br /> Reason for Co-Op: <input name="reason" type="text" cols="20" rows="5" /><br />
      Brand:
      <select name="brand">
        <option>Select Option</option>
        <option>Bluebird</option>
        <option>Brown</option>
        <option>Ferris</option>
        <option>Giant Vac</option>
        <option>Honda</option>
        <option>Hurricane</option>
        <option>Little Wonder</option>
        <option>RedMax</option>
        <option>SCAG</option>
        <option>Snapper Pro</option>
        <option>Sno-Way</option>
        <option>SnowEx</option>
        <option>Wright</option>
        <option>Ybravo</option>
      </select><br/>
      Co-Op Category:<br />
      <input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
      <input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
      <input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
      <input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
      <input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
      <input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
      Other: <input type="text" id="other" name="category" /><br />

      <div class="dealer box" style="display: none;">DEALER</div>
      <div class="online box" style="display: none;">ONLINE</div>
      <div class="meetings box" style="display: none;">MEETINGS</div>
      <div class="advertising box" style="display: none;">ADVERTISING</div>
      <div class="pricing box" style="display: none;">PRICING</div>
      <div class="correspondence box" style="display: none;">CORRESPONDENCE</div>


      Email: <input name="email" type="text" /><br/>
      Message: <textarea name="message" style="margin: 2px; height: 148px; width: 354px;"></textarea><br/>
      School Schedule (Image Files Only): <input name="myFile" type="file" /><br/>
      <input type="button" value="Submit" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
    </form>
  </div>

  <div id="inProgress" style="display: none;">
    <!-- Progress starts hidden, but will be shown after form submission. -->
    Uploading. Please wait...
  </div>

  <div id="output">
    <!-- Blank div will be filled with "Thanks.html" after form submission. -->
  </div>

</body>

</html>

根据单选按钮选择切换子类别div

1 个答案: