Ajax et plusieurs FORM

Par Alexandre Filipe, il y a 8 ans

Javascript

Bonjour,

Merci pour tous les tutos et les vidéos. J'ai mis en place un systeme d'ajax pour ne pas recharger la page à chaque fois qu'une personne aime une publication. Le soucis c'est que le "id" des < form > sont les mêmes et le script ne fonctionne pas. Il ne fonctionne que sur le 1er de la liste.

Voici mon code :

<form action="URL/likes.php" method="post" id="formjaime"> <input type="hidden" name="votejaime" value="1" /> <button type="submit" value="Submit" class="centre_jaime" />J'aime</button> </form> <form action="URL/likes.php" method="post" id="formjaime"> <input type="hidden" name="votejaime" value="2" /> <button type="submit" value="Submit" class="centre_jaime" />J'aime</button> </form> <form action="URL/likes.php" method="post" id="formjaime"> <input type="hidden" name="votejaime" value="3" /> <button type="submit" value="Submit" class="centre_jaime" />J'aime</button> </form>

C'est le coté HTML, j'ai plusieurs bouton j'aime sur une même page. Et voici mon JS :

<script> var form = document.querySelector('#formjaime') var button = form.querySelector('button[type=submit]') var buttonText = button.textContent form.addEventListener('submit', function (e) { button.disabled = true button.textContent = 'Voté !' e.preventDefault() var data = new FormData(form) var xhr = getHttpRequest() xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status == 200) { var results = JSON.parse(xhr.responseText) alert(results.success) } button.disabled = false button.textContent = buttonText } } xhr.open('POST', form.getAttribute('action'), true) xhr.setRequestHeader('X-Requested-With', 'xmlhttprequest') xhr.send(data) }) </script>

Il ne fonctionne qu'avec le "votejaime" = 1, pour la suite il ne prend pas en compte.

Quelqu'un aurait une solution ?

Merci merci merci

3 réponses

Defy, il y a 8 ans

c´est normale, un id doit etre unique sur une page html donc tu doit differencier tes id formulaire les un des autres

Alexandre Filipe, il y a 8 ans

Merci pour ta réponse, j'ai donc affiché un ID unique dans chque formulaire.

<form action="URL/likes.php" method="post" id="formjaime2"> <input type="hidden" name="votejaime" value="2" /> <button type="submit" value="Submit" class="centre_jaime" />J'aime</button> </form>

Le < script > ne fonctionne toujours pas, normale car la classe #id n'est plus bonne, et c'est la que je bloque : comment faire pour que le script détécte l'id unique du formulaire (#formjaime) et se lance quand meme :

<script> var form = document.querySelector('#formjaime') ....

Merci

Defy, il y a 8 ans

il suffit de passer par une classe, si tu mets une class formjaime tu fis un documenttQueryselectorall('. Formjaime')et tu reçois un tableau de formulaires. donc tu peux itérer dessus pour appliquer un comportement spécifique à chaque formulaire du tableau.