What is the best way to load positions select & gt; option?

  • 0
    There is a form with a select box & gt; option. The field is intended to select a day, namely five days, the first of which will start the day after tomorrow, i.e. if today is Tuesday, then the field must appear Thursday, Friday, Saturday, Sunday, and Monday.
    Now implemented like this:
    When you click on the day selection button, a JS Ajax request is made to the PHP file, which returns the required days, and then the received data is added to the field. Works, but there is a problem. I'll explain it right away with graphics.
    1. This is what the choice looks like:

    2. First click (you can see the appearance of one choice):

    3. The request is processed and the data is added and the picture changes:

    It works, but I want the absence of such blinking. What are the options?

    The option with loading data on page load can be complicated by the fact that if a person has not refreshed the page since yesterday, then the data will not be correct.
    JavaScript Blake Nunez, Aug 7, 2019

  • 1 Answers
  • 0

    1. All selection fields must come with the page. You don't need to load anything. Your PHP should generate & lt; select & gt; along with the rest of the page.

    2. if the person hasn't refreshed the page since yesterday, then the data will be incorrect.

      This can be solved in three ways:

      1. Just add validation to the server: check that the selected day is exactly within the allowed range. If not, throw an error. After refreshing the page, the user will see an error and try to repeat the request but with the actual data.

      2. On the client, you can add a timer that will update the selections at some interval. Again, this does not require making a request to the server.

      3. Add validation on the client and on the server. When trying to submit the form, the script checks if the date is valid. If not: updates the choices and shows the user a message that the selected date is not valid. And to avoid attempts to bypass the validation, you need to duplicate it on the server.

    Thus, when the page is loaded, you will immediately have options for choosing and you will avoid mistakes if you make the wrong choice.

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!