提交多个表单相同的jquery脚本

Submit multiple forms same jquery script

本文关键字：jquery 脚本 表单 提交      更新时间：2023-09-26

我有多个表单，我希望所有表单都由一个jquery脚本处理，当然我有正确工作的php函数，我分别尝试了它们。

这是我的脚本：

function proceso_form(type_form, id_div_error){
    var url = "my_url.php?form="+type_form; //functions
    var response = document.getElementById(id_div_error);
        response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
        response.style.display='block';
        $.ajax({
               type: "POST",
               url: url,
               data: $(this).serialize(), //ID form
               success: function(data)
                {
                    if (data==1){
                        window.location.reload();
                    }else{
                        response.innerHTML=data; // show PHP response.
                    }
                }
        });
        return false;
};

我的表格看起来像这个

<form id="contacto" name="contacto" method="post" onsubmit="proceso_form('contacto', 'cargando')">
                <input type="text"  name="name"class="form-control">
                <input type="text"  name="phone" class="form-control">
                <input type="email" name="email" class="form-control">
                <textarea style="height:100px;margin-bottom:0px" name="messaje" class="form-control"></textarea>
                <input style="margin-top:5px" type="submit" class="btn btn-block" value="SEND">
                </form>

我想我的问题是我不能把我的脚本放在onsubmit中，但老实说我不知道。

您的html必须看起来像

<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form(this, 'cargando')">
...
</form>

在功能内部：

function proceso_form(form, id_div_error){
    var $form = $(form);
    var url = "my_url.php?form="+$form.attr('id'); //functions
    var response = document.getElementById(id_div_error);
    response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
    response.style.display='block';
    $.ajax({
           type: "POST",
           url: url,
           data: $form.serialize(), //ID form
           success: function(data)
            {
                if (data==1){
                    window.location.reload();
                }else{
                    response.innerHTML=data; // show PHP response.
                }
            }
    });
    return false;
};

通过将this传递给函数，您就传递了整个表单引用。

希望它能有所帮助。

首先，它应该是：

<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form('contacto', 'cargando')">

return关键字在那里很重要。

接下来，data: $(this).serialize(), //ID form应该是：

data: $('#'+type_form).serialize(), //ID form

所以，你的脚本应该是这样的：

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<form id="contacto" name="contacto" method="post" onsubmit="return proceso_form('contacto', 'cargando')">
<input type="text"  name="name" class="form-control">
<input type="text"  name="phone" class="form-control">
<input type="email" name="email" class="form-control">
<textarea style="height:100px;margin-bottom:0px" name="messaje" class="form-control"></textarea>
<input style="margin-top:5px" type="submit" class="btn btn-block" value="SEND">
</form>
<div id="cargando"></div>

<script>
function proceso_form(type_form, id_div_error){
    var url = "my_url.php?form="+type_form; //functions
    var response = document.getElementById(id_div_error);
        response.innerHTML="<img src='img/loader.gif' style='margin-right: 5px;'/>Loading ..."; //
        response.style.display='block';
        $.ajax({
               type: "POST",
               url: url,
               data: $('#'+type_form).serialize(), //ID form
               success: function(data)
                {
                    if (data==1){
                        window.location.reload();
                    }else{
                        response.innerHTML=data; // show PHP response.
                    }
                }
        });
        return false;
};
</script>
相关文章：