Ajax提交所有表格

Question

I have a servlet that executes some operations on db, and the it is redirected to a jsp. Now in this jsp I have several forms that make different operations. I made a script that inserts data into db without refreshing.The problem is that this script is inserting data for all forms not for just one(that form that I want). Here is my jsp code:

   <form action="propunereteta" method="post" id="bookingForm">
     <div class = "tip">
                           <strong> <select name="tip11">  
                                <option>Tipul preparatului!</option> 
                                <option>Mic dejun</option>
                                <option>Pranz</option>
                                <option>Cina</option>
                            </select></strong>
                        </div>  

                          <a><button type = "submit" class="btnret" >Propune</button></a>
    </form> 

 <form action="nota" method="post">

 <div class="nota"><br /><br />
                     <div class="grid_6"> 
                            <input type="hidden" name="reteta1"  value="${Nume} "/> 

                                <input class="star star-5" id="star-5" type="radio" name="mark" value="100"/>
                                <label class="star star-5" for="star-5"></label>
                                <input class="star star-4" id="star-4" type="radio" name="mark" value="75"/>
                                <label class="star star-4" for="star-4"></label>
                                <input class="star star-3" id="star-3" type="radio" name="mark" value="50"/>
                                <label class="star star-3" for="star-3"></label>
                                <input class="star star-2" id="star-2" type="radio" name="mark" value="25"/>
                                <label class="star star-2" for="star-2"></label>
                                <input class="star star-1" id="star-1" type="radio" name="mark" value="0"/>
                                <label class="star star-1" for="star-1"></label> 

                     </div>

                </div>
             <a><button type = "submit" class="btnret" >Noteaza</button></a>

   </form>

Here is the script:

$("form").submit(function (e) {
              e.preventDefault();
              $.post($(this).attr("action"), $(this).serialize(), function () {
                 alert("Submitted!");
              });
            });

Now I want that script to be executed only for the last form, now is executed for all forms.

Could anyone help me? Thanks

Answer 1

Add id for both the forms and write ajax function for each of the forms.

This is the first form

<form action="propunereteta" method="post" id="firstForm"> 
    //form code 
</form>

And the second one

<form action="nota" method="post" id="secondForm">        
    //form code 
</form>

Then the two scripts

$("#firstForm").submit(function (e) {
    //do something
});
$("#secondForm").submit(function (e) {
    //do something
});