LINUX.ORG.RU
Форум — Web-development  

формирование post запроса внутри таблицы

 ,


1

1

Народ, помогите реализовать следующую задачу. Есть таблица с 5 столбцами. 4 столбца это значения, в пятом столбце находится кнопка. При нажатии на кнопку значения из 4 столбцов должны сформировать POST запрос и отправить его скрипту. для пользователя при нажатии на кнопку должен быть выполнен переход на страницу, на которой будет выведена интересующая пользователя информация. пробовал сделать такое через форму, получается не очень красиво + при проверки страницы на html5 валидатор ругается, что нельзя использовать формы внутри таблицы. я так понял что необходимо копать в сторону javascript. но к сожалению, знания не позваляют этого сделать. может у кого то есть готовое решение?

 ← 1 2 →

можно аджаксом отправить. 

<html>
<head>
</head>
<body>


<table>
<tr><td>data1</td></tr>
<tr><td>data2</td></tr>
<tr><td>data3</td></tr>
<tr><td>data4</td></tr>
<tr><td><button id="p">post</button></td></tr>
</table>

<script>

params=[]
 .map.call(document.querySelectorAll("table tr td"), function(el){return el.innerHTML})
 .filter(function(el){return !(/button/.test(el))})
alert(params)
p.onclick=function(){
 with(new XMLHttpRequest){
   open("POST", "foo", false)
   send(params)
   if(status==200){alert(responseText)}
 }
}



</script>

</body>
</html>

валидатор ругается

А какое это имеет значение?

nond
()
Ответ на: комментарий от Evgen25

Там сидят в комитете куча полудурков, бабло распиливают, а ты им еще ха хлебушек с маслом подкидываешь.

PS. В варианте выше на сервак отправляется строка как есть, из массива, «data1,data2,data3,data4» если надо сформировать запрос типа get, давай образец таблицы и формат запроса, я покажу, как сформировать.

nond
()
Ответ на: комментарий от nond

спасибо, запрос надо именно post, таблица следующего вида: 

<table>
<tr><td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td><button>просмотр</button></td></tr>
<tr><td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td><button>просмотр</button></td></tr>
</table>
в формах это выглядело так: 
<table>
<tr>
<form NAME='test' ACTION='list.pl' method='post' ENCTYPE='application/x-www-form-urlencoded'>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param1'> </td>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param2'> </td>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param3'> </td>
<td> <INPUT TYPE='date' SIZE='20' MAXLENGth='50' NAME='param4'> </td>
<td> <INPUT TYPE='submit' VALUE='просмотр'></td>
</form>
</tr>
</table>
строк в таблице может быть много

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

А если так: 

<html>
<head>
</head>
<body>

<table>
<tr>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param1'> </td>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param2'> </td>
<td> <INPUT TYPE='text' SIZE='20' MAXLENGth='50' NAME='param3'> </td>
<td> <INPUT TYPE='date' SIZE='20' MAXLENGth='50' NAME='param4'> </td>
<td> <button id="b">push</button></td>
</tr>
</table>

<script>

b.onclick=function(){
 with(new XMLHttpRequest){
 open("POST", "list.pl", false)
 
 var q=[]
 .map.call(document.querySelectorAll("table td INPUT"), function(i){
   return i.getAttribute("NAME")+"="+encodeURIComponent(i.value)+"&"
 })
 .join("").replace(/\&$/, "")
 alert(q)
 send(q)
 if(status==200) location=responseText
 } 
}



</script>

</body>
</html>
?

nond
()
Ответ на: комментарий от nond

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

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

при выполнении этого скрипта происходит следующее: в адресной строке выводится html вывод скрипта.выглядет это так: 

The requested URL /test/<!DOCTYPE html><html lang="ru"><head> .... </body></html> was not found on this server.

Evgen25
() автор топика

если форма в таблице всего одна, то что мешает вынести открывающий и закрывающий тег за пределы таблицы?

типа 

<form action="..." method="post">
<table>
<tr><td><input type="text" name="form[blabla]"></td></tr>
...
<tr><td><button>сохранить</button></td></tr>
</table>
</form>

msgascii
()
Ответ на: комментарий от anonymous

В смысле, на 

if(status==200) document.write(responseText)
//fixed

anonymous
()
Ответ на: комментарий от anonymous

так заработало, осталась одна маленькая не удобная мелочь. при нажатии на кнопку выскакивает окошко со всей post строкой и кнопкой ок (строка выглядет примерно так же как get запрос в адресной строке). как избавится от этого всплывающего окошка?

Evgen25
() автор топика
Ответ на: комментарий от msgascii

а не получится, тогда форма берет только последние значения (последнюю строку в таблице). пробовал я уже так делать

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

анонимус выше все уже указал. форма берет все поля, которые находятся внутри нее.

возможно, что некоторые поля имеют одинаковое имя, тогда старые затираются новыми.

msgascii
()
Ответ на: комментарий от anonymous

спасибо большое, я так понимаю что input можно убрать и сделать по первому варианту? 

