Is it at all possible to serialize only elements on a form using the $
$ selector?
For example:
...
<tbody>
<tr id="row_1" class="new_row">
<td>
<input type="text" name="data[item]" />
</td>
</tr>
<tr id="row_2" class="new_row">
<td>
<input type="text" name="data[item]" />
</td>
</tr>
</tbody>
...
And then using prototype to serialize each row:
Form.serialize($('form').getElements($$('#row_1'));
Form.serialize($('form').getElements($$('#row_2'));
on 2008-06-24 16:49
on 2008-06-24 17:27
Okay, this seems to work. I'm not sure if its the most effective way
though.
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<form id="test">
<table>
<thead>
<tr>
<th>Input 1</th>
<th>Input 2</th>
<th>Input 3</th>
</tr>
</thead>
<tbody>
<tr id="row_1">
<td>
<input class="row_data" type="text"
name="data[item][0]" value="abc1" />
</td>
<td>
<input class="row_data" type="text"
name="data[item][1]" value="abc2" />
</td>
<td>
<input class="row_data" type="text"
name="data[item][2]" value="abc3" />
</td>
<td>
<a href="#" onclick="getRow($
('row_1'));">Serialize Row</a>
</td>
</tr>
<tr id="row_2">
<td>
<input class="row_data" type="text"
name="data[item][0]" value="abc4" />
</td>
<td>
<input class="row_data" type="text"
name="data[item][1]" value="abc5" />
</td>
<td>
<input class="row_data" type="text"
name="data[item][2]" value="abc6" />
</td>
<td>
<a href="#" onclick="getRow($
('row_2'));">Serialize Row</a>
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
getRow = function(row) {
alert(Form.serializeElements($(row).descendants()));
}
</script>
</body>
</html>
on 2008-06-25 18:08
ew inline event handler! I haven't seen that in a while...I think you
could have an easier time doing something like this...
$$("form tr a").each(function(anchor){
var pRow = anchor.up("tr");
anchor.observe("click", function(e){
alert(Form.serializeElements(pRow.select("input, select,
textarea"));
});
});
Unfortunately you lose a lot of the convenient form references like
"elements" that access all possible form input objects. I tried to
recreate this with the select method
http://prototypejs.org/api/element/select
I am not sure on your entire scope but it might be a worthwhile
approach to segregate the form into many "mini-forms" that only
contain the elements you're after.
This little diddy will give you a collection of each row's input
object's serialized, could be handy...
arr = $$("form tr").collect(function(row){
Form.serializeElements(row.select("input, select, textarea"));
});
--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com
on 2008-06-25 20:24
In rereading this i noticed a big error, you'll have to put a return
on that collect method, my bad...
arr = $$("form tr").collect(function(row){
return Form.serializeElements(row.select("input, select,
textarea"));
});
--
Matt Foster
Ajax Engineer
Nth Penguin, LLC
http://www.nthpenguin.com
Enable email notification
Enable multi-page view