Can I use same class name for multiple Ajax calls

2156 views jquery
-3

i have written a code that updates score1,score2 into the database tables, i have used JQuery

JQuery Ajax code is:

 $(document).ready(function() {
        $('#SampleForm').submit(
            function(event) {
                var id = $('.id').val();
                var score1 = $('.score1').val();
                var score2 = $('.score2').val();
                var data = 'score1='+ score1+'&score2='+score2+'&id='+id;
                $.ajax({
                    url : $("#SampleForm").attr("action"),
                    data : data,
                    type : "GET",

                    success : function(response) {
                        alert( response );
                    },
                    error : function(xhr, status, error) {
                        alert(xhr.responseText);
                    }
                });
                return false;
                location.reload(true)
            });

The JSP Code is

   <c:forEach var="item" items="${userinuser}">
<form action="/mark/update" method="get" id="SampleForm">
    <input type="hidden" value="${item.userScores.ID}" name="id" class="id"/>
    <input type="text" value="${item.userScores.score1}" name="score1" class="score1" size="2">
    <input type="text" value="${item.userScores.score2}" name="score2" class="score2" size="2">
    <input type="submit" value="update" class="btn btn-primary"/> </td>
</form>
</c:forEach>

And assume if we have ${userinuser} is 6,then 6 forms will be generated dynamically in this JSP Page All the 6 Forms uses the same class name for score1 as"score1" and score2 as"score2"

My Ajax call is working for the first time(first dynamically generated form) and it doesnt works for the remaining 5 Ajax calls. I know this way of coding will not be suitable for application

Can any one suggest me an good Idea!!!

answered question

2 Answers

4

The .submit event attaches the form that is submitted to the this. You can use that to specify in which form jQuery needs to look for the class.

$('.SampleForm').submit(function(event) {
  var score1 = $('.score1', this).val();
  var score2 = $('.score2', this).val();

  console.log('score1', score1);
  console.log('score2', score2);

  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="1" name="score1" class="score1" size="2">
  <input type="text" value="2" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

<form action="/mark/update" method="get" class="SampleForm">
  <input type="hidden" value="${item.userScores.ID}" name="id" class="id" />
  <input type="text" value="3" name="score1" class="score1" size="2">
  <input type="text" value="4" name="score2" class="score2" size="2">
  <input type="submit" value="update" class="btn btn-primary" />
</form>

Please do note that you can only use an id only one time in your document. Your SampleForm is invalid because it is used for all the forms.

posted this
13

You are generating 6 forms with the same id #SampleForm. When there are multiple nodes with the same ID, the first one will always come up.

You could instead use a className for your form:

<form class="SampleForm">

And then listen for submission on any of them:

$('.SampleForm').submit(...)

However, you still have a second issue. You're trying to get the data using the classnames of the input elements, and the action attribute of the first form. You could instead do:

 $('.SampleForm').submit(function(event) {
   ... code here ...

   var data = $(this).serialize(),
       url = $(this).attr('action');

   ... code there ...
})

posted this

Have an answer?

JD

Please login first before posting an answer.