Détecter en Javascript le formulaire qui a été soumis

Question

J'ai un système de notation pour un tas d'entrées sur un site Web, ils sont programmés et donc je leur ai donné un identifiant de formulaire unique en utilisant un compte.

<form name="star"> 
    <input type="radio" class="star" name="rating" id ="rating" value="Terribad"/> 
    <input type="radio" class="star" name="rating" id ="rating" value="Meh"/> 
    <input type="radio" class="star" name="rating" id ="rating" value="OK"/> 
    <input type="radio" class="star" name="rating" id ="rating" value="Pretty Good"/> 
    <input type="radio" class="star" name="rating" id ="rating" value="Awesome!"/> 
    <input type='hidden' name='item' id = 'item' value='<%out.print(item);%>'> 
</form> 
<span id = "msg<%out.print(item);%>" style = "float:right; margin-left:0px; padding-top:0px;"></span> 

J'ai aussi un autre champ caché qui est les utilisateurs nom ici (récupéré dans le javascript) mais supprimée, car son grand et d'un tableau complexe par session.

J'ai également ajouté le nombre dans un champ caché pour essayer de le trier. De là, je cours un javascript sur le clic de l'un des boutons radio qui va prendre plus de détails de la session, et faire une mise à jour de la base de données AJAX.

$(function() { 
    $(".star").click(function() { 
      var submission = document.getElementsByName("rating"); 
      var name = $("input#name").val(); 
      var item = $("input#item").val(); 
      var rating; 
      for (i = 0; i< submission.length; i++) { 
        if (submission[i].checked) { 
          rating = submission[i].value; 
        } 
      } 
      var submitted = 'name='+name + 'rating=' + rating; 
      //alert (item);return false; 
      $.ajax ({ 
        type: "POST", 
        url: "/process_rating.jsp", 
        data: submitted, 
        success: function() { 
          $('#msg'+item).html("Submitted"); 

        } 
      }); 
      return false; 
    }); 
}); 

Tout cela fonctionne très bien sur la première entrée (quand je n'avais pas ce que ça compte dans) mais comme je ne suis pas surpris toutes les autres entrées sont traitées comme la première. Le problème principal est lorsque j'essaie de mettre à jour le div msg avec son succès, il ne fait que le premier car il saisit la valeur cachée du premier formulaire, pas le formulaire qui a été réellement soumis.

Tout cela est dans un jsp btw.

Answer 1

Utilisez la commande "this" de la fonction de gestionnaire d'événements pour rechercher le formulaire qui est le parent.

$(".star").click(function(){ 

    var formThatWasSubmitted = $(this).parents("form") 

}); 

Vous ne savez pas comment cela fonctionne.

Answer 2

Tout d'abord, chaque ID doit être unique sur la page et vous ne devriez pas avoir besoin des identifiants dans votre exemple. Cela pourrait très bien être la racine de nombreux problèmes sur votre page.

Votre code peut être simplifié un peu et vous pouvez utiliser la propriété "form" sur un élément d'entrée pour trouver le formulaire associé. Est-ce que cela fonctionne mieux pour vous? Je n'étais pas sûr de ce que vous essayiez de faire en sauvegardant le formulaire avec succès. Faites le moi savoir et nous verrons si nous pouvons le faire fonctionner.