How to block form submit with same trigger button but different function?

user_16810968 0
Viewed 64

So, I have some problem. I have a search bar to search for a product, and can also redirect to another page if I type a word is match with pageKeywords array value. So in 1 searchbar there can be 2 triggers.

The first is when I click on search keywords and when it matches it will lead to another page:

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

And will also direct to the result page if the word written does not contain pageKeyword:

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

The problem I'm having is, when I click Search, it will trigger the form submit. How to prevent form submission when the words typed in the searchbar match with pageKeywords? If it doesn't match ,the form submit can run. These two events cannot be contested, here I give an example of the code that I have made

you can try to input, after you type it and click enter, if the word matches with pageKeywords it won't reload, but when it doesn't match it will reload. How do I get my button to work like that too?

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>

html jquery javascript
2 Answers

If I understood your question correctly, you basically want to take different actions based on whether the search term matched something in your pageKeywords object.

You don't need to create two listeners for that. Just listen to the form submit event which is triggered on enter press as well. Then you can match the value and take action on the condition if the term matches or not.

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>

This is my opinion but if I had to do this, I wouldn't do it this way. I would keep all this logic on the server side.

user_43485700

You're overwriting one function call with another - JavaScript doesn't support function overloading. Combine their logic into a common function:

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