CODEWITHSUNDEEP
javascriptphpmysql
Bart88
Bart88

Reputation: 163

Refresh chart(javascript) after doing mysql Query

I've got a javascript for drawing a chart. I get my information out of my MySQL base. And I got 3 different buttons to get the different information out of the database.

My problem now is, I get the information out of my database, it shows it in the chart but when it shows the information it refreshes the page.

Is there a way to show the information after my page is refreshed? I actually tried to use the window.onload but that doesn't give me the wanted result.

in php I use the following code to get the info from my MySQL DB:

if(isset($_POST['btnProduct']))
{   
  ....
}

in html it's like this:

<div class="content">
        <form action="" method="post" enctype="multipart/form-data">
            <input type="submit" name="btnProduct" id="btnFilterProduct">
        </form>
</div>

And in JS I use this code:

<script type="text/javascript"> 
    window.onload = function()
    {   
        document.getElementById('btnFilterProduct').onclick = function()
        {
         ....
        }
    }

I know the PHP needs to refresh to get the data. and Javascript doesn't. But can I change the order? Or is there a way to change my JS to let it load AFTER the page is refreshed?

Upvotes: 0

Views: 71

Answers (1)

Matthew Herbst
Matthew Herbst

Reputation: 31993

To stop the page reload, modify your onclick function to be:

document.getElementById('btnFilterProduct').onclick = function(event) {
  event.preventDefault();
  ...
}

event.preventDefault stops the default behavior of the event, which in this case is to refresh the page since you have an empty action. Another option would be to not use a form. Just use the <button> element instead.

Upvotes: 1

Related Questions