javascript - How to stop duplicate data in jquery mobile after navigationg between pages -

i creating chat application in jquery mobile.the problem when navigate between pages , come chat page when submitting data data resent according number of times 1 has navigated between other pages

when perform full page refresh data sent once required.

i have tried adding data-ajax = false href of link(button) still doesnt work?

the html code:

<form id="form_message_user" method="post"     action="#user_requestmoreinfo_page   ">   <div data-inset="true">  <label for="requestmessage" class="ui-hidden-accessible"></label>      <textarea cols="40" rows="6" name="requestmessage"   id="text_user_message" placeholder="type message send "></textarea>   </div>   <input type="submit" value="submit" id="submitmessage" />   </form> 

the form on page

<div data-role="page" id="user_requestmoreinfo_page" data-theme="e"> 

the submission code:

    $(document).on('pageshow', '#user_requestmoreinfo_page',function(e){         var id_from = localstorage.loggedin_id;         var id_to = localstorage.user_schoolls_id; var message = $("#text_user_message").val();  $('#form_message_user').on('submit', function(e){ e.preventdefault();  if(message > 0 ){             // send data server through ajax call             // action functionality want call , outputjson our data                 $.ajax({url: '127.0.0.1/php/send.php',                     data: {message:message,id_from:id_from,id_to:id_to},                     type: 'post',                                        async: 'true',                          datatype: 'json',                     beforesend: function() {                         // callback function trigger before data sent                         $.mobile.showpageloadingmsg(true); // show ajax spinner                     },                     complete: function() {                         // callback function trigger on data sent/received complete                         $.mobile.hidepageloadingmsg(); // hide ajax spinner                     },                     success: function (result) {                     console.log(result);                     },                     error: function (error) {                         // callback function trigger on unsuccessful action                                         console.log(error);                     }                 });                            } else {             alert('please enter message');         }                    return false; // cancel original event prevent form submitting     });    }); 

on success console.log() displays json data according number of page navigations before getting page(#user_requestmoreinfo_page);

example:
if had navigate between other pages 3 times console.log() show output of 3 times

my guess you're binding event handler #form_message_user element each time #user_requestmoreinfo_page event handled. i'd try adding

$('#form_message_user').off('submit'); 

directly before

$('#form_message_user').on('submit', function(e){     // function body continues 

you try using .one:

$('#form_message_user').one('submit', function(e){     // function body continues 

according docs, should have same affect .off() followed .on():

http://api.jquery.com/one/