document.ready function called again after submit button?

Question

In doc.ready I am dynamicaly generating a select option list via parsing an html table -> selected_Test_Platforms When I click the submit button I want to submit the selected options and run main()

The main() function does a lot of calculation and finaly prints some google charts.

Every time I click the Submit button, the main() function is exectuted correctly, but shortly after that the document.ready function is also called and everything is overwritten!

Why is the document.ready function called again even if I only want to call main?

$(document).ready(function() {
//...
// ---------------------------------------------------------------------//
// find Affected TestPlatforms and add them to the selector
// ---------------------------------------------------------------------//
    $('tbody tr').each(function() {
        var TestPlatform = $(this).find('td.Affected').text(); //Affected Test Platforms
        aquireTestPlatforms(TestPlatform);
    });
    addTestPlatformsToSelector();
});

function main(){

//...multiple lines of calculation...

// example of one Chart
    google.charts.setOnLoadCallback(drawSOWCoverageChart);
    function drawSOWCoverageChart(){
    
        var data = google.visualization.arrayToDataTable([
            ['Type', 'Count'],
            ['Positive Tested and Tested with Restrictions', posSOWTestCoverage],
            ['other states', SOWReqCount-posSOWTestCoverage]
        ]);

        var options = {
            title: 'Test Coverage',
            width: 600,
            height: 400,
            legend: { position: 'right',alignment: 'center', maxLines: 3 },
            chartArea: {left:80, bottom:20},
            colors: ['#109618', '#DC3912']
        };

        var chart = new google.visualization.PieChart(document.getElementById('SOWCoverageChart'));
        chart.draw(data, options);
    }
//...
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Report manipulation options:</a>
      </div>

      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <select id="selected_Test_Platforms" class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
          </select>
        </div>
        <div class="form-group">
          <select id="selected_SIL_relevant" class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
              <option value='all' selected>-All-</option>
              <option value 'Safety Relevant'>Safety Relevant</option>
              <option value 'QM'>QM</option>
          </select>
        </div>
        <button onclick="main()" class="btn btn-default">Submit</button>
      </form>
    </div>
  </nav>
</div>

document.ready is called again because the `form` is being submit on the button click and the page is reloading... — Rory McCrossan, Aug 11 '17 at 09:48

Terry · Accepted Answer · 2017-08-11T10:45:16.897

That is because the default action of the <button> element is to submit the form. Basically you are executing main() and reloading the page: this causes the $(document).ready(...) event to fire again. You can simply call event.preventDefault in the button function, or use <button type="button"> to override form submission behavior.

The simplest solution:

<button onclick="main()" class="btn btn-default" type="button">Submit</button>

Otherwise, you will have to capture the event and prevent default behavior, i.e.:

function main(e) {
    e.preventDefault()

    // Rest of the code here
}

With regards to the second solution: it is always better to attach event handlers to elements instead of using inline JS. We can give your button an ID:

<button id="submitButton" class="btn btn-default">Submit</button>

And then simply attach the click event listener to it:

$(document).ready(function() {
    $('tbody tr').each(function() {
        var TestPlatform = $(this).find('td.Affected').text(); //Affected Test Platforms
        aquireTestPlatforms(TestPlatform);
    });
    addTestPlatformsToSelector();

    $('#submitButton').on('click', function(e) {
        e.preventDefault();

        // All of main() code can go in here
    });
});

document.ready function called again after submit button?

1 Answers1

Linked