Discussion :

[toulousain3117]

Bonjour

j'essaye de valider un formulaire pour ensuite envoyer les données sans recharger la page et en tapant sur entrée

j'ai essayé pas mal de chose
voila mon code du formulaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="msg-wgt-footer">
<form name="form" method="POST" action="" onsubmit="return mySubmit();">
        <textarea id="chatMsg" onKeyPress="if(event.keyCode == 13) mySubmit();" placeholder="Type your message. Press shift + Enter to send"></textarea>
      </div>

et le code jquery que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function mySubmit(){
document.getElementById("form").submit();
$("#form").submit(function(){
		var message = $("#chatMsg").val();
 
		var dataString = 'msg='+message;
		$.ajax({
			type: "POST",
			url: "add_msg.php",
			data: dataString,
			dataType: "json",
			success: function(json){
				$("#infos").html('');
 
			}
		});

la touche entrée ne s'effectue pas, et l'envoi du formulaire non plus

[mathieu]

dans une zone de texte, la touche "entrée" fait un saut à la ligne et n'envoie pas le formulaire
donc pour faire un envoi AJAX à chaque nouvelle ligne, surveillez plutot l'évènement "change" de la zone de texte.

[toulousain3117]

Pourtant j'ai vue sur beaucoup de script, j'ai essayé de m'inspirer beaucoup de zone de texte était envoyée avec un style de js que j'ai mis.

Et donc je dois changer quoi sur mon script

Car je dois avouer que j'ai testé beaucoup de chose

[mathieu]

pour surveiller cet évènement, vous pouvez utiliser une des 2 méthodes suivantes :
http://api.jquery.com/on/
http://api.jquery.com/change/

[toulousain3117]

j'ai ce code maintenant qui marche, mais comment je peux faire pour ne pas qu'il soit redirigé vers la page php mais que j'envoi quand même les données

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script language="JavaScript">
 
$(document).ready(function() {
            $('.monForm').on('submit', function() { 
		event.preventDefault();  
            // appel Ajax
            $.ajax({
                url: 'planning_cree.php',
                type: $(this).attr('method'), // la méthode indiquée dans le formulaire (get ou post)
                data: $(this).serialize(), // je sérialise les données (voir plus loin), ici les $_POST
                success: function(html) { // je récupère la réponse du fichier PHP
                //alert(html); // j'affiche cette réponse
                }
            });
        return false; // j'empêche le navigateur de soumettre lui-même le formulaire
        });
    });
        </script>
<form class="monForm" method="post" action="planning_cree.php" return false>
<input type="text" name="Envoyer" value="Envoyer">
<input type="submit" name="Envoyer" value="Envoyer" onclick="this.disabled=true;this.value='Crée'"/>
</form>

[toulousain3117]

j'ai repris aussi un vieux script de chat que j'avais dans mes dossiers et j'ai ce code qui correspond a ce que je cherche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script language="JavaScript">
 
 
function send_message(message) {
  $.ajax({
    url: 'add_msg.php',
    method: 'post',
    data: {msg: message},
    success: function(data) {
      $('#send').val('');
 
    }
  });
}
 
function fchat() {
  var chatArea = $('#send');
  // Bind the keyboard event
  chatArea.bind('keydown', function(event) {
    // Check if enter is pressed without pressing the shiftKey
    if (event.keyCode == 13 && event.shiftKey == false) {
      var message = chatArea.val();
      // Check if the message is not empty
      if (message.length !== 0) {
        send_message(message);
        event.preventDefault();
      } else {
        alert('Provide a message to send!');
        chatArea.val('');
      }
    }
  });
}
// Initialize the chat
fchat();
        </script>
<div id="send">
<input type="text" id="send" name="send" >
</div>

mais dans la console ça m'affiche ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ReferenceError: $ is not defined[En savoir plus]