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);
}

Deff 01.03.2013 06:45

Цитата:

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

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

			Сообщение:</br>

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


</br></br>

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

</form>
<script type="text/javascript">
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;
			}setTimeout(function() {$('#myForm').reset()}, 100)
					$.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.reset();
  }, 100);
}
</script>

danik.js 01.03.2013 06:50

Цитата:

Сообщение от VEGA
053
$('#myForm')
054
    .off('keydown')
055
    .on('keydown', function(event){
056
        if (event.keyCode == 17) {
057
            $('#myForm').on('keydown', function(event){

А че тут творится?
Цитата:

Сообщение от VEGA
Где ошибка ?

Так ведь clearForm сам не вызовется, нужно вызывать по нажатию Ctrl+Enter.

danik.js 01.03.2013 06:52

Deff, вопрос не читай @ сразу отвечай!

Serg_pnz 01.03.2013 08:32

VEGA,
не надо таскать код по разным местам - сделай функцию отправки сообщения и ссылайся на нее при нажатии на кнопку и на комбинацию клавиш.

Цитата:

Сообщение от danik.js (Сообщение 238108)
А че тут творится?

off-on вызывается из-за того, что у меня одна страница и всё остальное - динамическая подгрузка. Поэтому я сначала сбрасываю событие, а потом назначаю.
Если так не делать, то при переходе юзера по комнате события на элементе будут накапливаться и сначала у тебя отправиться один раз, потом два, три и т.д.
Скрипт отдал "как есть" - пусть он сам разбирается, если хочет научиться.

VEGA 01.03.2013 13:11

Цитата:

Сообщение от Serg_pnz (Сообщение 238114)
VEGA,
не надо таскать код по разным местам - сделай функцию отправки сообщения и ссылайся на нее при нажатии на кнопку и на комбинацию клавиш.


off-on вызывается из-за того, что у меня одна страница и всё остальное - динамическая подгрузка. Поэтому я сначала сбрасываю событие, а потом назначаю.
Если так не делать, то при переходе юзера по комнате события на элементе будут накапливаться и сначала у тебя отправиться один раз, потом два, три и т.д.
Скрипт отдал "как есть" - пусть он сам разбирается, если хочет научиться.


а как вызвать функцию clearForm ?

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


пробую вот так .. не работает
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",
				
			   clearForm();
				success: function(msg){
					show_messages();
					
			   }
			
			
			
			});
					//$('#myForm').off('keydown');
					flagGoIn = false;
					
				}
			})
			.keyup(function(event){
				flagGoIn = true;
			});
		}
	});

ksa 01.03.2013 13:15

Цитата:

Сообщение от VEGA
пробую вот так .. не работает

Функция внутри объекта может быть вызвана только в таком контексте

{
   <свойство>: myFnc()
}

danik.js 01.03.2013 13:16

Так ведь надо агрументом ссылку передать на форму. Посмотри на определение функции. Ну да, и затолкал вызов хрен пойми куда.

Serg_pnz 01.03.2013 13:52

$('#твоя-тексареа').val('');

вставить сразу по отправке сообщения

VEGA,
попробуй проанализировать http://37a.su/js/chatIn.js

VEGA 01.03.2013 14:09

Цитата:

Сообщение от Serg_pnz (Сообщение 238151)
$('#твоя-тексареа').val('');

вставить сразу по отправке сообщения

VEGA,
попробуй проанализировать http://37a.su/js/chatIn.js

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();
					clearForm();
					
			   }
			

			
			});
				$('#msg').val('');
					//$('#myForm').off('keydown');
					flagGoIn = false;
					
				}
			})
			.keyup(function(event){
				flagGoIn = true;
			});
		}
	});


Вы опять мне очень помогли :)
Благодарю вас .. Все работает:thanks:


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