放置在窗体内时按钮不起作用

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>