Question

我有一个Bootstrap 4表单，该表单使用其网站https://getbootstrap.com/docs/4.4/components/forms/#validation上的“入门” javascript进行了验证。

此表单位于Google Docs附加工具条的内部。提交表单时，我不是在调用另一个URI，而是只希望从表单中收集信息，然后使用Google Apps脚本对其进行处理。

入门javascript正确验证了表单字段，但是当表单提交时，一个新的浏览器选项卡正在打开，我不想发生这种情况。

我修改了下面的启动程序代码，只是为了从“其他”部分调用自己的函数。当前，我的函数commitFeedback（）所做的只是发出警报以告知代码执行已到该点，但是同时执行转移到函数SubmitFeedback（）时，新选项卡在浏览器中打开。

提交表单后，如何防止打开此新的浏览器选项卡？

<form class="needs-validation" novalidate>
    <div class="form-group">
        <label for="frmFirstName">First name</label>
        <input type="text" class="form-control" id="frmFirstName" placeholder="First name" required>
        <div class="invalid-feedback">
            Please enter your first name.
        </div>
    </div>
    <div class="form-group">
        <label for="frmLastName">Last name</label>
        <input type="text" class="form-control" id="frmLastName" placeholder="Last name" required>
        <div class="invalid-feedback">
            Please enter your last name.
        </div>
    </div>
    <div class="form-group">
        <label for="frmEmail">Email</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
            </div>
            <input type="text" class="form-control" id="frmEmail" placeholder="user@domain.com" aria-describedby="inputGroupPrepend" required>
            <div class="invalid-feedback">
                Please enter your email.
            </div>
        </div>
    </div>                          
    <div class="form-group">
        <label for="frmCategory">What's on your mind?</label>
        <select id="frmCategory" class="custom-select form-control" required>
            <option value="">- Select -</option>
            <option value="1">I have a question</option>
            <option value="2">I have an idea</option>
            <option value="3">I have a compliment</option>
            <option value="4">I found a problem :(</option>
        </select>
        <div class="invalid-feedback">
            Please select an option.
        </div>
    </div>
    <div class="form-group">
        <label for="frmDetails">Tell us all about it...</label>
        <textarea id="frmDetails" class="form-control" rows="3" placeholder="Enter your comments here" required></textarea>
        <div class="invalid-feedback">
            Please provide your comments here.
        </div>
    </div>                               
    <button class="btn btn-primary btn-sm" type="submit">Submit form</button>
</form>


...

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        } else {
        submitFeedback();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

// function to gather and process data from form
function submitFeedback(){
    alert ('inside feedback function');
}
</script>

Answer 1

在Firefox最新版本和Chrome浏览器中，它至少不会打开新标签页，而不是所发布的代码。因此，请检查您是否使用本地网络服务器定义的内容，或者是否使用其他浏览器（如果该浏览器具有特定的浏览器行为）。如果使用相同的浏览器，请尝试清空缓存并打开开发人员工具以查看详细情况。

Answer 2

html文件开头部分的

基本目标是罪魁祸首。删除后，所有工作均按预期进行。使用Google Apps脚本编辑器创建新的html文件时，默认情况下会添加此标签。

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

Bootstrap 4表单验证和提交

2 个答案: