时间戳

首页 > 解决方案 > 放置在表单内时按钮不起作用

javascript - 放置在表单内时按钮不起作用

问题描述

在下面的代码中，当按钮被放置在表单之外时，它在 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);
            }
        });        
    });
});

标签： javascriptjqueryhtmlajax

解决方案

您可以将按钮保留在表单中并添加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">

推荐阅读