.map.call(document.querySelectorAll("table tr td"), function(el){return el.innerHTML})

и еще, почему то при выполнении этого кода в логах вэб сервера появляются надписи, что файлы css и js не найдены. у меня их никогда и не было. как исправить? 

 File does not exist: /var/www/css, referer: http://test.local/test/ajax2.html
File does not exist: /var/www/js, referer: http://test.local/test/ajax2.html
в файле ajax2.html лежит Ваш код

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

А, простите, я перепутал, думал Вы мне отвечали, я по поводу alert, думал:)

anonymous
()
Ответ на: комментарий от anonymous

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

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

я так понимаю что input можно убрать и сделать по первому варианту?

да, можно конечно, я просто думал, что пользователь данные должен вводить, а так, разницы нет.

По поводу серверных логов — не знаю.

anonymous
()
Ответ на: комментарий от anonymous

если делать по первому варианту, без инпутов, то куда прописать каким значениям какие переменные назначаются, что бы получить запрос вида param1=a&param2=b&param3=c&param4=d? в интупах то понятно как, а тут как быть?

Evgen25
() автор топика
Ответ на: комментарий от anonymous

по поводу логов. это мой скрипт ищет файл css и другие плагины. такое ощущение что где то переменные переопределяются, потому что они лежат в другом месте, и в скрипте они прописаны. вот почему он ищет их не там где надо мне не понятно. при переходе с обычного html файла он стили и плагины подхватывает нормально

Evgen25
() автор топика
Ответ на: комментарий от anonymous

и еще один момент выявил. в адрессной строке при переходе со страницы ajax2.html в адрессной строке остается ajax2.html, скрипт выполняется, но на него не переходит

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

Как-то так: 


<html>
<head>
</head>
<body>

<table>
<tr><td name="param1">10</td></tr>
<tr><td name="param2">10</td></tr>
<tr><td name="param3">10</td></tr>
<tr><td name="param4">10</td></tr>
<tr><td> <button id="b">push</button></td></tr>
</table>

<script>


b.onclick=function(){
 with(new XMLHttpRequest){
 open("POST", "list.pl", false)
 
 var q=[]
 .map.call(document.querySelectorAll("table td"), function(el){
   return el
 })
 .filter(function(el){return !(/button/.test(el.innerHTML))})
 .map(function(el){
   return el.getAttribute("name")+"="+encodeURIComponent(el.innerHTML)+"&"
 })
 .join("").replace(/\&$/, "")
  send(q)
 if(status==200) document.write(responseText)
 } 
}


</script>

</body>
</html>

anonymous
()
Ответ на: комментарий от Evgen25

Так и должно быть. Чтобы переходил, надо чтобы сервер на этот запрос отдавал не html, а адрес этого html'а, и тогда мы перенаправляли бы пользователя по этому адресу с помощью location=responseText. А так как мы внутренностей сервера не знаем, пришлось применить document.write, он просто перезаписывает существующую страницу новым текстом. Ничего лучше я тут придумать не могу, увы:) может быть кто нибудь менее костыльный вариант предложит, подождите.

anonymous
()
Ответ на: комментарий от anonymous

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

Evgen25
() автор топика
Ответ на: комментарий от anonymous

я тут подумал на досуге, а если в таблице 500 строк, и для каждой надо сделать кнопку перехода, то я должен сделать 500 id и для каждого id написать скрипт, или это можно сделать как то иначе?

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

Вот такой вариант 


<html>
<head>
</head>
<body>

<table>
<tr>
<td name="param1">10</td>
<td name="param2">10</td>
<td name="param3">10</td>
<td name="param4">10</td>
<td><button>push</button></td>
</tr>
<tr>
<td name="param2">20</td>
<td name="param2">20</td>
<td name="param3">20</td>
<td name="param4">20</td>
<td><button>push</button></td>
</tr>

</table>

<script>

getAll=function(parent, selector){return parent.querySelectorAll(selector)}
get=function(parent, selector){return parent.querySelector(selector)}



;[].forEach.call(getAll(document, "table tr"), function(el){
 var q=[]
  .map.call(getAll(el, "td"), function(el){return el})
  .filter(function(el){return !(/button/.test(el.innerHTML))})
  .map(function(el){
   return el.getAttribute("name")+"="+encodeURIComponent(el.innerHTML)+"&"
  })
 .join("").replace(/\&$/, "")
 get(el, "button").onclick=function(){
   with(new XMLHttpRequest){
     open("POST", "list.pl", false)
     send(q)
     if(status==200) document.write(responseText)
   }
 }
})


</script>

</body>
</html>

nond
()
Ответ на: комментарий от msgascii

не получается использовать window.location = «новый адрес»; он просто переходит на этот скрипт (list.pl), и никакого вывода нет. эффект такой же как просто открыть этот скрипт в браузере

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

во-первых, window.location, без всяких pathname

во-вторых, убери точку после фигурной скобки (ты же не используешь шаблонизатор?)

в-третьих, document.write уже не нужен.

