我需要这些脚本来使脚本有效,而其他计算

问题描述

此示例包含在引导程序文档中。我需要两个脚本才能工作。第一部分验证所有字段中的数据,第二部分计算数据。但是,只有第二个作品。我需要两个脚本才能工作。

<form class="needs-validation" novalidate>
    <div class="form-row">
        <div class="col-md-6 mb-3">
            <label for="validationCustom01">First name</label>
            <input type="text" class="form-control" id="validationCustom01" required>
            <div class="valid-Feedback">
                Looks good!
            </div>
        </div>
        <div class="col-md-6 mb-3">
            <label for="validationCustom02">Last name</label>
            <input type="text" class="form-control" id="validationCustom02" required>
            <div class="valid-Feedback">
                Looks good!
            </div>
        </div>

        <div class="col-md-6 mb-3">
            <label for="validationCustom03">City</label>
            <input type="text" class="form-control" id="validationCustom03" required>
            <div class="invalid-Feedback">
                Please provide a valid city.
            </div>
        </div>
    </div>

    <button class="btn btn-primary" type="submit" onclick="other();return false;" id="submit">Submit form</button>
</form>

<div class="col-md-12 mb-3">
    <label for="result">TEXT RESULT</label>
    <textarea rows="3" id="result" ></textarea>
</div>

<script>
    function other() {

        // SCRIPT 1   START - THIS SCRIPT DOES NOT WORK WHY?
        (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();
                            alert(" this does not work ");
                        }
                        form.classList.add('was-validated');
                    },false);
                });
            },false);
        })();
// END - THIS SCRIPT DOES NOT WORK WHY?

// SCRIPT2 THIS WORK
        let s1 = document.querySelector('#validationCustom01').value;
        let s2 = document.querySelector('#validationCustom02').value;
        let s3 = document.querySelector('#validationCustom03').value;

        concat =  s1 + s2 + s3;
        document.getElementById('result').innerHTML = concat;
    }
</script>
感谢您的快速回复,但仍然无法正常工作。 目的是在不删除旧数据的情况下在textarea id结果中显示concat。 目标是在不删除旧数据的情况下在textarea id结果中显示concat。

当前,如果我填写所有字段并单击“提交”,则不会在TEXTAREA id结果中看到concat。好像所有数据都丢失了。 目的是填充字段,单击提交时必须计算concat并显示在TEXTAREA中,所有字段必须保留其值。 否则(例如,一个空字段)表示字段填充错误

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)