Forum d'entraide PHPFrance

Bonjour,

J'utilise la fonction autosize(); en jQuery pour agrandir automatiquement un textarea.
Le problème c'est que j'aimerais appuyé sur "Enter" pour valider le formulaire en ajax.

Pour éviter que le textarea s'agrandisse avant et après le submit puisque c'est en ajax donc pas de rafraichissement, je voudrais désactiver la fonction :

[javascript]
$('#formComs').keyup(function(e){
if(e.keyCode == 13){
if($('textarea.statutCom').val() < 1){
return false;
}
else {
$('#formComs').submit(function(){
/* La fonction ajax */
});
}
}
});
[/javascript]

<form action="#" method="post" id="formComs">
	<textarea placeholder="Écrire un commentaire" name="coms_text" class="elastic statutCom"></textarea>
</form>

Merci d'avance

Pourquoi faire un submit de ton formulaire puisque tu veux faire un ajax ?? Si tu fais un submit, tu vas forcément rafraîchir ta page

Mon problème c'est que j’essaie de faire un système de commentaire en ajax.
J'ai mon fichier php, le problème c'est que j'aimerais faire un submit en ajax avec la touche Enter (Exemple sur Facebook)

Voici le fichier php :

<?php
session_start();
require('include/config.inc.php');

$coms_text = htmlentities(trim($_POST['statut_text']));
$coms_statutid = $_POST['coms_statutid'];

if(isset($coms_text) && !empty($coms_text) && isset($coms_statutid) && !empty($coms_statutid)){
	extract($_POST);
	$req = $connect->prepare("INSERT INTO coms(coms_id,coms_userid,coms_statutid,coms_text,coms_date) VALUES('','".$_SESSION['id']."','".$coms_statutid."','".trim($coms_text)."',now())");
	$req->execute();
	echo 'ok';
} else {
	echo 'erreur';
}
$req->closeCursor();
?>

Pour le script JS, je bloque

Je vais essayé de recommencer à zéro et refaire le tuto : http://www.grafikart.fr/tutoriels/jquer ... re-ajax-67

il faut d'abord empêcher la validation du formulaire puis l'envoyer vers la page en mode Ajax (et le vérifier au cas où)
J'utilise ici la fonction "ON()" que je trouve plus parlante que "keyup()". Cela reviens au même mais grâce à "on()" tu peux définir l'évènement n'importe où il se produit sur la page n'importe quand. Dans l’exemple ci-après l'évènement et la touche Enter dans le formulaire #formComs.

<form action="#" method="post" id="formComs">
        <textarea placeholder="Écrire un commentaire" name="coms_text" class="elastic statutCom"></textarea>
</form>

[javascript]$(document.body).on({
keyup : function (event) {
event.stopPropagation(); //bloque la propagation de l'évènement (touche enter appuyée)
event.preventDefault(); //bloque la validation du formulaire (rechargement de la page)
if (event.keyCode == 13) {
//vérifie si le textearea n'est pas vide
if($('.statutCom').val().length < 1)
return;
else {
//envoi des données du formulaire via Ajax
$.ajax({
type: 'POST',
async : false,
url: 'http://www.monsite.com/pageTraitement.php',
data: {"statutCom" : $('.statutCom').val()},
complete : function (xhr, result) {
if (result != "success") return;
var reponse = xhr.responseText;
...
}
});
}
}
}
},'#formComs');[/javascript]


On pourrait aussi imaginer un click sur un bouton de validation :

<form action="#" method="post" id="formComs">
        <textarea placeholder="Écrire un commentaire" name="coms_text" class="elastic statutCom"></textarea>
        <input type="button" id="validation" value="Envoyer" >
</form>

[javascript]
$(document.body).on({
click: function (event) {
event.stopPropagation(); //bloque la propagation de l'évènement
event.preventDefault(); //comme le bouton n'est pas un type="submit" ne sert pas à grand chose
if (event.which != 1) return; //clic gauche obligatoire

//vérifie si le textearea n'est pas vide
if($('.statutCom').val().length < 1)
return;
else {
//envoi des données du formulaire via Ajax
$.ajax({
type: 'POST',
async : false,
url: 'http://www.monsite.com/pageTraitement.php',
data: {"statutCom" : $('.statutCom').val()},
complete : function (xhr, result) {
if (result != "success") return;
var reponse = xhr.responseText;
...
}
});
}
}
},'#validation');[/javascript]