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
Réponse acceptée

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.

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

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