Creating numbered forms based on user input

Question

I have a page that never refreshes and everything server wise is relayed using Ajax. There is a form that asks the user for information and then asks how many pages they want to have. The amount of pages ranges from 2-15. Once the user is done, they click to go to the next part (with no refresh). The next part is where the user can create their pages. A form will be displayed and asks the user to enter a subtitle and text. Let's say the user desires 10 pages. This form will be marked as page 10. When the user fills out this information, they will click on a "+" button where the next form is displayed (page 9), the user enters data, and then clicks on the "+" button again to display form number 3 (page 8) and so on. How do I make it so that each form being displayed is unique to that page number? Also, how do I make it so that if the user clicks the back button to change the amount of pages to let's say 11, the numbers on the next page change accordingly (i.e: first form will be page 11, second form will be page 10, etc).

Here's my code for the first part:

HTML

<form class="article_information_form" action="" method="POST">

                            <p>Number of pages</p>
                            <select id="numPages" name="numPages">
                                <option value="" selected></option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                            </select><br>
                             <input id="btn" type="submit" name="article_info_btn" value="Submit">
                        </form>
                    </div> <!--End of article information div-->

jQuery

$('.article_information_form').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {
                            $(".article_Information").fadeOut("slow");
                            $(".article_properties").fadeIn("5000");
                            $('#pageNumber').text($('#numPages option:selected').val());
                        }
                    });
                })

Second part

HTML

<form id="article_properties_form">
                        <p>Page Number</p><p id="pageNumber"></p>
                            <p>Subtitle</p>
                            <input type="text">

                            <p>Text</p>
                            <textarea></textarea>
                            <input type="submit" value="Submit/Update">
                        </form>

                        <div id="button" style="width: 25px; height: 25px; background-color: orange; border-radius: 50%"><p style="text-align: center; line-height: 25px">+</p></div>
                    </div> <!--End of article properties div-->

jQuery

$('#button').click(function()
            {
                $('#pageNumber').text($('#numPages option:selected').val() - 1);
            });

How should I make it so that when the user clicks the "+" button, a form is created with a logical ordered page number? i.e: first form page 10, second form page 9, etc. and these numbers should adapt based on any changes made to the overall amount of pages.

Answer 1

You'll have to extend your onsubmit page numbering code, eg: $('#pageNumber').text($('#numPages option:selected').val());, to something a little more extensive that sets all the form pages' id "pagenum" values depending on an increase or decrease in page numbers.

On an increase you can just iterate through the form page's container, eg: for (child in formpagesContainer.children) { // set the id "pagenum" value

On a decrease you'll have to determine what to do with the excess pages and then iterate and set the id "pagenum" value.

Your button code will remain ok for the fresh page.

Answer 2

Once the user has selected the number of pages (on submit of the first form), store that value in a variable. And then in the '+' click handler, display that variable's value and subtract one from it each time. After the '#article_properties_form' is submitted, clear the input fields. This could be done by giving the inputs an id and then using $('#whatever').val('').

If the user wants to update number of pages, you would need a second variable which saves the original number of pages desired. That way, once they go to update the number they want, you can take the difference between the new number and the original, and either add or subtract pages to update the first variable which is holding the number of remaining pages.

Does that make sense at all? You would need logic within the first 'submit' handler, to check if it is the first submission or not, that way you know whether to do the comparison business mentioned in my second paragraph.