Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Отправка формы по ENTER (ajax) и перенос строки (https://javascript.ru/forum/jquery/36002-otpravka-formy-po-enter-ajax-i-perenos-stroki.html)

VEGA 28.02.2013 15:01

Отправка формы по ENTER (ajax) и перенос строки
 
<form id="myForm"  action="site/action">
<table border="0">

	<tr>
		<td width="160" valign="top">
			Сообщение:
		</td>
		<td>
			<textarea id="msg"  id="message" name="msg" style="width: 300px;"></textarea>
		</td>

	</tr>		
	<tr>
		<td width="160">
			&nbsp;
		</td>
		<td>
			<input  type="submit" value="Отправить сообщение">
		</td>
	</tr>
</table>
</form>
<div id="messages">
</div>

function splash()
	{

			
		if (document.myForm.msg.value  =='')
			{
				alert ("Заполните текст сообщения!");
				return false;	
			}
		
		return true;   
	}

	// загрузка сообщений из БД в контейнер messages
	function show_messages()
	{
		$.ajax({
			url: "show.php",
			cache: false,
			success: function(html){
				$("#messages").html(html);
			}
		});
	}
		
		
		



	$(document).ready(function(){
		show_messages();
		
		
		
		
		
		// контроль и отправка данных на сервер в фоновом режиме при нажатии на кнопку "отправить сообщение"
		$("#myForm").submit(function(){
	
			
			var msg  = $("#msg").val();
		
			if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}

		



			$.ajax({
				type: "POST",
				url: "action.php",
				data: "msg="+msg+"&action=add",
				success: function(msg){
					show_messages();
			   }
			});
			
			
			

			
			
			
			return false;
		});
		
		show_messages();setInterval("show_messages()", 10000);
	});


Форма нормально работает но только при клике на кнопку "Отправить сообщение"
Как сделать так чтобы сообщение отправлялось и по кнопке и по ENTER'у , а shift + enter и ctrl + enter перенос строки ?

Заранее большое спасибо.

ksa 28.02.2013 15:17

Цитата:

Сообщение от VEGA
Как сделать так чтобы сообщение отправлялось и по кнопке и по ENTER'у , а shift + enter и ctrl + enter перенос строки ?

Ловить событие клавиатуры и обрабатывать...

VEGA 28.02.2013 15:19

Цитата:

Сообщение от ksa (Сообщение 237945)
Ловить событие клавиатуры и обрабатывать...

можно пример ? насколько я понял то что я хочу сделать совсем не сложно..
но вот опыта и знаний пока маловато

ksa 28.02.2013 15:20

Цитата:

Сообщение от VEGA
можно пример ?

Да их тьма!

VEGA 28.02.2013 15:43

Цитата:

Сообщение от ksa (Сообщение 237948)

Эти примеры я видел !
я не могу вснуть функцию так чтобы она работала у меня ..
можете пожалуйста помочь ?

Serg_pnz 28.02.2013 15:48

Цитата:

Сообщение от VEGA (Сообщение 237947)
можно пример ?

var flagGoIn = true;
$('#MessChat') // область для textarea и кнопки отправить
	.html(result.html) //вставляет в область textarea и кнопку отправить
	.off('click', '#MessChatOk')
	.on('click', '#MessChatOk', function(){
		$.goMessIn(); //отправляет по клику на ОК
	})
	.off('keydown')
	.on('keydown', function(event){
		if (event.keyCode == 17) {
	        $(document).on('keydown', function(event){
				if (event.keyCode == 13 && flagGoIn) {
					$.goMessIn(); // отправляет по ctrl + enter
					$(document).off('keydown');
					flagGoIn = false;
				}
			})
			.keyup(function(event){
				flagGoIn = true;
			});
		}
	});


Посмотреть можно тут http://37a.su/ (необходимо зарегистрироваться)

VEGA 28.02.2013 16:08

Цитата:

