当前位置：文江博客话题详情

Google表html数据输入，可以将其填充

发布于 2025-02-10 09:22:15 字数 7504 浏览 1 评论 0原文

电子表格：

html数据输入：

我已经在此工作了8个小时，我无法弄清楚。

我有一个网站我正在上传要出售的物品。我有一个Google表可以跟踪此信息。我们可能有3,000多件商品可供出售，因此此HTML将是救生员！

但是，我无法将其填充到我的Google表中。它运行，我不会收到错误消息，只是不会在我的工作表中填充。

这是我的床单，很开放，

我正在自学自己如何完成网站，我只有大约3或4个月的时间。任何帮助都会很棒！

代码GS

function doGet(request) {
  return HtmlService.createTemplateFromFile("Index").evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url =
    "https://docs.google.com/spreadsheets/d/1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ/edit#gid=1180254005";

  function processForm(formObject) {
    var ss = SpreadsheetApp.getActive();
    var ws = ss.getSheetByName("Data");

    ws.appendRow([
      formObject.location,
      formObject.itemNumber,
      formObject.name,
      formObject.description,
      formObject.price,
      formObject.markedDown,
      formObject.pricePaid,
      formObject.category,
      formObject.sold,
      formObject.postedOnline,
    ]);
  }
}

index.html


<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <?!= include('JavaScript'); ?>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <form id="myForm" onsubmit="handleFormSubmit(this)">
          <p class="h4 mb-4 text-center font-weight-bold">Seattle Bound Data</p>
          <!-- Row 1 -->
          <div class="form-row">
            <div class="form-group col-md-4 font-weight-bold">
              <label for="first_name">Location</label>
              <input type="text" class="form-control" id="location" name="location" placeholder="Location">
            </div>
            <div class="form-group col-md-4 font-weight-bold">
              <label for="itemNumber">Item Number</label>
              <input type="text" class="form-control" id="itemNumber" name="itemNumber" placeholder="Item Number">
            </div>
            <div class="form-group col-md-4 font-weight-bold">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            </div>
          </div>
          <!-- Row 1 -->
          <!-- Row 2 -->
          <div class="form-row">
            <div class="form-group col-lg-12 font-weight-bold">
              <label for="description">Description</label>
              <input type="text" class="form-control" id="description" name="description" placeholder="Description">
            </div>

          </div>
          <!-- Row 2 -->
          <!-- Row 3 -->
          <div class="form-row">
            <div class="form-group col-md-4 font-weight-bold">
              <label for="price">Price</label>
              <input type="number" class="form-control" id="price" name="price" placeholder="$00.00">
            </div>

            <div class="form-group col-md-4 font-weight-bold">
              <label for="markedDown">Marked Down</label>
              <input type="number" class="form-control" id="markedDown" name="markedDown" placeholder="$00.00">
            </div>


            <div class="form-group col-md-4 font-weight-bold">
              <label for="pricePaid">Price Paid</label>
              <input type="number" class="form-control" id="pricePaid" name="pricePaid" placeholder="$0.00">
            </div>
          </div>
          <!-- Row 3 -->
          <!-- Row 4 -->
          <div class="form-row">
            <div class="form-group col-sm-6 font-weight-bold">
              <label for="categories">Categories</label>
              <div class="form-check form-check-inline">
                <select name="categories">
                  <option value="media">Media</option>
                  <option value="tools">Tools</option>
                  <option value="clothes">Clothes</option>
                  <option value="bears">Bears</option>
                  <option value="misc">Misc</option>
                  <option value="electronics">Electronics</option>
                </select>
                <div class="form-group col-sm-6 font-weight-bold">
                  <p>Sold</p>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sold" id="true" value="true">
                    <label class="form-check-label" for="true">True</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sold" id="false" value="false">
                    <label class="form-check-label" for="false">False</label>
                  </div>
                </div>



                <div class="form-group col-sm-6 font-weight-bold">
                  <p>Posted Online</p>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="postedOnline" id="true" value="true">
                    <label class="form-check-label" for="true">True</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="postedOnline" id="false" value="false">
                    <label class="form-check-label" for="false">False</label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
        <div id="output"></div>
      </div>
    </div>
  </div>

</body>


</html>

javascript.html


<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
  
</script>

原文

Spreadsheet:

The html data entry:

I have been working on this for 8 hours, I cannot figure it out.

I have a website that I am uploading items to be sold. I have a Google sheet that I am keeping track of this information. We will have probably over 3,000 items to sell, so this html would be a lifesaver!

I however cannot get it to populate into my Google sheets. It runs, I don't get error messages, it just won't populate in my sheet.

This is my sheet, it is open

I am teaching myself how to do the website myself, I only have about 3 or 4 months under my belt. Any help would be WONDERFUL!

Code GS

function doGet(request) {
  return HtmlService.createTemplateFromFile("Index").evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url =
    "https://docs.google.com/spreadsheets/d/1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ/edit#gid=1180254005";

  function processForm(formObject) {
    var ss = SpreadsheetApp.getActive();
    var ws = ss.getSheetByName("Data");

    ws.appendRow([
      formObject.location,
      formObject.itemNumber,
      formObject.name,
      formObject.description,
      formObject.price,
      formObject.markedDown,
      formObject.pricePaid,
      formObject.category,
      formObject.sold,
      formObject.postedOnline,
    ]);
  }
}

Index.html


