Backbone-forms.js - how to render submit button in example from the github "docs"

Question

this is the code from backbone-forms. for now, i would like to render a submit button to validate my textfield and stuff, which is documented, except how to get that submit button into the dom. feel free to downvote, anyways in my opnion this is hard to figure out for noobs

(function($) {
    var cities = {
        'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
        'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
    };

    //The form
    var form1 = new Backbone.Form({
        schema: {
            country: { type: 'Select', options: ['UK', 'USA'] },
            city: { type: 'Select', options: cities.UK },
            message: { type: 'Text'}
        }
    }).render();

    form1.on('country:change', function(form1, countryEditor) {
        var country = countryEditor.getValue(),
            newOptions = cities[country];
            form1.fields.city.editor.setOptions(newOptions);

    });

    //Add it to the page
    $('body').append(form1.el);
})(jQuery);

score 5 · Accepted Answer · answered Mar 31 '13 at 17:41

You need to get down with a BBF template my friend!

Although appending it is one way of doing it, you should really stick to the BBF way of implementing the buttons. You can create different templates or re-use them when necessary and from here you can add attributes to your form etc. . Hope this helps...

Check the working demo: http://jsfiddle.net/c5QHr/116/

$(function() {

//// Set the template -----------------------------> 
Backbone.Form.setTemplates({
    customTemplate: '<form id="your-form-id">{{fieldsets}}<input id="your-form-cancel" type="reset" value="cancel" name="reset" /><input type="submit" value="submit" name="submit" />'

});

var cities = {
    'UK': ['London', 'Manchester', 'Brighton', 'Bristol'],
    'USA': ['Washington DC', 'Los Angeles', 'Austin', 'New York']
};

//The form
var form = new Backbone.Form({
    //// Use the template ----------------------------->
    template: 'customTemplate',
    schema: {
        country: { type: 'Select', options: ['UK', 'USA'] },
        city: { type: 'Select', options: cities.UK }
    }
}).render();

form.on('country:change', function(form, countryEditor) {
    var country = countryEditor.getValue(),
        newOptions = cities[country];

    form.fields.city.editor.setOptions(newOptions);
});

//Add it to the page
$('body').append(form.el);

////Do something with the buttons ----------------------------->

$("#your-form-id").submit(function(){alert('BBF Form was submitted!'); return false;});
$("#your-form-cancel").on('click',function(){alert('BBF Form was cancelled!'); });

});

score 1 · Answer 2 · answered Jan 29 '13 at 21:00

it is possible to add a submit button into the form with jQuery like so

$('yourBackboneform').append("<input type='submit' value='submit' name='submit' /><input type='reset' value='reset' name='reset' />");

the main purpose of backbone forms is ajax driven auto update crazy stuff for mobile so they decided not to render submit form stuff by default, i guess

Backbone-forms.js - how to render submit button in example from the github "docs"

2 Answers2