Сообщение от Serg_pnz (Сообщение 237957)
var flagGoIn = true;
$('#MessChat') // область для textarea и кнопки отправить
	.html(result.html) //вставляет в область textarea и кнопку отправить
	.off('click', '#MessChatOk')
	.on('click', '#MessChatOk', function(){
		$.goMessIn(); //отправляет по клику на ОК
	})
	.off('keydown')
	.on('keydown', function(event){
		if (event.keyCode == 17) {
	        $(document).on('keydown', function(event){
				if (event.keyCode == 13 && flagGoIn) {
					$.goMessIn(); // отправляет по ctrl + enter
					$(document).off('keydown');
					flagGoIn = false;
				}
			})
			.keyup(function(event){
				flagGoIn = true;
			});
		}
	});


Посмотреть можно тут http://37a.su/ (необходимо зарегистрироваться)


как мне этот код всунуть сюда ?

в этом коде у меня все отлично отправляется.. но не знаю как в эту функцию всунуть отправку сообщения по Enterу и перенос строки по shift+Enter и ctrl+Enter

$(document).ready(function(){
		show_messages();
		
		
		
		
		
		// контроль и отправка данных на сервер в фоновом режиме при нажатии на кнопку "отправить сообщение"
		$("#myForm").submit(function(){
	
			
			var msg  = $("#msg").val();
		
			if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}

		



			$.ajax({
				type: "POST",
				url: "action.php",
				data: "msg="+msg+"&action=add",
				success: function(msg){
					show_messages();
			   }
			});
			
			
			

			
			
			
			return false;
		});
		
		show_messages();setInterval("show_messages()", 10000);
	});

Serg_pnz 28.02.2013 16:40

Держи http://learn.javascript.ru/play/7yMPRb

VEGA 01.03.2013 05:11

Цитата:

Сообщение от Serg_pnz (Сообщение 237973)

спасибо огромное

VEGA 01.03.2013 05:19

еще вопрос..

мне нужно очистить textarea после отправки формы ..

При нажатии на кнопку все ок.. textarea очищается после отправления формы..

но при отправке формы через Ctrl+Enter этого не происходит..
Где ошибка ?

<form id="myForm"  action="site/action" onsubmit="clearForm(this); return true;">

			Сообщение:

			<textarea id="msg"  name="msg"  cols="36" rows="4" style="width:90%;" ></textarea>


</br></br>

			<input  type="submit" value="Отправить сообщение">

</form>



function splash()
	{
		if (document.myForm.msg.value  =='')
			{
				alert ("Заполните текст сообщения!");
				return false;	
			}
		return true;   
	}

	// загрузка сообщений из БД в контейнер messages
	function show_messages()
	{
		$.ajax({
			url: "show.php",
				data: "&page=<?=intval($_GET['page'])?>",
			cache: false,
			success: function(html){
				$("#messages").html(html);
			}
		});
	}
	$(document).ready(function(){
		show_messages();
		// контроль и отправка данных на сервер в фоновом режиме при нажатии на кнопку "отправить сообщение"
		$("#myForm").submit(function(){
			var msg  = $("#msg").val();
			if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}
			$.ajax({
				type: "POST",
				url: "action.php",
				data: "msg="+msg+"&action=add",
				
			
				success: function(msg){
					show_messages();
			   }
			
			});
			return false;
		});
		
	show_messages();
    setInterval("show_messages()", 10000);
	
      

      var flagGoIn = true;
$('#myForm')
	.off('keydown')
	.on('keydown', function(event){
		if (event.keyCode == 17) {
	        $('#myForm').on('keydown', function(event){
			var msg  = $("#msg").val();
				if (event.keyCode == 13 && flagGoIn) {
					if (msg =='')
			{
				alert ("Заполните текст сообщения!");
				return false;
			}
					$.ajax({
				type: "POST",
				url: "action.php",
				data: "msg="+msg+"&action=add",
				
				
				success: function(msg){
					show_messages();
			   }
			
			
			
			});
					//$('#myForm').off('keydown');
					flagGoIn = false;
					
				}
			})
			.keyup(function(event){
				flagGoIn = true;
			});
		}
	});

      
  

      
	});





function clearForm(f) {
  window.setTimeout(function() {
    f.elements.msg.value='';
  }, 100);
}


Часовой пояс GMT +3, время: 01:44.