2 AJAX forms on same page: prevent open one if the other is already oppened

I have a page where the user views the data for 2 forms. One called Data part 1 and the other Data part 2. This two forms, at top, have a button EDIT so the user can edit the forms in the same pages.

When the user clicks Edit, it sends a AJAX request to my PHP Controller and I return the html rendered with all the input fields filled. It works.

My problem is that I want to prevent the user clicking on the first EDIT and then the second EDIT. If he's editing part 1 (or part 2), he has to save and then he can edit the second. When I save the form I don't save it via AJAX, the form is sent as a normal HTTP form.

How I can do that? It's well explained or need some image example?

Thank you in advance

update:

<h2>
    Form1
    <a id="projects_historics_edit_part_1" href="#" class="submitButton submit insideH"><span>Edit</span></a>
</h2>


<div id="projects_historics_part_1">
    <!-- display for form 1, when click at button edit from inside h2, this loads the form via ajax --&g开发者_Python百科t;
</div>

<h2>
    Form2
    <a id="projects_historics_edit_part_2" href="#" class="submitButton submit insideH"><span>Edit</span></a>
</h2>


<div id="projects_historics_part_2">
    <!-- display for form 2, when click at button edit from inside h2, this loads the form via ajax -->
</div>

---

A few options, you can possibly wire into the edit buttons javascript functionality that will disable the other edit button, pending a save.

button1's onclick:

$('#button2Id').attr('disabled', 'disabled');

Then on the save...

$('button').removeAttr('disabled');

Alternatively, you could set a hidden field to flag if you have one form or the other open, and simply check that hidden field's value before you execute the AJAX to create the form.