Доброго времени суток. Только начинаю познавать JavaScript, DOM, Ajax
Вопрос такого характера как отправить значение элемента и еще одного соседнего. Есть HTML
<html>
<head>
<title>Пробная версия</title>
<script src="http://www.mysite.com/JS/mylib.js" type="text/javascript"></script>
<script type="text/javascript">
function sendRequest(url, payload)
{
var options = {method:"POST",
payload : payload,
outputTarget: "responseOutput"
};
MyLib.comm.sendRequest(url, options);
}
function save(elm, input)
{
/* escape the content to avoid XSS problems */
var valelm = input.value.replace(/<([^>]*)>/g, "<$1>");
/* set content to edited value */
elm.innerHTML = valelm;
/* save content via Ajax call */
var url = "http://www.mysite.com/myscript.php";
var payload = "valelm=" +valelm;
sendRequest(url, payload);
}
function edit(elm)
{
/* check to see if we are already editing */
if (elm.firstChild.tagName && elm.firstChild.tagName.toUpperCase() == "INPUT")
return;
/* create edit field */
var input = document.createElement("input");
input.type = "text";
input.value = elm.innerHTML;
input.size = elm.innerHTML.length;
/* apply special editing style */
var editstyles = elm.className.match(/inedit-(\w+)/);
if (editstyles)
input.className = RegExp.$1;
/* convert content to editable */
elm.innerHTML = '';
elm.appendChild(input);
/* position cursor and focus */
if (input.selectionStart)
input.selectionStart = input.selectionEnd = 0;
else
{
var range = input.createTextRange();
range.move("character", 0);
range.select();
}
input.focus();
/* set save trigger callback */
input.onblur = function(){save(elm, input);};
}
window.onload = function ()
{
var toEdit = document.getElementsByClassName("editable");
for (var i = 0 ; i< toEdit.length; i++)
toEdit[i].ondblclick = function(){edit(this);};
};
</script>
</head>
<body>
<div id="row1"><input type="hidden" name="idRow1" value="%ID%"><div class="editable doubleclick">Текст первой строки</div></div>
<div id="row2"><input type="hidden" name="idRow2" value="%ID%"><div class="editable doubleclick">Текст второй строки</div></div>
<div id="row3"><input type="hidden" name="idRow3" value="%ID%"><div class="editable doubleclick">Текст третей строки</div></div>
<!-- Здесь Ajax покажет результат своей работы. Кроется это за MyLib.comm.sendRequest(url, options); выкладывать все нет смысла, так как это проверено, работает, вопрос в другом сейчас будет -->
<div id="response" class="results">
<div id="responseOutput"> </div>
</div>
</body>
</html>
Скрипту
http://www.mysite.com/myscript.php посылаются данные на что он отвечает
<?php
if ($_POST)
{
echo $_POST['valelm'];
}
?>
И в <div id="responseOutput"> </div> появляется соответствующая надпись которую возвращает PHP скрипт.
А теперь подскажите мне банальную вещь (или я уже устал, перепрограммировал, переобучился), но я не могу сообразить, как мне передать значение двух элементов после события OnBlur.
Как вы поняли это скрипт Click to edit. Щелкнул по диву два раза появляется INPUT при событии onblur значение INPUT передается скрипту. А как мне сделать чтобы еще соседнее значение передавалось вместе с ним? Чтобы с $_POST['valelm'] еще передался ID в скрытом поле на этой строке
Как видно есть строка
<div id="row1"><input type="hidden" name="idRow1" value="%ID%"><div class="editable doubleclick">Текст первой строки</div></div>
Каждая строка имеет уникальный ID и две информационные ячейки первая это скрытое поле ID значению VALUE будет присвоено ID из базы данных и вторая это отредактированное значение <div class="editable doubleclick"></div>, которое будет передано скрипту.
Мне нужно чтобы PHP получил и обработал и вернул 2 значения
<?php
if ($_POST)
{
echo 'Элемент под номером <tt>'.$_POST['idRow%NUMBER%'].'</tt> подписан, как <tt>'.$_POST['valelm'].'</tt>';
}
?>
P.S. в sendRequest второе значение передается легко через options, payload.
В функции save()
var payload = "valelm=" +valelm+ "&id=" +id+ "&other=" +other+ "&etc=" +etc;
Но как мне ID в эту строку воткнуть?