How to disable all inputs and textboxes after a form submitted?

Question

I have several issues to discuss with you:

1. I need all elements in the form disabled after a server answer "400" from ajax. So the user knows that he just submit that form (ajax).
2. I'm also thinking of setting a status to "readonly" after a submit is clicked as well.

The reasons behind these issues is: I have a booking form which a user can choose multiple rooms for a group. So each room must have it's own guest. Saying I want to make a booking of 3 rooms for my friends. So I select the check-in and check-out. Number of rooms (3). And put in my friends' detail to each form. After I submit the first room. The data has uploaded and all the fields are disabled. Then I do the same to next room by clicking a tab. As pictured below:

Further requirements:

1. Do you have some example of jQuery disable form elements after submit?
2. Is there a better way of booking multiple rooms in the same time than this?

Answer 1

When you receive the status 400 from ajax call, call the below statement.

 $('#formID input[type=text]').attr("disabled",true);

This will disable all the input text boxes that are under the 'formId'.