Jquery: Loading some other URL on click of a button

Question

I'm working on a project which includes some JQuery and AJAX. I have also implemented a feature of JQuery autofill. The code of form is shown below:

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

The Autofill is implemented on the textbox with ID "endtpolnumber". When I click on textbox with ID "findpolinfo" it should alert "asdf". But, on contrary it is redirecting me to to this URL

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

My JQuery code is as below:

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

Does anyone have any idea, where am i going wrong?

All positive suggestions are welcomed...

Thanks in advance...

button default behaviour is submit unless you add type="button" — JYoThI, May 23 '17 at 07:16
@JYoThI I added type="button", but still its not alerting anything — V15HM4Y, May 27 '17 at 09:58

score 0 · Answer 1 · answered May 23 '17 at 07:09

0

Because the default behavoiur of <button> if it is inside form is submit

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

add

type="button"

if you don't want this button to submit form

answered May 23 '17 at 07:09

Luke

362
1
4
13

how can we override it? because I tried "e.preventDefault()", But it didn't work. – V15HM4Y May 23 '17 at 07:11

score 0 · Answer 2 · answered May 23 '17 at 07:10

Button has a default behaviour to submit the form. You can use return false to stop that form submission. Below is code to help you out. Just enter the policy number and click on the 'Find Policy' button:

$('#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>

score 0 · Answer 3 · answered May 23 '17 at 07:14

based on W3schools if you want to add button just for clicking,You can add type="button" to your button attributes.just like this:

<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: Loading some other URL on click of a button

3 Answers3