使用jQuery在表单上加载HighCharts图表/数据

I have a PHP page with form, which when submitted should return a HighCharts chart and a table with the data being charted. The form sends a $_POST request to another PHP file which retrieves the variable, queries the database, and returns the data as an array, which is added to the HighCharts script as multiple series and output into the table.

I would prefer that the chart and table not be visible until the form has been submitted, however no matter how I code it, I cannot change the visibility of the 2 DIV's. When the page loads, this jQuery is triggered:

$(function() {
$('#tableData').hide();
$('#chart-container').hide();
$('#submit').click(function() {
    $('#tableData, #chart-container').show();
    });

When the form is submitted, all of the data is returned, and I can see it all in the Inspector, but both the #tableData and #chart-container divs still show display:none.

I've tried binding the .show method to .on events, .click events, and .submit events, but none work.

Reading the HighCharts API reference, it looks like I need to create a separate function to request the data, then call that function in a load event, I just can't figure out how to do it. I'm not using AJAX to return the data, which is the method they show in the examples.

How can I hide these divs and show them once the submit button is clicked?

I think what was happening is that every time the page submitted, the .hide method would hide the divs, even though data was returned.

I ended up moving the 2 divs into a conditional PHP statement, so they don't exist unless the POST request has certain values. Removed the jQuery completely and it's working, although I'm still curious why it wasn't before.