Проблема с добавлением элемента
Доброго времени суток!
О сообщество программистов 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 не работает |
Цитата:
|
Цитата:
<!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>
таки работает! :) |
Зачем добавлять инпуты, если форму в любом случае невозможно будет отправить?
И открой для себя $(form).serialize() |
Наверное меня не совсем поняли, необходимо, чтобы после получения результата от 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> --!>
|
Цитата:
|
Я не знаю как обратиться к элементу hidden с классом например name, чтобы к нему добавить функцией after() текст в виде ('<input type='hidden' value="Новое значение">'). Это обусловлено также тем, что элемент hidden с классом name у меня на странице 3 штуки (будет больше в зависимости от количества товара). Как прикрутить в той части формы, от куда была отправлена форма.
|
Цитата:
$('input.name')
Цитата:
Пусть тебе серверный скрипт вернет то, что поможет тебе понять кому сие будет добавляться. |
Цитата:
|
Цитата:
А вот в отправке - самое то! |
| Часовой пояс GMT +3, время: 14:44. |