Submitting Data From Input Elements in table

Belisarius

Hi,

Just trying to clarify and get some pointers here:

I have a large'ish table loaded with pagination on. Each row has an Input box using a datepicker. I want to submit (POST) the form with only the input boxes that have a value entered. I've tried a few approaches but I'm not having much luck. Using the Check-box example and serialize I was getting ALL Inputs submitted even if empty.

I've tried pulling out the hidden rows using the fnGetHiddenTrNodes example but I'm not sure how to get to the actual Input field value within the row.

Would a possible solution be to get confirmation of submit from the user, set the number of visible rows to all (large number or -1 in beta?) then redraw and do the submit? All values would be visible then so the submit should work as normal?

Or am I missing the obvious?

Cheers

Andy

sihing_steve

Just finished a similar project, here's what I did.

I'm calling in 100 different "devices" each of which have 21 different field values. Once the data arrives and is paginated, I use the "fnDrawCallback": function() to enable my functions to detect the changes in checkbox or text fields. This way changes in any of the fields are picked up when the table is redrawn.

Each time the user changes a value, a small form is submitted via Ajax to the server to make note of the change in a temporary table. Once the user is finished making his/her changes, they would press a button to send a form to the server to process those temporary values into the main database table.

Should a user attempt to leave a page before saving their changes, they are prompted before leaving the page by using the "onbeforeunload" event.

HTH.

Belisarius

Have to admit I've not really dabbled with Ajax at all and as I only have one field to possibly update I was looking for a 'simpler' solution :)

Maybe I'll just have to put the effort in!

Cheers

Andy

allan

@Andy,

Can't you just check to see if the checkbox is selected or not before inserting the hidden input element? That way you only get the checked ones. You could even insert this code into the plug-in function if you wanted.

Allan

Belisarius

Hi again,

I've been using the API plugin code to look at hidden rows and pick out the date entered in an input box. Using the following..

[code]$.fn.dataTableExt.oApi.fnGetHiddenTrNodes = function ( oSettings )
{
/* Note the use of a DataTables 'private' function thought the 'oApi' object */
var anNodes = this.oApi._fnGetTrNodes( oSettings );

/* Count number of records to update*/
var dateCount = 0;
var dateList = "";

for ( var i=0 ; i

allan

Hi Andy,

It sounds like IE6 is reporting an error on the first hidden node that you try to get information from - so I think it is getting the hidden nodes etc correctly, it's just a question of getting the correct selector for the value you want. Does this work for you:

var temp = $('td:eq(3)', nNodes[i]).html()
(or .text() at the end if you don't want HTML)

Regards,
Allan

Belisarius

Didn't work. All I'm getting is the 'Choose Date' text for the table cell. I'm assuming the code you show gets what's in the td element. But I have an Input box in there and it's the value in there that I need to check?

Cheers

Andy

Belisarius

Changed to this:


[code]var iType = anNodes[i].getElementsByTagName('input');
var temp = iType[0].value;[/code]

and that seems to work for both although I'm getting a weird error in IE after submit where Object Doesn't support property or method. Load up VS to debug and I get

Error 1 Validation (): Element 'html' occurs too few times.

and no source showing in the window.

Any suggestions please? If I break and then stop debugging then the page loads as expected.

Andy

Belisarius

Although I think this is the error on Submit (Object doesn’t support this property or method). I think the HTML thing may just be VS.

Andy

Belisarius

Sorted.

Had a errant document.submit() in there that I could have sworn I'd deleted. It's amazing how changing the clocks by one hour when you have 2 kids under 3 can mess your head up!

Cheers

Andy

Philip Harvey

Hi, I've read all the discussion above but don't think it answers my question. I have a table with a check box & radio button on each row ... I can get the values of each using var_dump($POST), When I convert this to a datatables table only the visible rows, ie, the current page get returned. Am I missing something or do I need to get into some of the complex programming described above .... the example looks as if I just need to add another definition in my 'header' ?, is this right ?

Thanks in advance
Phil

allan

Hi Phil,

If you want to get the hidden records in the table, you can use the fnGetHiddenNodes() plug-in API function:
http://datatables.net/plug-ins#api_fnGetHiddenNodes

With the information from that function you can then construct hidden input elements on the page which contains the information that you want to submit to the server.

Hope this helps,
Allan

Philip Harvey

Hi Alan, thanks for that.. but I must be missing something, Today the old style table / form passes to the data to the program called in the statement, then on that program I use the $_POST or var_dump() method to get the details of what has been selected. In your example you have it just displaying a variable which is an array of values, how do I access that array from another program using PHP ?

Many thanks in advance
Phil

allan

Hi Philip,

What you need to do is take that Javascript array and put it into the DOM as hidden INPUT elements. For each input element that you create you can then inject it into the DOM as a child of the FORM element in question. That way the information will be available in the form for the browser to post to the server.

Regards,
Allan

Philip Harvey

Hi Allan,

Your answer seems to be written in a language that I dont understand, which I realise is my problem not yours :-). But would it be possible to post some sample code that takes the data from the form and puts it in a format that I can access from another program using $_POST or vardump.

Regards
Phil

allan

Hi Phil,

Yup - this part needs to be Javascript based :-). You could try something like the following (which I have to warn you is untested!):

[code]
$('form').submit( function () {
var nNodes = oTable.fnGetHiddenNodes();
for ( var i=0 ; i

Philip Harvey

Many thanks Allan, that helps a lot.