Bonjour,

J'ai un formulaire qui je souhaiterais envoyer en ajax. J'utilise event preventdefault pour désactiver le bouton submit. Comment faire ensuite pour envoyer mon formulaire en ajax ?

HTML :

<!-- Les attributs "method" et "action" sont ajoutés en jQuery -->
<form class="chatAjaxForm" name="chatAjaxForm" autocomplete="off">
	<fieldset>
		<legend>Formulaire de chat en AJAX</legend>
		<div class="chatAjaxLogin">
			<label for="chatAjaxLogin">Login</label>
			<input type="text" name="chatAjaxLogin" id="chatAjaxLogin" placeholder="Login" />
		</div>
		<div class="chatAjaxMessage">
			<label for="chatAjaxMessage">Message</label>
			<textarea name="chatAjaxMessage" id="chatAjaxMessage" placeholder="Message"></textarea>
		</div>
		<div class="chatAjaxSubmit">
			<input type="submit" name="chatAjaxSubmit" value="Poster" />
		</div>
	</fieldset>
</form>

jQuery :

$(".chatAjaxForm").on("submit", function(event) {
	event.preventDefault();

	// La method "post" et l'action "chatAjaxForm.php" sont indiquées ici.
	$.post( "chatAjaxForm.php", function() {
		// Je joins le nom du bouton submit au formulaire.
		$(this).serialize() + $(".chatAjaxSubmit input").attr("name")
	} );

	// Je redirige vers la page php pour les tests.
	$(location).attr("href", "chatAjaxForm.php");
});

PHP :

<?php

	// Rien ne s'affiche. je suppose que c'est dû à la désactivation du bouton submit ...
	echo $_POST["chatAjaxMessage"];

	// ... pourtant, la page php reçoit bien un tableau $_POST, car sinon ...
	if ( isset($_POST) ) {
		// ... Ce texte ne s'afficherait pas.
		// Mais pourquoi s'affiche-t-il, puisque le bouton submit est désactivé ?
		echo "Salut !";

		if ( isset($_POST["chatAjaxSubmit"]) ) {
			echo "Salut !";
		}
	}

Est-ce qu'il serait possible d'envoyer le formulaire en ajax sans retirer event preventdefault ? Si ce n'est pas possible, y a-t-il des alternatives à event preventdefault ?

Merci pour votre aide.

-
Edité par me_moi 15 juin 2018 à 12:18:18

Bonjour,

Tu as l'air d'utiliser jQuery. Dans ce cas, je te conseille d'utiliser $.ajax pour envoyer tes données en ajax.

Exemple pour un bouton like en jQuery:

$(document).on('click', '.btn-like', function(e) {
    e.preventDefault();

    var id = $(e.currentTarget).data('id');

    $.ajax({
        url: '/ajax/addLike',
        type: 'POST',
        data: { id: id }
    }).done(function(data) {
        console.log(e.target);
        $(e.target).parents(".single-card").find('.likecount').html(data.nbLikes);
    }).fail(function(data) {
        console.log('NOK');
    });
});

-
Edité par eclairia 15 juin 2018 à 12:40:32

Merci pour ta réponse eclairia, j'ai essayé, mais ça ne semble pas résoudre mon problème. Ce que j'aimerais en fait, c'est pouvoir envoyer les données du formulaire sans retirer le event preventdefault, si c'est possible.

Ou en faisant autrement, est-il possible d'envoyer le formulaire et d'être redirigé vers un fichier php sans renseigner action et method en html mais en le faisant en ajax ?

Merci.

-
Edité par me_moi 15 juin 2018 à 19:16:47

Bien sûr, c'est le but de l'ajax.

Je te conseille quand même de préciser la méthod dans la requête ajax.

Le script que je t'ai donné permet de faire ça.

Il faut juste que tu remplace on('click'...) par $(document).submit()

Voici ce que j'ai au final :

jQuery :

$(document).submit(function(event) {
	event.preventDefault();

	$.ajax({
		url: "chatAjaxForm.php",
		method: "POST",
		data: {
			chatAjaxForm: $(this).serialize()
		}
	});
});

PHP :

<?php

	echo $_POST["chatAjaxLogin"];

	if ( isset($_POST) ) {
		echo "Salut !";
		echo $_POST["chatAjaxMessage"];

		if ( isset($_POST["chatAjaxForm"]) ) {
			echo "Salut !";
		}
	}

Mais en cliquant sur le bouton d'envoi, je ne suis pas redirigé vers la page php. Comment faire pour qu'en cliquant sur le bouton d'envoi, je sois redirigé vers la page php et que je puisse afficher le contenu des champs du formulaire ?

Merci pour ton aide.

-
Edité par me_moi 15 juin 2018 à 21:31:22

Tu es bien redirigé vers ta page php mais tu es en ajax. echo ne fonctionne pas en ajax.

Tu dois retourner le contenu de ton POST sous format json à ton script js et ton script js modifiera ton html avec .html() ou .replaceWidth().

Et si je rajoute JSON.stringify et json_decode, php affiche NULL, c'est déjà bien puisque sans il n'affiche rien, mais comment faire pour que php affiche le contenu des champs au lieu de NULL :

$(document).submit(function(event) {
	event.preventDefault();

	$.ajax({
		url: "chatAjaxForm.php",
		method: "POST",
		data: {
			chatAjaxForm: JSON.stringify( $(".chatAjaxForm").serialize() )
		}
	});
});

<?php

	$chatAjaxForm = json_decode($_POST["chatAjaxForm"]);

	if ( isset($_POST) ) {
		echo "Salut !";
		echo $_POST["chatAjaxMessage"];

		if ( isset($_POST["chatAjaxForm"]) ) {
			echo "Salut !";
		}
	}

-
Edité par me_moi 15 juin 2018 à 21:40:58