2

I have two forms on my page, one for username and password and one for a special verification pin. On my FIRST form I have the action set to return false, otherwise the page will refresh and will stop my hidden div from showing up with the second form which is a hidden div. I have a sign in button, which unhides the hidden div on click, and a submit button, which a user presses after their pin is entered. The problem I am having is that I want the final submit button to submit both forms. Is this possible?

This is what my sign in page looks like and when it is submitted it shows the hidden div which has another form that the user enters their pin. I would like the final submit button to process all 3 inputs.

This is the form that I have for the username and password, it is returning false so that it doesn't refresh the page

<form action="" method="POST" id="hello" onsubmit="return false;">

and the button that actually sign's in is here

<input class="btn_green_white_innerfade btn_medium" type="submit" 
name="submit" id="userLogin" value="Sign in" width="104" height="25" 
border="0" tabindex="5" onclick="showDiv()">
            <div class="mainLoginLeftPanel_signin">
                <label for="userAccountName"> username</label><br>
                <input class="textField" type="text" name="username" 
id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>
                <label for="userPassword">Password</label><br>
                <input class="textField" type="password" name="password" 
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
                <div id="passwordclearlabel" style="text-align: left; 
display: none;">It seems that you may be having trouble entering your 
password. We will now show your password in plain text (login is still 
secure).</div>

This is my second form

<form name="search-form" //this is the form that submits the final pin
                    id="search-form" 
                    action="#" 
                    class="form-search"
                    method="POST"
                    onsubmit="submitForms();">

This is the function I am using onsubmit

function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}

Loginaction.php is the script that I have and I want it to process all 3 inputs, username, password, and the special verification PIN.

My overall question is can i use the final submit button to process all 3 inputs through the script and if so how would i go about doing it?

UPDATE

I now have only one form, however with two buttons in, one submit and one that shows the hidden div, but the forms are not seeming to be submitted.

This is the current form I have - The first button I need to have it just show the hidden div, which it is doing, however the submit button which I want to have submit the username, password AND pin, does not seem to be working, what should I add to my form?

<!DOCTYPE html>
<html>
<head>
    <form>
    <input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
            <div class="mainLoginLeftPanel_signin">
                <label for="userAccountName">username</label><br>
                <input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br>&nbsp;<br>
                <label for="userPassword">Password</label><br>
                <input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
                <div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
                <div class="checkboxContainer">
                <div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select &quot;Logout&quot; from the account menu.  This feature is only available to PIN Guard enabled accounts.">
                <input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
                    </div>
                </div>
            </div>

    <div class="modal_buttons" id="login_twofactorauth_buttonsets"> 
        <div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
            <button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">

                <div class="auth_button_h3">submit</div>
                <div class="auth_button_h5">my authenticator code</div></button></div></div>
    </form>
</head>

Ashley Blyth
  • 139
  • 1
  • 3
  • 15
  • You can't submit three forms at once. you can only submit *one* at a time. Either add all controls to the same form and show the items when you need them to be entered, or glue your logic together with javascript and do Ajax calls. – Timothy Groote Aug 04 '17 at 15:02
  • 1
    Do you want to submit the `pin` form to see if the `pin` entered is correct? If so, just do an Ajax submit, return true/false (pin correct/incorrect) and then do your regular submit. – pookie Aug 04 '17 at 15:03
  • @TimothyGroote Of course you can submit multiple forms at once. You just call the `.submt()` method of each within a single function. – Scott Marcus Aug 04 '17 at 15:06
  • I am just experimenting so no, it doesn't matter if the pin is incorrect or not, I have also never used ajax before. I would just like my final submit button to submit the username, password and pin – Ashley Blyth Aug 04 '17 at 15:06
  • @ScottMarcus they would be submitted individually, and processed individually, which is the point i was trying to make. also, if we're going down that avenue, no, they *still* would no be submitted "at once", but one by one, sequentially that way. – Timothy Groote Aug 04 '17 at 15:07
  • So is what I'm trying to achieve actually do-able? – Ashley Blyth Aug 04 '17 at 15:10

4 Answers4

2

Instead, when the user clicks the login button, submit an Ajax request to the server to check the credentials:

