从提交的JavaScript块形式 [英] javascript blocks form from submitting

问题描述

我使用Django和bootstrap3，并使用twitter的typeahead.js在我的表单上获得自动完成。

表单：
$

$ p $ < div id =topclass =jumbotron>
< div class =container>
< h1 align =center>主页< / h1>
< h3>
< form align =centeraction =/ search /method =getrole =form>
< input id =navPersonSearchtype =textname =qplaceholder =Search for Actor / Actressautocomplete =off>
< / form>
< / h3>
< / div> <！ - /.container - >
< / div> <！ - /.jumbotron - >


**

处理自动完成：

 < script type =text / javascript> 
 
 $（document）.ready（function（）{
 $（＃navPersonSearch）。typeahead（{
 name：'people'，
 remote： 'name_autocomplete /？q =％QUERY'
}）; 
}）; 
 
< / script> 
  

这个表单没有提交按钮，所以你用enter键提交。注释脚本允许表单提交，但是脚本不提供。

解决方案

这可能是由于typeahead修改按键事件;我不确定，因为我没有使用它。但重新安装该事件可能会解决您的问题。

尝试如下所示：

 <$ c $ {$ b $ name（'document'）.ready（function（）{
 $（＃navPersonSearch）。typeahead（{
 name：'people'，
 remote：'name_autocomplete /？q = $ QUERY'
}）。keydown（function（e）{
 if（e.keyCode === 13）{
 $（form）。trigger（'submit'） ; 
} 
}）; 
}）; 
  

I'm using Django with bootstrap3 and using twitter's typeahead.js to get autocomplete on my form.

the form:

**

<div id="top" class="jumbotron">
  <div class="container">
    <h1 align="center">Home</h1>
    <h3>
        <form align="center" action="/search/" method="get" role="form">
    <input id="navPersonSearch" type="text" name="q" placeholder="Search for Actor/Actress" autocomplete="off">
      </form> 
   </h3>
  </div> <!-- /.container -->
</div> <!-- /.jumbotron -->

**

script that handles autocomplete:

<script type="text/javascript">

$(document).ready(function() {
  $("#navPersonSearch").typeahead({
    name: 'people',
    remote: 'name_autocomplete/?q=%QUERY'
  });
});

</script>

This form doesn't have a submit button, so you submit it with enter. Commenting out the script allows the form to submit, but with the script it doesn't.

解决方案

This may be due to typeahead modifying the keypress events; I'm not sure as I haven't worked with it. But reattaching the event might solve your problem.

try something like this :

$(document).ready(function() {
    $("#navPersonSearch").typeahead({
        name: 'people',
        remote: 'name_autocomplete/?q=%QUERY'
    }).keydown(function(e) {
        if (e.keyCode === 13) {
            $("form").trigger('submit');
        }
    });
});

这篇关于从提交的JavaScript块形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！