使用AJAX加载表单将在提交失败后松散表单和值

Question

I have a PHP page that loads several parts of a form using AJAX. For instance, first check if the user is already registered, if so the script loads (with AJAX) the rest of the form. The form will not be submited using AJAX what can be a problem when the user submits the form (without AJAX) - imagine there are some errors - the form will loose all values. I'm wondering if CSS hiding part of the form and after the successful login use JS to display the rest of the form, would be better.

Here some code:

<form action="some_action.php">
    Email: <input type="text" name="email" id="email"> <br />
    Password: <input type="password" name="password" id="password"> <br />
    <button id="vrf_login">Verificar</button>

    <div id="rest_form">

    </div>
</form>  

AJAX: - CHECK login: if email and password matches then - LOAD the form for div with id "rest_form" (it is in another file, for instance:

<input type="text" name="place" id="place">
<input type="text" name="age" id="age">
<input type="submit" name="submit" value="submit">

)

The problem is if I submit the form (without AJAX) and there are errors I will loose the form loaded with AJAX

EDIT (again)

Thank you all for your constructive suggestions: The solution I adopted is close to the first Alkis's suggestion:

• almost all the form is hidden (CSS)

• after some logic choices the (part of the) form is turned visible (jQuery) - to "remember" what parts should be visible in case of submission failed (server side validation) some session variables hold the information (AJAX) - and then, after the submission (failed) use jQuery to restore the prior form structure (get the session variables with JS this way: var xpto = "<?php echo $_SESSION['prior_xpto']; ?>" ; )

• the fields of the form will remember theirs values (with PHP)

Answer 1

You have 3 options.

1. Stop loading the whole form by ajax. Hide it with css and show it if the the conditions are met. If the page is shown after some validation error, just show it (change the css inline or give it a different class)
2. Have a condition and every time the page loads check if it is a first load or if the page is shown after some validation error occured. If the latter is true then load again the form with ajax. This condition can be a hidden field that takes its value from the server and you check it on the client every time you serve the page.
3. The second solution can be done on the server too. Have the condition be checked on the server. If it's a first load, then don't populate the form and let it be populated from ajax as you do now. If it's after a validation error then pre-populate the form. It's just an if/else clause.