Jquery：單擊按鈕加載其他URL

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>默認behavoiur如果是內部形式提交

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

add

type="button" 

，如果你不希望此按鈕提交表單

Answer 2

按鈕有一個默認行爲提交表單。您可以使用return false停止提交表單。以下是幫助你的代碼。如果您要添加按鈕只是點擊，您可以添加type="button"您button屬性，基於W3schools

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

<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>

Answer 3

：只要輸入保單號碼，然後點擊「查找策略」按鈕。就像這樣：

<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>