如何使用相同的触发按钮但不同的 function 阻止表单提交？

Question

所以，我有一些问题。 我有一个搜索栏来搜索产品，如果我键入一个与pageKeywords数组值匹配的单词，也可以重定向到另一个页面。 所以在 1 个搜索栏中可以有 2 个触发器。

第一个是当我点击搜索关键字时，当它匹配时，它将导致另一个页面：

$('#submitForm').on("click",function(e){
   pageKeywords($("#searchKeywords").val(),e)
})

如果写入的单词不包含pageKeyword ，也会指向结果页面：

$('#submitForm').on('click', function () {
    console.log("another function submit")
    $('#fform').submit()
    return false;
});

我遇到的问题是，当我点击搜索时，它会触发表单提交。 当搜索栏中输入的单词与pageKeywords匹配时，如何防止表单提交？ 如果不匹配，表单提交可以运行。 这两个事件是不可争辩的，这里我举一个我做的代码的例子

您可以尝试输入，键入后单击回车，如果该单词与pageKeywords匹配，则不会重新加载，但不匹配时会重新加载。 我怎样才能让我的按钮也这样工作？

 function pageKeywords(searchValue,evt){ const pageKeywords = { "home": "/homepage", "about": "/about-us" } const getInputVal = searchValue; if(pageKeywords[getInputVal]) { evt.preventDefault(); console.log(pageKeywords[getInputVal]) return false; }else{ console.log('not found') } } $(document).ready(function() { $('#submitForm').on("click",function(e){ pageKeywords($("#searchKeywords").val(),e) }) $('#submitForm').on('click', function () { console.log("another function submit") $('#fform').submit() return false; }); $("#searchKeywords").on("keypress", function(e) { if (e.which === 13) { pageKeywords($(this).val(),e) } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="fform" action="#"> <input type="text" id="searchKeywords"> <button id="submitForm">Search</button> </form>

Answer 1

如果我正确理解了您的问题，您基本上想根据搜索词是否与您的pageKeywords object 中的内容匹配来采取不同的操作。

您不需要为此创建两个侦听器。 只需收听在输入按下时触发的表单提交事件。 然后，您可以匹配该值并在该术语匹配与否时对条件执行操作。

 $('#fform').on('submit', function(e){ const pageKeywords = { "home": "/homepage", "about": "/about-us" }, searchTerm = $('#searchKeywords').val(); if(searchTerm in pageKeywords){ e.preventDefault(); alert('term found'); } else { alert('No match'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="fform" action="#"> <input type="text" id="searchKeywords"> <button id="submitForm">Search</button> </form>

这是我的意见，但如果我必须这样做，我不会这样做。 我会将所有这些逻辑保留在服务器端。

Answer 2

您正在用另一个 function 调用覆盖 - JavaScript 不支持 function 重载。 将它们的逻辑组合成一个通用的 function：

$('#submitForm').on("click",function(e) {
  if (pageKeywords($("#searchKeywords").val(), e) !== false) {
    console.log("another function submit");
    $('#fform').submit();
  } else {
    e.preventDefault();
    return false;
  }
});