提交多個表單相同的jQuery腳本

Question

我有多種形式，我希望所有這些都可以由一個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 ，但老實說我不知道​​。

Answer 1

首先，應該是：

<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>

Answer 2

您的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的功能，您傳遞整個表單參考。

希望會有所幫助。