<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <?!= include('JavaScript'); ?>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <form id="myForm" onsubmit="handleFormSubmit(this)">
          <p class="h4 mb-4 text-center font-weight-bold">Seattle Bound Data</p>
          <!-- Row 1 -->
          <div class="form-row">
            <div class="form-group col-md-4 font-weight-bold">
              <label for="first_name">Location</label>
              <input type="text" class="form-control" id="location" name="location" placeholder="Location">
            </div>
            <div class="form-group col-md-4 font-weight-bold">
              <label for="itemNumber">Item Number</label>
              <input type="text" class="form-control" id="itemNumber" name="itemNumber" placeholder="Item Number">
            </div>
            <div class="form-group col-md-4 font-weight-bold">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="Name">
            </div>
          </div>
          <!-- Row 1 -->
          <!-- Row 2 -->
          <div class="form-row">
            <div class="form-group col-lg-12 font-weight-bold">
              <label for="description">Description</label>
              <input type="text" class="form-control" id="description" name="description" placeholder="Description">
            </div>

          </div>
          <!-- Row 2 -->
          <!-- Row 3 -->
          <div class="form-row">
            <div class="form-group col-md-4 font-weight-bold">
              <label for="price">Price</label>
              <input type="number" class="form-control" id="price" name="price" placeholder="$00.00">
            </div>

            <div class="form-group col-md-4 font-weight-bold">
              <label for="markedDown">Marked Down</label>
              <input type="number" class="form-control" id="markedDown" name="markedDown" placeholder="$00.00">
            </div>


            <div class="form-group col-md-4 font-weight-bold">
              <label for="pricePaid">Price Paid</label>
              <input type="number" class="form-control" id="pricePaid" name="pricePaid" placeholder="$0.00">
            </div>
          </div>
          <!-- Row 3 -->
          <!-- Row 4 -->
          <div class="form-row">
            <div class="form-group col-sm-6 font-weight-bold">
              <label for="categories">Categories</label>
              <div class="form-check form-check-inline">
                <select name="categories">
                  <option value="media">Media</option>
                  <option value="tools">Tools</option>
                  <option value="clothes">Clothes</option>
                  <option value="bears">Bears</option>
                  <option value="misc">Misc</option>
                  <option value="electronics">Electronics</option>
                </select>
                <div class="form-group col-sm-6 font-weight-bold">
                  <p>Sold</p>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sold" id="true" value="true">
                    <label class="form-check-label" for="true">True</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sold" id="false" value="false">
                    <label class="form-check-label" for="false">False</label>
                  </div>
                </div>



                <div class="form-group col-sm-6 font-weight-bold">
                  <p>Posted Online</p>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="postedOnline" id="true" value="true">
                    <label class="form-check-label" for="true">True</label>
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="postedOnline" id="false" value="false">
                    <label class="form-check-label" for="false">False</label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
        <div id="output"></div>
      </div>
    </div>
  </div>

</body>


</html>

JavaScript.html


<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
  
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉墨 2025-02-17 09:22:15

我能够运行代码，但几乎没有更正。

在App脚本中，在pocessform（）函数内部，您再次声明具有相同名称的新功能，这是不必要的，因此您的代码不会因此而运行。因此，您应该删除外部功能，然后保持内部功能。
部署应用程序时，ActivesHeet函数不起作用。而是使用
电子表格app.openbyid（“”）
并提供电子表格的ID，您可以在电子表格的链接中找到。这些将是字母数字字符串。对于您的工作表来说，这就是“ 1UF5YBKYFVXVRA4QRUURQHRXE7C1QEYSIXAL_R -PKBIQ”。

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/* @Process Form */
function processForm(formObject) {
  Logger.log(JSON.stringify(formObject));
  // var ss = SpreadsheetApp.getActive(); // incorrect
  const ss = SpreadsheetApp.openById("");
  const ws = ss.getSheetByName('Data');

  ws.appendRow([formObject.location,
  formObject.itemNumber,
  formObject.name,
  formObject.description,
  formObject.price,
  formObject.markedDown,
  formObject.pricePaid,
  formObject.category,
  formObject.sold,
  formObject.postedOnline]);

}

这起作用。

建议 - 您可能需要处理表单验证。当前，如果用户使用任何空字段提交表单，则应用程序脚本会引发错误。处理此问题的简单方法是使HTML中所需的每个输入字段。

I was able to run the code but with few corrections.

In app script, inside the pocessForm() function you are again declaring a new function with the same name, which is unnecessary and your code does not run because of this. So you should remove the outer function and just keep inner one.
When you deploy your app, the activeSheet function does not work. Instead, use
SpreadsheetApp.openById("")
and give the id of the spreadsheet which you can find in the link of the spreadsheet. These will be the alphanumeric character string. For your sheet it's this - "1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ".

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/* @Process Form */
function processForm(formObject) {
  Logger.log(JSON.stringify(formObject));
  // var ss = SpreadsheetApp.getActive(); // incorrect
  const ss = SpreadsheetApp.openById("");
  const ws = ss.getSheetByName('Data');

  ws.appendRow([formObject.location,
  formObject.itemNumber,
  formObject.name,
  formObject.description,
  formObject.price,
  formObject.markedDown,
  formObject.pricePaid,
  formObject.category,
  formObject.sold,
  formObject.postedOnline]);

}

And this works.

Suggestion - You may want to handle the form validation. Currently, if a user submits the form with any empty field, app script throws error. Easy way to handle this is by making each input field required in html.

回复收藏 0 原文

~没有更多了~