Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2013, 11:47
Новичок на форуме
Отправить личное сообщение для kazrusm Посмотреть профиль Найти все сообщения от kazrusm
 
Регистрация: 30.09.2013
Сообщений: 6

Проблема с добавлением элемента
Доброго времени суток!

О сообщество программистов javascript , прошу вашей профессиональной помощи, так как не могу реализовать следующее.

Имеется список товаров, html-теги и классы, повторяются для каждого товара, но значения разные. Вот так:
<ul>
	<li>
			<img src="picture.png">
			<h4>Товар 1</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="1" name="id" class="id">
			<input type="hidden" value="Товар 1" name="name" class="name">
			<input type="hidden" value="500" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>

	<li>
			<img src="picture.png">
			<h4>Товар 2</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="2" name="id" class="id">
			<input type="hidden" value="Товар 2" name="name" class="name">
			<input type="hidden" value="300" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>

	<li>
			<img src="picture.png">
			<h4>Товар 3</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="3" name="id" class="id">
			<input type="hidden" value="Товар 3" name="name" class="name">
			<input type="hidden" value="600" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>
</ul>
<div id="result">
//здесь отображается успешный результат ajax запроса
</div>


Далее, все клики на добавить я обрабатываю функциями ajax jQuery и все данные в полях <hidden> направляю на сервер (add.php), следующим кодом:
$(document).ready(function(){
	$("form").submit(function(){
		return false;
	});

	$("form").submit(function(){
		
		var id = $(this).find("input.id").val();
		var name = $(this).find("input.name").val();
		var price = $(this).find("input.price").val();
		var qty = '1';
		
		$.ajax({
	  		url: "cart/add",
	  		type: "POST",
	  		data: 	({
	  					id : id, name: name, price: price, qty: qty
					}),

	  		success: function(data)
	  				{
						$("#result").html(data);
					}
		});
	});

});


Все бы хорошо, но необходимо добавить дополнительный скрытый элемент <hidden> в <li>, из которой был вызван <submit>. Но никак не получается.
Понимаю, что надо использовать функцию after() и т.п., однако как выбрать тот именно элемент к которому необходимо применить эту функцию, так как
Код:
$(this).find("input.name") и т.д. внутри функции success не работает
Очень необходимо, прошу Вашей помощи....
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2013, 12:20
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,521

Сообщение от kazrusm
необходимо добавить дополнительный скрытый элемент <hidden> в <li>
И где он в твоем ХТМЛ?
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2013, 12:28
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,521

Сообщение от kazrusm
$(this).find("input.name")
и т.д. внутри функции success не работает
Бивас, тест! (с)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
	$("form").submit(function(){
		
		var id = $(this).find("input.id").val();
		var name = $(this).find("input.name").val();
		var price = $(this).find("input.price").val();
		var qty = '1';
		alert(id+' - '+name+' - '+price);
		return false;
	});

});
</script>
</head>
<body>
<ul>
	<li>
			<img src="picture.png">
			<h4>Товар 1</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="1" name="id" class="id">
			<input type="hidden" value="Товар 1" name="name" class="name">
			<input type="hidden" value="500" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>

	<li>
			<img src="picture.png">
			<h4>Товар 2</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="2" name="id" class="id">
			<input type="hidden" value="Товар 2" name="name" class="name">
			<input type="hidden" value="300" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>

	<li>
			<img src="picture.png">
			<h4>Товар 3</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="3" name="id" class="id">
			<input type="hidden" value="Товар 3" name="name" class="name">
			<input type="hidden" value="600" name="price" class="price">
			<input type="submit" class="btn" value="Добавить"> 
		</form>
	</li>
</ul>
<div id="result">
здесь отображается успешный результат ajax запроса
</div>
</body>
</html>

таки работает!
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2013, 12:28
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Зачем добавлять инпуты, если форму в любом случае невозможно будет отправить?
И открой для себя $(form).serialize()
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2013, 12:46
Новичок на форуме
Отправить личное сообщение для kazrusm Посмотреть профиль Найти все сообщения от kazrusm
 
Регистрация: 30.09.2013
Сообщений: 6

Наверное меня не совсем поняли, необходимо, чтобы после получения результата от ajax запроса, добавлялся новый элемент внутри тега <li>
<li>
			<img src="picture.png">
			<h4>Товар 1</h4>
		<form action="cart/add" method="post">
			<input type="hidden" value="1" name="id" class="id">
			<input type="hidden" value="Товар 1" name="name" class="name">
			<input type="hidden" value="500" name="price" class="price"> 

                        [B]<input type="hidden" value="Новое-значение" name="Новый-элемент" class="price">[/B]


 	                <input type="submit" class="btn" value="Добавить"> 
		</form>
</li> --!>
Ответить с цитированием
  #6 (permalink)  
Старый 08.10.2013, 12:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,521

Сообщение от kazrusm
необходимо, чтобы после получения результата от ajax запроса, добавлялся новый элемент внутри тега <li>
И в чем тут проблема?
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2013, 12:57
Новичок на форуме
Отправить личное сообщение для kazrusm Посмотреть профиль Найти все сообщения от kazrusm
 
Регистрация: 30.09.2013
Сообщений: 6

Я не знаю как обратиться к элементу hidden с классом например name, чтобы к нему добавить функцией after() текст в виде ('<input type='hidden' value="Новое значение">'). Это обусловлено также тем, что элемент hidden с классом name у меня на странице 3 штуки (будет больше в зависимости от количества товара). Как прикрутить в той части формы, от куда была отправлена форма.
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2013, 13:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,521

Сообщение от kazrusm
Я не знаю как обратиться к элементу hidden с классом например name, чтобы к нему добавить функцией after() текст в виде ('<input type='hidden' value="Новое значение">').
Это-то просто!
$('input.name')


Сообщение от kazrusm
элемент hidden с классом name у меня на странице 3 штуки (будет больше в зависимости от количества товара)
А вот это уже другое дело!

Пусть тебе серверный скрипт вернет то, что поможет тебе понять кому сие будет добавляться.
Ответить с цитированием
  #9 (permalink)  
Старый 08.10.2013, 13:02
Новичок на форуме
Отправить личное сообщение для kazrusm Посмотреть профиль Найти все сообщения от kazrusm
 
Регистрация: 30.09.2013
Сообщений: 6

Сообщение от danik.js Посмотреть сообщение
Зачем добавлять инпуты, если форму в любом случае невозможно будет отправить?
И открой для себя $(form).serialize()
Не раскрывает сути вопроса, можно поподробнее, как serialize() может мне помочь с добавлением нового элемента...
Ответить с цитированием
  #10 (permalink)  
Старый 08.10.2013, 13:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,521

Сообщение от kazrusm
как serialize() может мне помочь с добавлением нового элемента...
В добавлении - нет.
А вот в отправке - самое то!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с добавлением элементов в DIV (appendChild) Metallic Events/DOM/Window 6 01.02.2014 19:44
Анимация высоты элемента, проблема со скроллингом malgeorge Events/DOM/Window 4 16.05.2013 08:34
Проблема с выборкой нужного элемента для исполнения frolvict jQuery 3 03.08.2011 23:14
Проблема с clone() dom элемента. vitja jQuery 6 03.02.2011 12:40
Проблема с добавлением radiobutton в radiogroup Tie ExtJS 3 02.02.2011 16:28