Unexpected form submittion

Unexpected form submittion


I'm using JQuery (v1.11.0) on a internal webApp to edit/modify the data on a schedule made up of multiple rows.   I have buttons that activate a row for editing, cancel or save (submition  via ajax).

The problem I have is that if I actually include a form element, the page automatically submits for any gesture, such as selecting the input fields, tabbing etc.  If I omit the form element, I cannot access the input values.

My form

                <form class="schedule-form">
                    <tr id="{{ row.id }}" row-id="{{ row.id }}" class="schedule-row editable" >
                        <td>
                            <div>
                                <button class="initiallyShown edit" >Edit</button><br/>
                                <button class="initiallyHidden cancel" >&cross;</button><br/>
                                <button class="initiallyHidden save" >&checkmark;</button><br/>
                            </div>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.client_name }}</div>
                            <input class="initiallyHidden" type="text" name="client_name" value="{{ row.client_name }}" size="10"/>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.project_name }}</div>
                            <input class="initiallyHidden" type="text" name="project_name" value="{{ row.project_name }}" size="10"/>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.account_manager }}</div>
                            <input class="initiallyHidden" type="text" name="account_manager" value="{{ row.account_manager }}" size="10"/>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.resource_level }}</div>
                            <input class="initiallyHidden" type="text" name="resource_level" value="{{ row.resource_level }}" size="10"/>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.resource_name }}</div>
                            <input class="initiallyHidden" type="text" name="resource_name" value="{{ row.resource_name }}" size="10"/>
                        </td>
                        <td>
                            <div class="initiallyShown">{{ row.day_rate }}</div>
                            <input class="initiallyHidden" type="text" name="day_rate" value="{{ row.day_rate }}" size="4"/>
                        </td>
                        <td>{{ row.total_days }}</td>
                        <!--<td>{{ row.start_date }}</td>-->
                        <!--<td>{{ row.end_date }}</td>-->
                        <td>
                            <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
                                <div class="scroll-content">
                                    {% for week in row.weeks %}
                                        <div class="scroll-content-item ui-widget-content initiallyShown">{{week}}</div>
                                        <input class="scroll-content-item ui-widget-content initiallyHidden" type="text" id="inputCommitment" value='{{week}}' week_date="{{week}}" min="0" max="5" size="3" align=""/>
                                    {% endfor %}
                                </div>
                            </div>
                        </td>
                    </tr>
                    </form>


My Script

$(document).ready(function(){

    console.info('ready');

    $('.initiallyHidden').hide();

    $('button.edit').click( function() {
        $(this).hide();

        console.info('edit');

        var div = $(this).parent();
        var td = div.parent();
        var tr = td.parent();

        tr.css( "border", "3px solid green" );
        tr.find('.initiallyHidden').show();
        tr.find('.initiallyShown').hide();

        console.info('modify handler');
        });

    $('button.cancel').click( function() {
        $(this).hide();

        console.info('cancel');

        var div = $(this).parent();
        var td = div.parent();
        var tr = td.parent();
        var form = tr.parent();

        tr.css( "border", "1px solid black" );
        tr.find('.initiallyHidden').hide();
        tr.find('.initiallyShown').show();

        console.info('cancel handler');
        });

    $('button.save').click( function() {
        $(this).hide();

        console.info('save')

        var div = $(this).parent();
        var td = div.parent();
        var tr = td.parent();
        var form = tr.parent();

        tr.css( "border", "1px solid black" );
        tr.find('.initiallyHidden').hide();
        tr.find('.initiallyShown').show();

        // $.post( "/ajax/modify/schedule", $( "#schedule-row" ).serialize() );

        $.post( "/ajax/modify/schedule", {
            client_name: "client name",
            project_name: "project name",
            account_manager: "account manager",
            resource_level: "resource level",
            resource_name: "resource name",
            day_rate: 100 } );

        console.info('save handler');
        });

    $('button.submit').click( function() {
        $(this).hide();

        console.info('save')

        var div = $(this).parent();
        var td = div.parent();
        var tr = td.parent();
        var form = tr.parent();

        tr.css( "border", "1px solid black" );
        tr.find('.initiallyHidden').hide();
        tr.find('.initiallyShown').show();

        $.post( "/ajax/modify/schedule", $( "#schedule-form" ).serialize() );

        console.info('save handler');
        });

    $(".colour-coded:contains('5')").css("background-color", "green");
    $(".colour-coded:contains('4')").css("background-color", "yellow");
    $(".colour-coded:contains('3')").css("background-color", "yellow");
    $(".colour-coded:contains('2')").css("background-color", "yellow");
    $(".colour-coded:contains('1')").css("background-color", "red");

    console.info('end ready');
    });

If I strip out all the JQuery and just use pure javascript ajax this doesn't happen.

How is my form being submitted and how do I stop it?