html Forms, JQUERY

Question

I have 3 submit forms on my index.page. Those are sent to the ServerSide, by jQuery / AJAX, to evaluate.

INDEX.php

From1: Login
Form2: Register
From3: PwReset

Problem: When I submit one form, other Values from other Forms are sent too. So, I receive FormValues of all the 3 Forms, instead of the actual Form.

How isit possible to send only values from the actual form / separate this form? Or where is the problem?

From 1: Registration

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

Form 2: Reset Password

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

function 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 
    }      
});

}

Thank you very much for helping me.

What is serverRequest('x', 'y'); doing? Please edit your question to show us all relevant code. I suspect that method is doing something like $('input') to get all inputs instead of $('#resForm input'). — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented Aug 20, 2020 at 17:04
exactly. so I need to hide / forbid other forms somehow, or adjust JS — Carlson
– Carlson, Commented Aug 20, 2020 at 17:07
Please edit your question to show us the full method serverRequest — WOUNDEDStevenJones
– WOUNDEDStevenJones, Commented Aug 20, 2020 at 17:13

redheness · Accepted Answer · 2020-08-20 17:10:45Z

1

The problem is in your JS, you do not select any specific form but every form, so everything is sent. So you need to replace

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

by

formValue = $(id).serialize();

id represents the ID of the form you want to send and is passed as an argument in your serverRequest() function.

answered Aug 20, 2020 at 17:10

redheness

3431 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Carlson Over a year ago

doesnt it makes the formhandling more elaborative? e.g If I have 100forms, is need to write / repeat code 100times

redheness Over a year ago

No, you still have a single method for all form (serverRequest()), called at each form, with just one additional parameter to tell it which form is handled. It's only a very minor change for you code.

Carlson · Accepted Answer · 2020-08-20 19:13:59Z

I adjust the JS / AJAX function, like this:

function 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 
    }      
});

}

then just adjust the form onsubmitEvent:

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

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

Collectives™ on Stack Overflow

html Forms, JQUERY

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related