кнопка не работает, когда находится внутри формы

Question

В приведенном ниже коде, когда кнопка находится вне формы, она работает в ajax, но когда кнопка находится внутри формы, кнопка не работает.

HTML код

<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-запрос по нажатию кнопки

$(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);
            }
        });        
    });
});

Answer 1

Вы можете сохранить свою кнопку в форме и добавить type = "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>

Другой способдля предотвращения отправки формы будет использоваться onsubmit = "return false;" :

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

Или даже изменение кнопки на кнопку типа ввода будет работатьа также:

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

Answer 2

Попробуйте добавить type="button" к вашей кнопке в форме.

Поскольку тип кнопки по умолчанию - «отправить».

Answer 3

Вы можете использовать кнопку в качестве типа отправки или принять ввод в качестве отправки. Попробуйте как ниже:

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