Entonces, tengo un problema. Tengo una barra de búsqueda para buscar un producto, y también puedo redirigir a otra página si escribo una palabra que coincida con el valor de matriz de pageKeywords de página. Entonces, en 1 barra de búsqueda puede haber 2 disparadores.
La primera es cuando hago clic en buscar palabras clave y cuando coincide me llevará a otra página:
$('#submitForm').on("click",function(e){ pageKeywords($("#searchKeywords").val(),e) }) Y también dirigirá a la página de resultados si la palabra escrita no contiene pageKeyword :
$('#submitForm').on('click', function () { console.log("another function submit") $('#fform').submit() return false; }); El problema que tengo es que cuando hago clic en Buscar, se activará el envío del formulario. ¿Cómo evitar el envío de formularios cuando las palabras escritas en la barra de búsqueda coinciden con pageKeywords ? Si no coincide, se puede ejecutar el envío del formulario. Estos dos eventos no se pueden impugnar, aquí doy un ejemplo del código que he hecho
puede intentar ingresar, después de escribirlo y hacer clic en Intro, si la palabra coincide con pageKeywords , no se recargará, pero cuando no coincida, se recargará. ¿Cómo hago para que mi botón funcione así también?
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>Si entendí su pregunta correctamente, básicamente desea realizar diferentes acciones en función de si el término de búsqueda coincidió con algo en su objeto pageKeywords .
No necesita crear dos oyentes para eso. Solo escuche el evento de envío de formulario que se activa al presionar enter también. Luego puede hacer coincidir el valor y tomar medidas sobre la condición si el término coincide o no.
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>Esta es mi opinión, pero si tuviera que hacer esto, no lo haría de esta manera. Mantendría toda esta lógica en el lado del servidor.
Está sobrescribiendo una llamada de función con otra: JavaScript no admite la sobrecarga de funciones. Combina su lógica en una función común:
$('#submitForm').on("click",function(e) { if (pageKeywords($("#searchKeywords").val(), e) !== false) { console.log("another function submit"); $('#fform').submit(); } else { e.preventDefault(); return false; } });