Html Question posted in
Some basic documentation can be found here.

how javascript submission function handles Checkbox in html form on google apps script?

In html data entry form, wanted to replace a Radio type with Checkbox for possible multi-selections:

<form id="ProductDetails" onsubmit="handleFormSubmit(this)">
  <p class="h4 mb-4 text-center">Restaurant Details</p>
  <div id="message"></div>
  <input type="text" id="recId" name="recId" value="" style="display: none">

  <div class="mb-1">
    <label for="name" class="form-label">Name</label>
    <input type="text" id="name" name="name" class="form-control form-control-sm" required>
  </div>

  <div class="mb-1">  //Text type
    <label for="name" class="form-label">Product Condition</label>
    <input type="text" id="name" name="name" class="form-control form-control-sm" required>
  </div>

  <div class="mb-1">
    <label class="form-label"><B>Product Condition</B></label><br>
    <div class="form-check form-check-inline">
      <input type="checkbox" id="new1" name="prodCondition" class="form-check-input" value="new1">
      <label for="new1" class="form-check-label">New1</label>
    </div>
    <div class="form-check form-check-inline">
      <input type="checkbox" id="new2" name="prodCondition" class="form-check-input" value="new2">
      <label for="new2" class="form-check-label">New2</label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

//HANDLE FORM SUBMISSION, original that works
  function handleFormSubmit(formObject) {
    $('#spinnerModal').modal('show');
    google.script.run.withSuccessHandler(createTable).processForm(formObject);
    document.getElementById("ProductDetails").reset();
  }

The new submission function should include multi-selections from the Checkbox to its corresponding column/cel (hope separated with comma) in Google sheet. ChatGDP suggested this but it doesn’t work:

function handleFormSubmit(formObject) {
    // Initialize formObject.prodCondition as an array if it doesn't exist or isn't an array
    if (!Array.isArray(formObject.prodCondition)) {
        formObject.prodCondition = [];
    }
    
    console.log("Before collecting checkbox values:");
    console.log("prodCondition array length:", formObject.prodCondition.length);

    // Loop through all checked checkboxes and push their values into the array
    document.querySelectorAll('input[name="prodCondition"]:checked').forEach((checkbox) => {
        formObject.prodCondition.push(checkbox.value);
    });
    
    console.log("After collecting checkbox values:");
    console.log("prodCondition array length:", formObject.prodCondition.length);

    // Now that we've collected the checkbox values, we can proceed with the form submission
    console.log("Submitting form with the following values:");
    console.log(formObject); // Log the entire formObject to see its contents
    
    $('#spinnerModal').modal('show');
    google.script.run.withSuccessHandler(createTable).processForm(formObject);
    document.getElementById("ProductDetails").reset();
}

error from Console:

Before collecting checkbox values:
userCodeAppPanel:60 prodCondition array length: 2
userCodeAppPanel:64 Uncaught TypeError: formObject.prodCondition.push is not a function
    at userCodeAppPanel:64:34
    at NodeList.forEach (<anonymous>)
    at handleFormSubmit (userCodeAppPanel:63:70)
    at HTMLFormElement.onsubmit (userCodeAppPanel:1:8911)

Thanks for help. – Ben

tried ChatGDP but its solution didn’t work

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thanks but got error on Console:

    Uncaught TypeError: formObject.prodCondition.push is not a function
    at <anonymous>:60:30
    at NodeList.forEach (<anonymous>)
    at handleFormSubmit (<anonymous>:59:68)
    at HTMLFormElement.onsubmit (userCodeAppPanel:1:8546)

    line 59,60: document.querySelectorAll('input[name="prodCondition"]:checked').forEach((checkbox) => { formObject.prodCondition.push(checkbox.value);

    It seems that it needs a function of typeCheckbox(values), similar to a function of Dropdown in the form:

    function typeDropdown(values) {
    var list = document.getElementById('type');
    for (var i = 0; i < values.length; i++) {
      var option = document.createElement("option");
      option.value = values[i];
      option.text = values[i];
      list.appendChild(option);
    }
  }

  2. 0

    Here’s a corrected version of the handleFormSubmit function:

    function handleFormSubmit(formObject) {
  // Ensure prodCondition is an empty array:
  formObject.prodCondition = formObject.prodCondition || [];

  // Collect checked checkbox values:
  document.querySelectorAll('input[name="prodCondition"]:checked').forEach((checkbox) => {
    formObject.prodCondition.push(checkbox.value);
  });

  // Join multiple values with a comma:
  formObject.prodCondition = formObject.prodCondition.join(',');

  // Rest of the submission logic:
  $('#spinnerModal').modal('show');
  google.script.run.withSuccessHandler(createTable).processForm(formObject);
  document.getElementById("ProductDetails").reset();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search