Question

我正在开发一个包含一些JQuery和AJAX的项目。我还实现了JQuery自动填充功能。表格代码如下所示：

<form class="form-horizontal">
    <div class="form-group">
        <label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
        <div class="col-sm-4 ui-widget">
            <input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
            <button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
        </div>
        <label for="insuredsname" class="col-sm-2 control-label">Department:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button class="btn btn-primary" id="addendt">Add Endorsement</button>
            <button class="btn btn-warning" id="addendtclearform">Clear Form</button>
        </div>
    </div>
</form>

自动填充功能在ID为“endtpolnumber”的文本框中实现。当我点击ID为“findpolinfo”的文本框时，它应该提醒“asdf”。但是，相反，它将我重定向到此URL

“http://localhost/dis/home/login?endtpolnumber=31-125&endtefffrom=&endtno=&endtamt=&endtdesc=”

我的JQuery代码如下：

$('#findpolinfo').click(function () {
        alert('asdf');
    });

有没有人知道，我哪里错了？

欢迎所有积极的建议......

提前致谢...

Answer 1

因为<button>的默认行为是内部形式是提交

what's the standard behavior when < button > tag click? will it submit the form?

添加

type="button"

如果您不希望此按钮提交表单

Answer 2

按钮具有提交表单的默认行为。您可以使用return false停止该表单提交。以下是帮助您的代码。只需输入政策号码，然后点击“查找政策”即可。按钮：

＆＃13;

$('#findpolinfo').click(function () {
        alert($("#endtpolnumber").val());
        return false;
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
    <div class="form-group">
        <label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
        <div class="col-sm-4 ui-widget">
            <input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
            <button id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
        </div>
        <label for="insuredsname" class="col-sm-2 control-label">Department:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button class="btn btn-primary" id="addendt">Add Endorsement</button>
            <button class="btn btn-warning" id="addendtclearform">Clear Form</button>
        </div>
    </div>
</form>

＆＃13;

Answer 3

基于W3schools，如果您想要点击添加按钮，可以将type="button"添加到button属性中。就像这样：

<form class="form-horizontal">
  <div class="form-group">
    <label for="polciynumber" class="col-sm-2 control-label">Please Enter Policy Number:</label>
    <div class="col-sm-4 ui-widget">
      <input id="endtpolnumber" type="text" class="form-control col-sm-1" name="endtpolnumber" placeholder="Plase Enter Policy Number">
      <button type="button" id="findpolinfo" class="btn btn-primary col-sm-3">Find Policy</button>
    </div>
    <label for="insuredsname" class="col-sm-2 control-label">Department:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="endtdept" name="endtdept" placeholder="" disabled="disabled">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="button" class="btn btn-primary" id="addendt">Add Endorsement</button>
      <button type="button" class="btn btn-warning" id="addendtclearform">Clear Form</button>
    </div>
  </div>
</form>

Jquery：点击按钮加载其他一些URL

3 个答案: