Displaying a 'hidden' form once the first form is filled and submit button clicked

Question

i have two html forms where the second form has been set to 'display: none;' and therefore does not display when i load the page(only the first form loads)

the idea is once the first form has been filled in and its button clicked, to display the second form which after being displayed will be filled in and submitted to a 'thankyou page'

Here is the first form that displays once the page is loaded:

<form id = "form1" >
    <table class = "tbl">
    <tr>
    <td> Title * </td></tr> 
    <tr><td> <input type = "text" name = "title" class = "title" required> </td></tr>
    <tr>
    <td> First name * </td></tr> 
    <tr><td> <input type = "text" name = "fname" class = "fname" required> </td></tr>
    <tr><td>
    <button id = "btn" onClick="document.getElementById('form2').style.display='';"><img src = "images/Next.png" /></button></td></tr>  

    </table>
</form>

and here is the second form that should be displayed once the first has been successfully filled in and the submit button clicked(i have validated the first form with the 'required' attribute)..

<form id = "form2" method = "post" action = "thankyou_page.php">
    <table class = "tbl2">
    <tr>
    <td> Email * </td></tr> 
    <tr><td> <input type = "text" name = "email" class = "email" required> </td></tr>
    <tr>
    <td> Telephone * </td></tr> 
    <tr><td> <input type = "text" name = "phone" class = "phone" required> </td></tr>
    <tr><td>   <button id = "btn1"><img src = "images/Get_decorating_quotes.png" /></button></td></tr> 

i have then used an external css file for my styling..here's how i've done for 'form2'

#form2
{
    display: none;
}

what i get so far after loading my page is that once i hit the button on the first form('form1'), 'form2' is displayed THEN the validation message 'Please fill this field' displays..my wish is first for the form1 to validate the form and once ALL fields are filled, display 'form2'(using the onClick function passed to 'btn') while still having the content of 'form1' in the form as i fill in and submit 'form2'..

any help would be appreciated.

Answer 1

Try this using jQuery. Use onsubmit event and change the visibility of form2.

$("#form1").on("submit", function(){
    $("#form2").show();
});

Or use javaScript and set display to block

var form1 = document.getElementById("form1");

form1.onsubmit = function(){
    document.getElementById("form2").style.display = "block";
};

*Note : You have to maintain the partial form submission to make the second form visible, only the first form should be sent to the server, not the entire page.

Answer 2

What you need to do is call a validation function like so:

<button id = "btn" onClick="return validate();">

Then in you function have some sort of bool that you set if validation fails:

function validate() {
    var isValid = true;
    var form1 = document.getElementById('form1');

    if (form1.title.value == '') {
        isValid = false;
    }

    if (form1.fname.value == '') {
        isValid = false;
    }

    if (isValid) {
        document.getElementById('form2').style.display='block';
        return false;
    }
}

Excample