javascript - Two jquery submits, one action per -

i'm new js/jquery (i'm backend developer) , having trouble implementing something. working django , have template has text area needs have submit event when enter button pushed. here how i've implemented that.

<div class="search multi-search">     {% if search_str %}         <textarea name="search_str" id="search_str">{{ search_str }}</textarea>     {% else %}         <textarea name="search_str" id="search_str" placeholder="search lead id's or email addresses separated comma."></textarea>     {% endif %}         <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button> </div>   <script>     // overriding default enter action submit     // search string on enter instead     $('#search_str').keydown(function(e){         // checks see if key pressed enter key , submit.         // (13 code enter key)         if (e.which == 13) {             e.preventdefault();             $('#leads_form').submit();         }     }) </script> 

this submit populates list user can select (via checkbox) series of items. there action button them modify details of selected items. when press action button modal window pops asking them provide details regarding changes requested. here code piece.

<div id='give-reason' style="display: none">     <p>give reason change.</p>     <form>         <input type="text" id="reason">         <button type='button' id='reason-submit'>submit reason</button>     </form> </div>  $('#reason-submit').submit(function(){     var lead_data = gather_lead_status($(this), update_type, true);     var reason = $('#reason').val();     lead_data(reason);     $.fancybox.close();     e.preventdefault(); }); 

this works wonderfully if use .click() '#reason-submit' , user clicks submit button. if use .submit() not work @ all. first, if click submit button no action occurs (not surprising). second, if push enter page refreshes - , data being displayed disappears.

any suggestions on how can solve problem?

edit 1: should mention i've tried use $(':focus') , can't seem work. using incorrectly (wouldn't surprising).

edit 2: asifrc , niiru able working correctly following.

<div class="search multi-search">    {% if search_str %}        <textarea name="search_str" id="search_str">{{ search_str }}</textarea>    {% else %}        <textarea name="search_str" id="search_str" placeholder="search lead id's or email addresses separated comma."></textarea>    {% endif %}    <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button> </div>  <div id='give-reason' style="display: none">     <p>give reason change.</p>     <form id='reason-submit'>         <input type="text" id="reason">         <button type='submit'>submit reason</button>     </form> </div>  <script>     // overriding default enter action submit     // search string on enter instead     $('#search_str').keydown(function(e){         // checks see if key pressed enter key , submit.         // (13 code enter key)         if (e.which == 13) {             e.preventdefault();             $('#leads_form').submit();         }     })      $('#reason-submit').submit(function(e){         e.preventdefault();         var lead_data = gather_lead_status($(this), update_type, true);         var reason = $('#reason').val();         lead_data(reason);         $.fancybox.close();     }); </script> 

the submit event can binded type of elements. jquery api docs http://api.jquery.com/submit/ :

the submit event sent element when user attempting submit form. can attached <form> elements. forms can submitted either clicking explicit , <input type="image">, or <button type="submit">, or pressing enter when form elements have focus.

so try changing type attribute of button "submit" , see if works.

better yet, give form tag id , try attaching submit event that..

let me know if helps :)