HTML中的按钮onclick函数会将表单输入字段重置为默认值。如何避免这种情况?

问题描述 投票:1回答:1

[您好,我正在使用HTML和JavaScript构建基本的Tableau扩展,该扩展从用户处获取开始和结束日期,提交后,我在Tableau中的视图将过滤到该范围。

但是,每次单击表单中的提交时,日期都会不断重置为HTML代码中定义的默认值,并将其传递给我的JS代码进行处理。它不保留用户输入的内容,有人可以看看下面的代码,并建议我在这里缺少什么吗?

<html>
    <head>
        <title>My Extension</title>
        <script src="/tableau.extensions.1.latest.js"></script>
    </head>
    <body>
        <h1>Hello! This is a basic filter extension</h1>
        <form>
          <label for="sdate">Start Date:</label><br>
          <input type="date" id="sdate" name="sdate" value="2015-01-01"><br>
          <label for="ldate">End Date:</label><br>
          <input type="date" id="ldate" name="ldate" value="2016-01-01"><br><br>
            <button onclick="tableau.extensions.initializeAsync()">Submit</button>
            <script>
            tableau.extensions.initializeAsync().then(() => {
                let fieldName = 'Order Date';
                let dashboard = tableau.extensions.dashboardContent.dashboard;
                let selectedWorksheet = dashboard.worksheets.find(w => w.name === 'Sale Map (2)');
                updateFilterRange(selectedWorksheet, fieldName);
            });
            function updateFilterRange(worksheet, fieldName) {
                let today=new Date();
                var lastDate=new Date(document.getElementById("ldate").value);
                var startDate=new Date(document.getElementById("sdate").value);
                worksheet.applyRangeFilterAsync(fieldName, { min: startDate, max: lastDate});
            }
            </script>
        </form>

    </body>
</html>
javascript html tableau
1个回答
0
投票

您可以尝试这个。向该按钮添加一个ID并添加一个事件监听器,以防止处理表单提交的默认方式]

<button id = "submit">Submit</button>
<!-- HTML Code -->
<script>
  const button = document.getElementById("submit")
  button.addEventListener("click", function(e) {
    e.preventDefault()
    // Your code for handling button click
  }
</script>
© www.soinside.com 2019 - 2024. All rights reserved.