如何阻止具有相同触发按钮但功能不同的表单提交？

Posted 2023-05-08

【中文标题】如何阻止具有相同触发按钮但功能不同的表单提交？

【英文标题】：How to block form submit with same trigger button but different function?

【发布时间】：2022-01-20 20:00:40

【问题描述】：

所以，我有一些问题。我有一个搜索栏来搜索产品，如果我输入的单词与 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>

【参考方案1】：

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

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

const pageKeywords = 
  "home": "/homepage",
  "about": "/about-us"

$('#fform').on('submit', function(e)
  const 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>

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

【讨论】：

正如我上面所说，这需要 2 个不同的事件。因为1代表整个搜索栏，另外1只代表pageKeywords

为什么pageKeywords 需要一个单独的事件？该事件仍然是“搜索用户写的内容”

【参考方案2】：

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

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

【讨论】：

这个还是不行，还是提交表单不要到其他页面