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>

放在表单中时按钮不起作用

3 个答案: