Kendo form submit function is not firing

Question

I'm very new to kendo, so asking dumb questions is my thing. I've added a form to a grid so that the user can add new comments to a conversation.

On the front-end, a submit button shows up. Unfortunately, when I click the button nothing happens. The clear button has an alert and that alert pops up without a problem. It's just the submit button that doesn't work. Anybody see anything obvious?

$("<div/>").appendTo(e.detailCell).kendoForm({
    orientation: "vertical",
    formData: {
        comment: "enter text here"            
    },
    items: [{
        type: "group",
        label: "Add Comment",
        items: [{ 
                  field: "Comment", 
                  label: "Comment:", 
                  width: "85%", 
                  validation: { required: true } 
        }]
    }],                         
    submit: function(e) {
        alert("submit function");
        e.preventDefault();                             
        //var newComment = this.get("Comment");                              
        $.ajax({
            url: "/acme/common/submitFeedbackDetail.action?feedbackId=100&feedbackDetail=" + newComment,
            type : "GET",
            cache : false,
            contentType : "text/plain",
            datatype : "text",
            success : function() {
                alert("comment added");
            },
            error: function() {
                alert("comment failed");
            }
        });                                                                                                                            
    },
    clear: function(e) {
        alert("clear function");
    }
});

Answer 1

The element that you transform with the kendoForm() jquery plugin must be a form element. Otherwise you don't actually get an html form which is why the submit does not work. Try this:

$("<form></form>").appendTo(e.detailCell).kendoForm({

https://docs.telerik.com/kendo-ui/controls/layout/form/overview