Bootstrap 4 表單驗證和提交

Question

我有一個使用驗證的 Bootstrap 4 表單，使用在他們的 web 站點上找到的“starter”javascript： https://getbootstrap.com//#idation/4 。

此表單存在於 Google Docs 附加邊欄中。 當表單提交時，我不會調用另一個 URI，而是我只想從表單中收集信息，然后使用 Google Apps 腳本處理它。

啟動器 javascript 正在正確驗證表單字段，但是當表單提交時，一個新的瀏覽器選項卡正在打開，我不想發生這種情況。

我已經修改了下面的啟動代碼，只是為了從“其他”部分調用我自己的 function。 目前，我的 function submitFeedback() 只是發布一個警報，讓我知道代碼執行已達到該點，但同時執行轉移到 function 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 個解決方案

解決方案1
0 2020-05-01 17:46:53

解決方案2
0 已采納 2020-05-11 19:51:45

Bootstrap 4 表單驗證和提交

問題描述

2 個解決方案

解決方案1 0 2020-05-01 17:46:53

解決方案2 0 已采納 2020-05-11 19:51:45

解決方案1
0 2020-05-01 17:46:53

解決方案2
0 已采納 2020-05-11 19:51:45