Поиск javascript в html не работает - PullRequest
Новая
       4

Поиск javascript в html не работает

0 голосов
/ 09 января 2020

Я хочу отобразить поиск в заголовке сайта в файле tpl 


<div  class="search-widget" >

<form method="get" action="art/search">

<input type="text"  id="artnum" value="" maxlength="40" placeholder="" > 


<button type="submit"  onclick="TDMArtSearch()">
<i class="material-icons search">&#xE8B6;</i>
 <span class="hidden-xl-down"></span>
        </button>
</form>
<div class="tclear"></div>

<script type="text/javascript">

function TDMArtSearch(){
    var art = $('#artnum').val();
    if(art!=''){
        art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
        location = '/art/search/'+art+'/';
    }
}
$('#artnum').keypress(function (e){
  if(e.which == 13){ TDMArtSearch(); return false;}
});
</script

        ></button>
    </form>
</div>

Поиск не работает. Если я удалю form method="get" action="art/search". Тогда поиск работает. Работает только при нажатии на кнопку поиска. Как применить form method для начала поиска с помощью клавиши ввода

1 Ответ

0 голосов
/ 09 января 2020

Просто сделайте так, чтобы форма выполняла функцию javascript при отправке: 

<div  class="search-widget" >

<form method="get" action="art/search" onsubmit="TDMArtSearch(); return false;">

<input type="text"  id="artnum" value="" maxlength="40" placeholder="" > 

<button type="submit"  onclick="TDMArtSearch()">
<i class="material-icons search">&#xE8B6;</i>
 <span class="hidden-xl-down"></span>
        </button>
</form>
<div class="tclear"></div>

<script type="text/javascript">

function TDMArtSearch(){
    var art = $('#artnum').val();
    if(art!=''){
        art = art.replace(/[^a-zA-Z0-9.-]+/g, '');
        location = '/art/search/'+art+'/';
    }
}
</script

        ></button>
    </form>
</div>

Атрибут onsubmit должен выполнять javascript, когда форма отправляется, и возвращать false, чтобы остановить "нормальную" отправку. Есть лучшие способы сделать это, добавив слушателей и имея более чистый код HTML, но вы можете найти его, как только узнаете, как это работает.

...