Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выборка элемента с которым взаимодействуют (https://javascript.ru/forum/jquery/44933-vyborka-ehlementa-s-kotorym-vzaimodejjstvuyut.html)

ElaBamz 07.02.2014 06:57

Выборка элемента с которым взаимодействуют
 
Здравствуйте.
На самом деле, я не уверен что правильно указал заголовок темы.
Наверное моя проблема в том что я не могу объяснить суть своей проблемы гуглу :)

Моя беда в том, что функция jq может работать только с первой формой, как я не пытался, ни чего не вышло.

Подскажите пожалуйста, какие изменения нужно внести в функцию, что бы запрос уходил с той формы, с которой взаимодействовал пользователь?

<form id="Forma">
	Введите имя:<br/>
		<input id="number" type="text" size="20"><br/><br/>
		<input type="submit" value="Отправить">
	</form>
		<form id="Forma">
	Введите имя:<br/>
		<input id="number" type="text" size="20"><br/><br/>
		<input type="submit" value="Отправить">
	</form>
		<form id="Forma">
	Введите имя:<br/>
		<input id="number" type="text" size="20"><br/><br/>
		<input type="submit" value="Отправить">
	</form>
	<div id="content"></div>

$(document).ready(function(){
			$('.myForm').submit(function()
			{
				$.ajax(
				{
					type: "POST",
					url: "test.php",
					data: "number="+$(".number").val(),
					success: function(html)
					{
						$("#content").html(html);
				   }
				});
				return false;
			});
			
		});

danik.js 07.02.2014 07:29

ElaBamz, типичная ошибка новичков. ID на странице должны быть уникальными! Или не используй id вообще.
У тебя в скрипте уже есть задел на использование класса. Короче, вот тебе готовый исправленный код:
<form class="myForm">
Введите имя:<br/>
    <input name="number" type="text" size="20"><br/><br/>
    <input type="submit" value="Отправить">
</form>
    <form class="myForm">
Введите имя:<br/>
    <input name="number" type="text" size="20"><br/><br/>
    <input type="submit" value="Отправить">
</form>
    <form class="myForm">
Введите имя:<br/>
    <input name="number" type="text" size="20"><br/><br/>
    <input type="submit" value="Отправить">
</form>
<div id="content"></div>
<script>
    $(document).ready(function() {
        $('.myForm').submit(function() {
            $.post({
                url: "test.php",
                data: $(this).serialize(),
                success: function(html) {
                    $("#content").html(html);
               }
            });
            return false;
        });
    });
</script>

ElaBamz 07.02.2014 08:20

Огромное спасибо!
Только у меня почему то не сработало с Вашим вариантом:

$.post({
         ....
            });


Но сработало с моим:

$.ajax({
    type: "POST",
    ...
});


Это важно? И почему такое может быть?
++
И еще вопрос, почему передача как я понимаю происходит с помощью POST а в адресе появляется index.html?number= как будто пользуюсь GET?

Яростный Меч 07.02.2014 09:54

Цитата:

Сообщение от ElaBamz
в адресе появляется index.html?number=

а где ты видишь этот адрес?
если в адресной строке, то все правильно, аяксового урла там быть не должно.


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