Button onclick function in HTML keeps resetting the form input fields to default values. How can I avoid this?

Question

Hi I'm in the process of building a basic tableau extension using HTML and JavaScript that takes start and end dates from the user, on submission of which my view in Tableau gets filtered to the range.

However, each time I click submit in the form the dates keep getting resetting to the default value defined in my HTML code and passes that to my JS code to process. It does not retain the user input, could someone have a look at the code below and advise on what I'm missing here?

<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>

You need to disable the default behaviour of your button to return false or preventDefault() as, as it stands it's just submitting your page using the default behaviour of a button — TommyBs, Mar 04 '20 at 09:04

score 1 · Accepted Answer · answered Mar 04 '20 at 09:04

1

You can try this. Add an id to that button and add an eventlistener to prevent the default way form submission is handled

<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>

answered Mar 04 '20 at 09:04

Abhishek Prashant

365
1
4
14

Thanks for sharing this! This worked, further to enable the rest of the extension function to work, I just had to move the initializeAsync function within the button click Event listener. – Anubhov Sharma Mar 06 '20 at 05:39

Sushrut Singh Sisodiya · Answer 2 · 2020-03-04T10:07:38.913

1

By default button type is submit you have to change it to button like following

<button type="button">

edited Mar 04 '20 at 10:07

answered Mar 04 '20 at 09:10

Sushrut Singh Sisodiya

942
6
11

score 1 · Answer 3 · answered Mar 04 '20 at 09:10

Add the button type to your button type="button" or return false in the onclick.

<button type="button" onclick="tableau.extensions.initializeAsync()">Submit</button>

Or

<button onclick="tableau.extensions.initializeAsync(); return false">Submit</button>

score 0 · Answer 4 · answered Mar 04 '20 at 09:20

If you have form element, when you click button, it will submitted and becoz you have not set form action url, it will just reload page, so your input elements will be setted as defult string. so, you have to prevent form action. If you have only one button on your page, you can do like this

$('button').onClick(function (e)){
   // button actions here.
   e.preventDefault();
}

Button onclick function in HTML keeps resetting the form input fields to default values. How can I avoid this?

4 Answers4