html表单，JQUERY

Question

我在我的index.page上有3份提交的表格。这些被发送到ServerSide，由jQuery / AJAX进行评估。

INDEX.php

• From1:登录

• Form2:注册

• From3: PwReset

问题:当我提交一个表单时，来自其他表单的其他值也会被发送。因此，我接收所有3种表单的FormValues，而不是实际的表单。

如何才能只从实际表单发送值/分离此表单？或者问题在哪里？

1:注册

        <form id="regForm" action="" onsubmit="serverRequest('Registration', 'includes/_userLogin.php');" class="custom-form" style="width: 100%;margin-top: 20px;margin-left: 10px;" method="post">
            <div class="d-inline-flex" id="regHeader" style="margin-bottom: 30px;width: 100%;border-bottom-style: solid;border-bottom-color: rgba(84,69,95,0.7);">
                <i class="material-icons d-flex d-lg-flex align-items-center align-items-lg-center" style="color: rgba(84,69,95,0.9);margin-top: 1px;margin-right: 5px;font-size: 42px;height: 48px;">person_outline</i>
                <h1 style="color: rgba(84,69,95,0.9);">Registration</h1>
            </div>
            
            <!-- Button close -->
            <a class="close hide_link" style="margin-left: -40px;padding: 8px;margin-top: -12px;text-shadow: 0px 0px 3px rgb(44,47,53);" onclick="return false;" href="#">
                <i class="material-icons" style="filter: invert(0%);font-size: 34px;color: rgb(55,47,61);">close</i></a>
            
            <!-- Mail -->
            <div class="form-row form-group formRow">
                <div class="col-sm-4 label-column"><label class="col-form-label" for="regMail">Email:&nbsp;</label></div>
                <div class="col-sm-6 input-column"><input id="regMail" name="regMail" class="form-control" type="email"></div>
            </div>

            <!-- Password -->
            <div class="form-row form-group formRow">
                <div class="col-sm-4 label-column"><label class="col-form-label" for="regPwd">Password:&nbsp;</label></div>
                <div class="col-sm-6 input-column"><input id="regPwd" name="regPwd" class="form-control" type="password"></div>
            </div>

            <!-- Password Repeat-->
            <div class="form-row form-group">
                <div class="col-sm-4 label-column"><label class="col-form-label" for="regPwdrep">Repeat Password:&nbsp;</label></div>
                <div class="col-sm-6 input-column"><input id="regPwdrep" name="regPwdrep" class="form-control" type="password"></div>
            </div>
            
            <!-- Registration Submit Button -->
            <button id="regSubmit" class="btn btn-primary btn-block d-flex justify-content-center align-items-center justify-content-md-center justify-content-lg-center button_registration"
                name="regSubmit" type="submit" style="width: 100%;background-color: rgba(84,69,95,0.9);box-shadow: inset 0px 0px 20px rgb(73,55,89);border: 1px solid rgba(0,123,255,0.28);margin-top: 35px;height: 45px;"><strong>Submit</strong></button>
            
            <!-- logError -->
            <div class="form-group d-flex d-sm-flex align-items-center order-7" style="margin: 0;height: 100%;margin-right: 10px;">
                <span class="logError" style="color: rgb(240,237,241);"></span>
            </div>
        </form>

表单2:重置密码

        <!-- Reset PW Form -->
        <form id="resForm" action="" onsubmit="serverRequest('pwReset', 'includes/_userLogin.php');" class="custom-form" style="width: 100%;margin-top: 20px;margin-left: 10px;" method="post">
            <div class="d-inline-flex" id="pwResetHeader" style="margin-bottom: 30px;width: 100%;border-bottom-style: solid;border-bottom-color: rgba(84,69,95,0.7);"><i class="material-icons d-flex d-lg-flex align-items-center align-items-lg-center" style="color: rgba(84,69,95,0.9);margin-top: 1px;margin-right: 5px;font-size: 42px;height: 48px;">person_outline</i>
                <h1 style="color: rgba(84,69,95,0.9);">Password Reset</h1>
            </div>
            
            <!-- Close Form -->
            <a class="close hide_link" style="margin-left: -40px;padding: 8px;margin-top: -12px;text-shadow: 0px 0px 3px rgb(44,47,53);" onclick="return false;" href="#">
                <i class="material-icons" style="filter: invert(0%);font-size: 34px;color: rgb(55,47,61);">close</i></a>
            
            <!-- Email -->
            <div class="form-row form-group formRow">
                <div class="col-sm-4 label-column"><label class="col-form-label" for="email-input-field">Email:&nbsp;</label></div>
                <div class="col-sm-6 input-column"><input id="resMail" name="resMail" class="form-control" type="email"></div>
            </div>
            
            <!-- New Password -->
            <div class="form-row form-group formRow">
                <div class="col-sm-4 label-column"><label class="col-form-label" for="pawssword-input-field">New Password:&nbsp;</label></div>
                <div class="col-sm-6 input-column"><input class="form-control" type="password" id="resPwd" disabled=""></div>
            </div>
            
            
            <!-- Submit -->
            <button class="btn btn-primary btn-block d-flex justify-content-center align-items-center justify-content-md-center justify-content-lg-center button_registration" id="resSubmit" type="submit" style="width: 100%;background-color: rgba(84,69,95,0.9);box-shadow: inset 0px 0px 20px rgb(73,55,89);border: 1px solid rgba(0,123,255,0.28);margin-top: 35px;height: 45px;"><strong>Send Mail</strong></button>
            
            <!-- logError -->
            <div class="form-group d-flex d-sm-flex align-items-center order-7" style="margin: 0;height: 100%;margin-right: 10px;">
                <span class="logError" style="color: rgb(240,237,241);"></span>
            </div>
        </form>

JS，JQUERY:

函数serverRequest(accessToken，filePath){

//Local Variables---------------------------------------
var formValue = "";
var path = filePath;
 
//Execute Function--------------------------------------
event.preventDefault();
formValue = $("form").serialize();              //creates a Form-String in standard URL-encoded notation
formValue += '&' + accessToken + '=true';
                
$.ajax({
    type: 'POST',
    url: path,
    data: {formInit:formValue},                 //Send formInit String            

    success: function(data){                    //CallBack function from Server

        $('.logError').html(data);              //Send Value from Server to Browser 
    }      
});

}

非常感谢你帮助我。

Answer 1

问题是在您的JS中，您没有选择任何特定的表单，而是选择每个表单，所以所有的东西都被发送了。所以你需要替换

formValue = $("form").serialize();

通过

formValue = $(id).serialize();

id表示要发送的表单的ID，并在serverRequest()函数中作为参数传递。

Answer 2

我调整JS / AJAX函数，如下所示：

函数serverRequest(accessToken，filePath){

//Local Variables---------------------------------------
var formID = "";
var formError = "";
var path = "";
var formValue = "";
 
//Execute Function--------------------------------------
event.preventDefault();

formID = "#" + accessToken;
formError = "#" + accessToken + "_Error";
path = filePath;

formValue = $(formID).serialize();              //creates a Form-String in standard URL-encoded notation
formValue += '&' + accessToken + '=true';
                
$.ajax({
    type: 'POST',
    url: path,
    data: {formInit:formValue},                 //Send formInit String            

    success: function(data){                    //CallBack function from Server

        $(formError).html(data);              //Send Value from Server to Browser 
    }      
});

}

然后，只需调整表单onsubmitEvent：

<form id="formID"  onsubmit="serverRequest('formID', 'includes/_userLogin.php');" ... >

    <span id="formID_Error"></span>
</form>