// this is the id of the form
$("#loginForm").submit(function(e) {

    var url = "path/to/your/login.php"; // The script to check credentials

    $.ajax({
           type: "POST",
           url: url,
           data: $("#loginForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               // use data and process the response from the php script.
               // include a property in data to indicate if the validation passed. For example:
               if(!data.valid){
                  //Show the hidden PIN div
               }
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Do a similar thing with the PIN validation:

// this is the id of the form
$("#pinForm").submit(function(e) {

    var url = "path/to/your/pin.php"; // The script to check credentials

    $.ajax({
           type: "POST",
           url: url,
           data: $("#pinForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               // use data and process the response from the php script.
               // include a property in data to indicate if the validation passed. For example:
               if(!data.valid){
                  //WRONG PIN
               }
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});
pookie
  • 3,796
  • 6
  • 49
  • 105
  • Can I still use this if I am not validating the user inputs? – Ashley Blyth Aug 04 '17 at 15:18
  • @AshleyBlyth No reason in the world not to validate. If you *really* don't want to, then on the server, just set the return property to true so that `data.valid` is always `true`. – pookie Aug 04 '17 at 15:22
1

You are taking the wrong approach here.

You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.

You only need one form and one submit button.

Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.

Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thank you for the answer. So if I only use one form and change the sign in submit to a button that shows the div, when I finally submit the form will the username and password be submitted as well as the pin? – Ashley Blyth Aug 04 '17 at 15:27
  • @AshleyBlyth Only if you want them to. Any form element that has a `name` attribute and value will be included in the form's submission. To exclude an element from submitting its data, just don't give it a `name`. – Scott Marcus Aug 04 '17 at 15:29
  • @AshleyBlyth Just to clarify...Enclose all the fields in a single `form` element that has one regular `button` and one `submit` button. Use the first `button` to show the hidden `div` and the second to actually submit the form, knowing that only those fields that have had their `name` attribute set up will actually be submitted. – Scott Marcus Aug 04 '17 at 15:32
  • so I now have one form, a regular button to show the div, and then the submit button that works correctly, however no text is being submitted to my text file – Ashley Blyth Aug 04 '17 at 19:36
  • @AshleyBlyth Can you add and "UPDATE" section to your original question with the code you have now and we can take a look at it? – Scott Marcus Aug 04 '17 at 21:43
  • I have added an update, if you could take a look i would much appreciate it – Ashley Blyth Aug 04 '17 at 23:43
  • @AshleyBlyth I took a quick look and the first thing that jumps out at me is that your form tag is not configured to send data anywhere. You need to add an action attribute and a method attribute to it and just let it do the submission without any JavaScript intervention. That means removing the onsubmit attribute completely. Also, do not name a button submit as submit is the name of a method. Call it something like "btnSubmit". – Scott Marcus Aug 05 '17 at 01:27
-1

Hi what you can do is get a button submit and send all the info. Example: - form 1 and form 2 fields have diff id so you get that ids to a var or data and send it. This way you can submit the forms you want and validate, but there can only be only 1 submit final btw. You get all the data to var, ex:

$('#btnName').click(function() { 
 var form1 data = ...
 var form2 data = ...
 now if you set it a array, var, object, etc you can get the total data from the 2.
});

I hope this helps you

life.cpp
  • 30
  • 7
-1

Ok so you wanna send for example 2 forms, you can just have 1 php which gonna receive.

<?php
 $form1_id = $_POST['id'];
 $form2_id = $_POST['id2'];
?>

Ok so you have 2 input which gonna have the name of id and id2 (separated forms)

Now you gotta go on your html and add those 2 forms:

<form id='form1' action='#'>
 <input type="text" name="id" id="id"></input>
</form> 
<form id='form2' action='#'>
 <input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>

This was just an example i'm making on the phone.

After you have html and php or whatever you wanna do, this is just an example you go at ur js script:

$('#yo').click(function(){
 //btw just get the values now
 var id_form1 = document.getElementById(etc)
 var id_form2 = ...

 //now check whatever and use HttpRequest
 //to send it

});

I hope it has helped you beter

life.cpp
  • 30
  • 7