+ Enter key on the front page was a search box to generate refresh failures Detailed

First, referring to the next scene, he recently took over a background management system, regression testing bug found on page search query box by pressing Enter, will lead to a 404 error page appears.

As shown, most of the projects have pages like this search box, click search queries can be successful, but press the Enter key was redirected to an unknown path.

Page code like this:

<form id="formSearch1" class="form-horizontal">
                                <div class="tab-pane active" id="tab-1">
                                    <div class="form-group" style="margin-top: 1px">
                                        <label class="control-label col-sm-1" for="txt_search_title">
                                            问卷名称
                                        </label>
                                        <div class="col-sm-2">
                                            <input class="form-control" id="qsName" name="questionSur.qsName"/>
                                        </div>
                                        <label class="col-sm-1 control-label">状态</label>
                                        <div class="col-sm-2">
                                            <select class="form-control m-b" id="state" name="questionSur.state">
                                                <option value="">全部</option>
                                                <option value="1">正在进行</option>
                                                <option value="2">已结束</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-1" style="text-align: left;">
                                            <button type="button" id="btn_query1"
                                                class="btn btn-primary">
                                                查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
</form>

Look closely, query the page using ajax to submit the form, and enter the default key is to submit the form, we did not write path submit the form, the system will use the path of the project plus the default parameter name to submit, submit course failure to route, and then the 404.

####################################################################################################

Well, my first thought is to prohibit submit the form, is not able to solve the problem yet.

I would like to introduce a page header file js file directly to a universal, binding all of the class in a js search form above to submit a form of direct method returns false, then the page will naturally not jump up.

var arrForm = document.querySelectorAll('.form-horizontal');
    arrForm.forEach(x=>{  
        x.onsubmit = function(e) {
               return false;
        };
    })

ok, sure enough, once again after a carriage return, the entire page will be no reaction. Solve the problem, but as a programmer how could I be so rough with ways to solve the problem?

Next, I thought to enter the event binding query methods, so I added a piece of code in turn, to enter the event turned into clicking the search button.

$(document).keydown(function (ev) {
        if(ev.keyCode == '13'){
            var arr = document.querySelectorAll(".btn.btn-primary");
            arr.forEach(v=>{  
                v.click();
            }); 
        }
    })

ok, the code once again a success, the success of the carriage bound query, bug perfect solution.

Published 27 original articles · won praise 1 · views 3652

Guess you like

Origin blog.csdn.net/qq_40111437/article/details/88929154