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

标签 javascript jquery html google-apps-script google-apps

我使用了top answer to this question构建一个与文件上传一起输入到工作表中的表单。现在我又碰壁了。

我有类别和子类别。我希望子类别仅在选择了其父类别时才显示。我只是不知道 A) 我需要将代码放在哪里(在我们的网站上它就在 HTML 中)，我尝试将它放在 HTML 文件和 Code.gs 文件中，或者 B) 如果我正在使用的代码甚至是正确的。

Here's the form -“合作类别”是父类别，我为每个类别隐藏了“子类别”的 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>

代码.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();
            }
        });
    };

最佳答案

意外的 token 是由于 function(){行，这是 jQuery document ready function 的无效语法。你应该有:

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

修复此问题后，您的下一个错误将是:

Uncaught ReferenceError: $ is not defined

那是因为你还没有包含 jQuery，这就是 $ 的内容。符号在类似 $(this) 的语句中引用。您需要阅读this有关在 Google Apps 脚本中使用 jQuery 的更多提示。不过，简单来说:您需要添加以下内容，并根据您打算使用的 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>

关于javascript - 根据单选按钮选择切换子类别 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35755947/

上一篇：javascript - jQuery 可排序中的自定义索引

下一篇：javascript - 基于 if-else 子句创建随机 UNIX 时间戳

相关文章：

javascript - Leaflet Omnivore KML，样式导入路径

javascript - 通过 iFrame 小部件跟踪 Adwords 转化

javascript - 为什么这个 if 条件总是 true (js)？

javascript - 如何查找 DOM 元素是否附加了一些 Javascript？

html - Chrome 中不显示输入复选框

html - CSS 3 - 缩放过渡在谷歌浏览器中快速返回

javascript - 使用传单上的 d3 使 SVG 透明

javascript - 如何将事件从 Redux 传递给 React？

javascript - knockoutJS、requireJS 和 jQueryUI Datepicker 不能一起玩

javascript - jquery如何让缩放变得平滑

©2024 IT工具网  联系我们