通用Ajax表单提交

Question

ajax / javascript问题：我有一个包含多种形式的应用程序。 我要实现的是使一个通用的js函数通过获取表单ID来将表单提交到其各自的控制器。我成功地在form_id变量中获取了表单ID，但无法使用它们。 我尝试用表单_id替换$（'Patient_form'）并得到以下错误：TypeError：form_id.on不是函数

以下代码可更好地理解问题：

$(function () {
    var form = document.getElementsByTagName("form");
    var form_id = "'#" + form[0].id + "'";

    form_id.on('submit', function (e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'Controllers/c_insertPatient.php',
            data: $('#patient_form').serialize(),
            success: function (result) {
                alert(result);
            }
        });

    });

});

Answer 1

您拥有form_id的方式是一个字符串。

试试： var form_id = $("#" + form[0].id);

Answer 2

$.ajax是一个jQuery函数。 如果要使用jquery（在这种情况下，我认为应该这样做），请按照以下步骤操作：

$('form').on('submit', function () {
    $(this).preventDefaults();

    $.ajax({
        type: 'post',
        url: 'Controllers/c_insertPatient.php',
        data: $('#patient_form').serialize(),
        success: function (result) {
            alert(result);
        }
    });
});

Answer 3

您应该将事件监听器设置为元素，而不是元素ID的字符串。 另外我认为您使用jQuery是因为您正在使用$ 。 在HTML中的表单上设置ID。 然后：

$(function () {
    var form = $('#theFormId');

    form.submit(function(event) {

       $.post('Controllers/c_insertPatient.php', form.serialize(), function() {
           alert('success');
       });        


       event.preventDefault();
    });
});

Answer 4

除了其他答案，您还想保持表单ID动态，这样您就可以插入所需的任何值了吗？

$(function () {
    var form = document.getElementsByTagName("form");
    // note you have to convert to jQuery object
    var form_id = $("#" + form[i].id); // i, so you can put in the id for any form

    form_id.on('submit', function (e) {

        e.preventDefault();

        $.ajax({
            type: 'post',
            url: 'Controllers/c_insertPatient.php',
            data: $(this).serialize(), // again, keep generic so this applies to any form
            success: function (result) {
                alert(result);
            }
        });

      });

});