msgascii
()
Ответ на: комментарий от msgascii

Я че-то ни хрена не понял:) ему же нужна страница, сформированная с учетом параметров из таблицы, а так он просто получит дефолтную страницу. В чем тогда смысл канители с post-запросом? Так можно было бы на кнопку повесить редирект на test/list.pl и голову не морочить отправкой параметров:)

nond
()
Ответ на: комментарий от nond

я так понял, что тсу нужно отправить обычный пост запрос с данными с формой. т.е. вместе с отправкой данных осуществляется переход. проблемы начались из-за того, что он не захотел разобраться в причинах выборки не всех данных в форме.

msgascii
()

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

<form action="туда" method="post">
    <table>
        <tr>
            <td>
                <input type="hidden" name="value[]" value="a1">
                a1
            </td>
            <td>
                <input type="hidden" name="value[]" value="a2">
                a2
            </td>
            <td>
                <input type="hidden" name="value[]" value="aN">
                aN
            </td>
            <td>
                <input type="submit" value="Отправить">
            </td>
        </tr>
    </table>
</form>

deep-purple ★★★★★
()
Последнее исправление: deep-purple (всего исправлений: 1)
Ответ на: комментарий от msgascii

по первому пункту, оставил window.location = 'test/list.pl'; переходит на дефолтную страницу, пост запрос ничего не отдает, осуществляется переход на скрипт без параметров. точка, это не удачно скопировался текст (в редакторе так отображается пробел). вообщем, поскольку javascript для меня темный лес, сел за изучение его.

Evgen25
() автор топика
Ответ на: комментарий от deep-purple

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

по поводу скрипта, знаний конечно очень мало, но мысли такие: в переменной q у нас лежит все нужные переменные для пост запроса. нельзя ли сделать следующее, скрипт известен, переменные лежат в «q». осталось выполнить пост запросом скрипт с параметрами и открыть в новом окне? делая window.location='test/list.pl' мы же выпалняем get запрос без параметров и открытие его в окне. или с post запросом все грустно в этом плане?

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

Еще одна причина по которой я хочу избавиться от инпута, сделать сортировку столбцов в таблицы. Библиотек готовых много, а вот которые в состоянии обработать текст в инпуте, я не нашел

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

javascript для меня темный лес
скрипт обрабатывает только последнюю строку
знаний конечно очень мало
...

Ну вот поэтому ты до сих пор не сделал. А тебе уже несколько раз разными способами показали как сделать. И если ты думаешь что тебе готовый код под копипасту дают — это не так. Тебе дают примеры, которые ты должен сам подогнать под свою задачу.

сортировку столбцов в таблицы

dataTable — любые мыслимые выкрутасы и кастомизация.

deep-purple ★★★★★
()
Ответ на: комментарий от deep-purple 
<form action="..." method="post">
<table>
<tr><td><input type="text" name="form[blabla]"></td>
<td><button>сохранить</button></td>
</tr>
<tr><td><input type="text" name="form[blabla]"></td>
<td><button>сохранить</button></td>
</tr>
</table>
</form>

если я делаю так, что у меня в пост запрос попадают значения всех строк. вопрос почему? что я делаю не так?

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

Выкинуть форму вообще, собрать значения инпутов из того ряда где кликнул кнопку и отправить аяксом. Этот вариант тебе тоже предлагали выше.

deep-purple ★★★★★
()
Ответ на: комментарий от deep-purple

скрипт который nond написал? всё классно, он работает, только одно неудобство. он не переходит по адресу, он перезаписывает существующую страницу, что меня несколько смущает. windows.open не умеет пост запрос делать. если за место document.write(responseText) делаю window.location = 'test/list.pl' то он у меня get запросом просто переходит на указаный адрес

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

в перле есть какой-нибудь вариант пхпшного var_dump? может у тебя скрипт неправильно принимает входящие данные?

в качестве громаднейшего костыля могу предложить использовать манипуляцию адресной строкой браузера, http://stackoverflow.com/a/3340186 , но работать будет только в новых браузерах. это использовать вместо location.change

msgascii
()
Ответ на: комментарий от msgascii

что принимает скрипт, и как принимает скрипт, я успешно смотрю через firebug. очень хорошо видно каким методом поступил запрос и какие параметры отданы скрипту. вся отладка происходит именно через эту утилиту

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

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

msgascii
()
Ответ на: комментарий от msgascii

что то я запутался. давайте детально тогда. есть скрипт js и скрипт pl. есть firebug (пусть будет fb). при выполнении js скрипта fb показывает, что при строке 

 if(status==200)  window.location = 'test/list.pl'
происходит переход на файл pl методом get без параметров. при строке 
document.write(responseText)
происходит перезапись вывода файла со js скриптом. в файле pl есть проверка введенных значений, если значений нет, то он выводит надпись, вы ничего не ввели.

Evgen25
() автор топика
Ответ на: комментарий от Evgen25

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

впрочем, если тебя все устраивает, то меня это точно волновать не должно.

msgascii
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
 ← 1 2 →
Web-development