CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Ashish Pal
Ashish Pal

Reputation: 43

button not working when placed inside form

In the below code when button is placed just outside the form it works in ajax but when button is placed inside the form the button doesn't works.

HTML code

<div class="container">
    <div class="row">
    <form class="form-inline">
        <label for="from">From:</label>&nbsp;
        <input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">&nbsp;&nbsp;
        <label for="to">To:</label>&nbsp;
        <input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">&nbsp;&nbsp;
        <label for="chart_type">Type : </label>&nbsp;
        <select id="chart" name="chart">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
            <option value="4">option 4</option>
            <option value="5">option 5</option>
            <option value="6">option 6</option>
        </select>
    </form>
    <button id="date-submit-btn" class="btn btn-primary">Submit</button>
    </div>
</div>

Ajax request on click of button

$(document).ready(function () {
    $("#date-submit-btn").click(function(event){
        var chartId = $("#chart").val();
        var toDate = $("#to").val().split("/").reverse().join("-");
        var fromDate = $("#from").val().split("/").reverse().join("-");
        $("#chart1").empty();
        $.ajax({
            url:"action.php",
            method:"POST",
            data:{to:toDate,from:fromDate,chart:chartId},
            success:function(returnData){
                myDrawChart(returnData);
            },
            error:function(err){
                console.log(err);
            }
        });        
    });
});

Upvotes: 3

Views: 6813

Answers (3)

Ali Mustafa Fidancı
Ali Mustafa Fidancı

Reputation: 123

Try to add type="button" to your button in form.

Because default button type is "submit".

Upvotes: 3

Dylan KAS
Dylan KAS

Reputation: 5683

You can keep your button in your form and add type="button" so that the form will not be sent from the click on the button.

<div class="container">
    <div class="row">
    <form class="form-inline">
        <label for="from">From:</label>&nbsp;
        <input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">&nbsp;&nbsp;
        <label for="to">To:</label>&nbsp;
        <input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">&nbsp;&nbsp;
        <label for="chart_type">Type : </label>&nbsp;
        <select id="chart" name="chart">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
            <option value="4">option 4</option>
            <option value="5">option 5</option>
            <option value="6">option 6</option>
        </select>
        <button type="button" id="date-submit-btn" class="btn btn-primary">Submit</button>
    </form>

    </div>
</div>

Another way to prevent the form from submitting would be using onsubmit="return false;" :

<div class="row">
    <form onsubmit="return false;" class="form-inline">
      //...
    </form>
</div>

Or even modifying the button to an input type button would work as well :

<input type="button" id="date-submit-btn" class="btn btn-primary" value="Submit">

Upvotes: 7

Shivani Sonagara
Shivani Sonagara

Reputation: 1307

You can use button as type submit or take input as submit. Try like below:

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="destination.html">
        <label for="from">From:</label>&nbsp;
        <input type="text" class="form-control" id="from" placeholder="Enter start date" name="from">&nbsp;&nbsp;
        <label for="to">To:</label>&nbsp;
        <input type="text" class="form-control" id="to" placeholder="Enter end date" name="to">&nbsp;&nbsp;
        <label for="chart_type">Type : </label>&nbsp;
        <select id="chart" name="chart">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
            <option value="4">option 4</option>
            <option value="5">option 5</option>
            <option value="6">option 6</option>
        </select>
        <button type="submit" value="Go">Go</button>
</form>

Upvotes: 1

Related Questions