添加新字段后避免提交

Question

当我尝试添加一个新的表单域时，点击输入按钮作为提交代替。我做错了什么以及如何防止这种行为？

 <div class="container bring-to-front">
            <div class="shadow rounded p-5 bg-contrast overflow-hidden">
                <div class="section-heading text-center">
                    <h2 class="heading-line">Add data in the fields</h2>                
                </div>
    
                <div class="mx-auto position-relative form-wrapper">
                    <form method="post" id="form" action="{{route('randomize.store')}}" name="form" 
                    class="form text-center" data-response-message-animation="slide-in-left" novalidate>
                       @csrf
                        <div id="parent" class="list-group">
                            <div class="form-group form-filed horizontal">
                                <input name="data1" class="input" type="text" autocomplete="off" 
                                placeholder="add some data"  autofocus onkeypress='validate(event)' 
                                onkeydown="pressEnter(event)" required>
                            </div>
                        </div>
                        <div id="parent" class="list-group">
                            <div class="form-group form-filed horizontal">
                                <input name="data2" class="input" type="text" autocomplete="off" 
                                placeholder="add some data"  autofocus onkeypress='validate(event)' 
                                onkeydown="pressEnter(event)" required>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-lg btn-alternate align-center">Draw</button>                   
                    </form>
                </div>
            </div>
        </div>

Answer 1

您可以在 pressEnter() 函数中方便地使用event.preventDefault()：

所以你的函数应该是这样的::

function pressEnter(event){
event.preventDefault();

// and your other codes go here

}