javascript - JQuery Ajax call stop refresing the page -

i have following html code:

<div>     <form id="chartsform">         <div id="optionsheader">             <p>choose page:</p>             <div id="dateoptions">                 <p>until date: <input type="date" name="until_date" value="until date"></p>                 <p>since date: <input type="date" name="since_date" value="since date"></p>             </div>         </div>         <select name="accmenu" id="accmenu" style="width:300px; float:left; clear:both;">             <?php             $user_accounts = $facebook->api('/me/accounts','get');             foreach($user_accounts['data'] $account) {             ?>                 <option data-description="<?php echo $account['category'] ?>" data-image="https://graph.facebook.com/<?php echo $account['id']; ?>/picture" value="<?php echo $account['id'] ?>"><?php echo $account['name'] ?></options>             <?php             }             ?>         </select>         <div class="insightsoptions">             <p>choose insights:</p>             <input id="newlikes" class="insightsbuttons" type="submit" name="submit" value="daily new likes">             <input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="daily unlikes">         </div>         <div class="insightsgraphs">             <div id="dailynewlikes"></div>             <div id="dailyunlikes"></div>         </div>     </form> </div> 

which has form id=chartform contain 2 date inputs until_date , since_date, 1 select accmenu , 2 submit inputs values daily new likes , daily unlikes. use following jquery function:

$(function () {     $('#accmenu').change(function() {         $(".insightsgraphs div").hide();         $(".insightsoptions input").attr("class","insightsbuttons");     });     $("#newlikes").one('click', function () {         $.ajax({type:'get', url: 'newlikes.php', data:$('#chartsform').serialize(), success:             function(response) {                 var json = response.replace(/"/g,'');                 json = "[" + json + "]";                 json = json.replace(/'/g,'"');                 var mydata = json.parse(json);                 var mychart = new jschart('dailynewlikes', 'line');                 mychart.setdataarray(mydata);                 mychart.setsize(960, 320);                 mychart.setaxisnamex('');                 mychart.setaxisvaluescolorx('#ffffff');                 mychart.setaxisnamey('');                 mychart.settitle('daily new likes');                 mychart.draw();             }});         return false;     });     $("#newlikes").on('click', function(){         $(this).toggleclass('green');         $('#dailynewlikes').toggle();     });     $("#unlikes").one('click', function () {         $.ajax({type:'get', url: 'unlikes.php', data:$('#chartsform').serialize(), success:             function(response) {                 alert(response);                 $("#dailyunlikes").html(response);             }});         return false;     });     $("#unlikes").on('click', function(){         $(this).toggleclass('green');         $('#dailyunlikes').toggle();     }); }); 

for application flow in following manner: every time click on 1 of input submit buttons script make 1 ajax request specific php file send me response create chart in hidden div id=dailynewlikes or id=dailyunlikes case (for testing purposes work moment on first button). button change background color green , div shown. use $("#newlikes").on('click', function(){ change , forth background color , display time of div. (from green , display:block red , display:none, point hope :d). use $('#accmenu').change(function() { change buttons red , hide respective div in case option select changed. problem after refresh page (ctrl+r) choose since , until date, click on first button (it change green , div shown, toggle working fine) , click on second button works fine on first click (is becoming green , div shown) on second click have issue: script making ajax request (a wrong url one) , page refreshed. ex. of reguest url:

http://localhost/smd/unlikes.php?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701 

and ex. of wrong request url:

http://localhost/smd/?until_date=2013-05-01&since_date=2013-04-01&accmenu=497232410336701&submit=daily+unlikes#_=_ 

like can seen (it doesn't need in first make request) php file not present , new submit parameters added. happen if change select option. wrong? need know, not have code "fixed". bugging me little while. feedback more welcomed. p.s. also, how can start .one function if both date inputs has been choosen? how me?

var until = $('#dateoptions input[name="until_date"]').val(); var since = $('#dateoptions input[name="since_date"]').val(); if (until == "" || since == "") {     alert('until date or since date missing!');     return; } 

it work way? sorry long question...

i think should make question little shorter , point need , errors getting ..anyways...going through code see have 2 click event same button @ end $("#unlikes").one , $("#unlikes").on(..and no return false in other function.

try adding return false

$("#newlikes").on('click', function(){     $(this).toggleclass('green');     $('#dailynewlikes').toggle();     return false; });  $("#unlikes").on('click', function(){     $(this).toggleclass('green');     $('#dailyunlikes').toggle();     return false; }); 

my guess , since have 2 click event..when gets clicked ..these event fire , since missing return false in second click function...the form gets submitted hence refreshing form.

however better if put codes in single click function creating 2 seperate click event.