Two jquery submits, one action per

Question

I'm very new to JS/jquery (I'm a backend developer) and am having trouble implementing something. I am working with Django and have a template that has a text area that needs to have a submit event when the enter button is pushed. Here is 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 by Lead ID's or email addresses separated by a 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 the default enter action to submit the
    // search string on enter instead
    $('#search_str').keydown(function(e){
        // checks to see if the key pressed is the enter key and submit.
        // (13 is the code for the enter key)
        if (e.which == 13) {
            e.preventDefault();
            $('#leads_form').submit();
        }
    })
</script>

This submit populates a list where the user can select (via checkbox) a series of items. There is an action button for them to modify details of the selected items. When they press the action button a modal window pops up asking them to provide details regarding the changes requested. Here is my code for that piece.

<div id='give-reason' style="display: none">
    <p>Give your reason for this change.</p>
    <form>
        <input type="text" id="reason">
        <button type='button' id='reason-submit'>Submit your 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 I use .click() for the '#reason-submit' and the user clicks the submit button. If I use .submit() it does not work at all. First, if they click the submit button no action occurs (not surprising). Second, if they push enter the page refreshes - and all the data being displayed disappears.

Any suggestions on how I can solve this problem?

EDIT 1: I should mention that I've tried to use $(':focus') and can't seem to get that to work. I could be using it incorrectly (wouldn't be surprising).

EDIT 2: Thanks to asifrc and niiru I was able to get this working correctly with the 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 by Lead ID's or email addresses separated by a 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 your reason for this change.</p>
    <form id='reason-submit'>
        <input type="text" id="reason">
        <button type='submit'>Submit your reason</button>
    </form>
</div>

<script>
    // overriding the default enter action to submit the
    // search string on enter instead
    $('#search_str').keydown(function(e){
        // checks to see if the key pressed is the enter key and submit.
        // (13 is the code for the 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>

Answer 1

.click() works for obvious reasons. But, pressing enter will trigger the submit action, which will post the form. Instead, change your button type to submit, and prevent the default action of the submit event. This will handle you for any action that could trigger submitting the form.

<div id='give-reason' style="display: none">
    <p>Give your reason for this change.</p>
    <form>
        <input type="text" id="reason">
        <button type='submit' id='reason-submit'>Submit your reason</button>
    </form>
</div>

$('#reason-submit').submit(function(event){
    event.preventDefault();
    var lead_data = gather_lead_status($(this), update_type, true);
    var reason = $('#reason').val();
    lead_data(reason);
    $.fancybox.close();
    e.preventDefault();
});

Answer 2

The submit event can be binded to only certain type of elements. From the jQuery api docs http://api.jquery.com/submit/ :

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit , <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.

So try changing the type attribute of your button to "submit" and see if that works.

Better yet, just give your form tag an id and try attaching to the submit event for that..

Let me know if that helps :)