Question

当我尝试使用以下代码调用函数时，我的页面。我似乎只是刷新页面而不是调用脚本。

    <form role="search" name="locationForm">
      <div class="form-group">
        <input id="locationInput" type="text" class="form-control" placeholder="Search">
      </div>
      <button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
    </form>

如果我添加＆＃39;＃＆＃39;到url的末尾，重新加载页面，然后onlcick事件按原样运行。

据我所知，这些是Anchor标签，我不知道为什么在调用函数时需要它们。

我该如何纠正？因为我不想使用＃。

Answer 1

您正在使用button元素，其单击时的默认行为会提交其父表单。 return false将阻止表单提交：

<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>

Answer 2

如果您不希望按钮自动提交，可以将其type更改为button。然后，它所做的只是运行其onclick代码。（您仍然可以让该代码手动提交表单）

Answer 3

我想您在提交表单时想要运行start（）函数？你说你正在使用点击事件监听器。请尝试收听提交事件。

$('#your_form_id').on('submit', function(e) {
    e.preventDefault();
    your script...
});

上面的代码基本上都是这样做的。此外，preventDefault使表单不会实际提交自己。您可以使用

访问表单数据

$('#your_form_id').serialize();

我希望这会把你推向正确的方向！

HTML Onclick事件仅适用于#Anchor Tag

3 个答案: