Form, Checkbox, and MySQL

jasonruyle

I really like the design and ease of this setup, but I'm having some problems and was hoping someone would be kind and help.

I am using an adaptation of the form.html example:
http://datatables.net/examples/example_form.html

I'm able to load my data from mysql database correctly, but I'm not sure how to use the currently jquery seralize callback to update my database.

for loading my table I used this:


while($row = mysql_fetch_array($result1))
{
echo '';
echo '' . $row['disname'] . '';
echo '' . $row['gender'] . '';
echo '' . $row['age'] . '';
echo '';
echo "";
}


Among other bits of code. But the part that I need to update is the input checkbox. I currently have the data loaded from another form submission and that value is always set to the number 0. I would like that to be unchecked. And then if its checked and submitted, the value is changed to 1.

In the future I will try and export all the values that are equal to 1.

But I'm not sure how to take that seralized data and push it to the database to update it.

$row['ID'] is the incremental key, so thats the unique reference point.
$row['authstatus'] is the 0 or 1 value.

Could someone help? If needed, I can pay someone to finish this task or we can just post it on the forums for others to learn from.

sihing_steve

Here's what I do with a form I want to submit. All I do is trigger this code with jQuery from a button push which then sends the form back to the server. (If I understood you correctly)

tempcheckval = jQuery("#nibblesubmit").serialize();
var thetext = jQuery.ajax({ type: "POST",
url:"tempsavetable.php",
cache: false,
async: false,
data: tempcheckval
}).responseText;

jasonruyle

So write now my jquery looks like:


$(document).ready(function() {
$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return false;
} );
oTable = $('#profile').dataTable();
$("a.single_image").fancybox();
} );


So rather then do that alert, something like:

$(document).ready(function() {
$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
var thetext = jQuery.ajax({ type: "POST",
url:"tempsavetable.php",
cache: false,
async: false,
data: sData
}).responseText;
} );


So my data is being sent serialized to my processing form, what does that processing form actually look like?

When I click the submit button from the example (and with my small changes), my alert looks like:
The following data would have been submitted to the server:
1=1&2=1&3=1

I checked ID1-3, and set that value to 1.

jasonruyle

Yeah with the way I just tried, its just adding new records to the database, not updating. I have a little learning todo for now.

allan

Hi jasonruyle,

It looks like what is being sent to the server is correct thank to the help from sihing_steve. You said you checked the boxes for 1, 2 and 3, and that is what is being sent to the server (you might want to alter your INPUT element name to be something a little clearer such as "name="Row_' . $row['ID'] . '"".

From that point you just need to get the server-side processing correct to extract the IDs which need to be updated and then issue the UPDATE SQL statement :-)

Allan

archimede

Hi all.

Sorry for resurrecting this old thread but I'm having an issue in a similar scenario.

Suppose a form like the one of the example url above and the following code:
[code]
$(document).ready(function() {
$('#form').submit( function() {
var sData = $('input', oTable.fnGetNodes()).serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
//return false;
} );
oTable=$('#sceglicheck').dataTable( {
"aaSorting": [ ], // Prevent initial sorting
"aoData": [
{ "sType": "html" },
null,
null,
null,
null,
],
"sPaginationType": "full_numbers",
"oLanguage": {
"sUrl": "/js/datatables/language/it_IT.txt"
}
});
});
[/code]
If I select a couple of checkboxes on page 1 and a couple of checkboxes on page 2, the alert message displays the correct string (though I don't see the hidden fields there, but I guess it's ok) but on the server I receive only the values of page 2 (and the hidden fields).

What am I doing wrong?

TIA.

Alessandro

[Edit] I also tried serializeArray, but it doesn't seem to make any difference (except in the alert): I always get the checkboxes of the page shown when I submit the form. :(

allan

So the question is, you have created the string "sData" with the data you want, but what do you then do with it? It rather looks like you don't do anything with it :-)

Ah - I've just realised why you expected this to work - it's in my demo, but the demo is incomplete... The demo just shows how you could get the information from this nodes, but doesn't set it up so as to actually submit the data. I've added an updated example to my to-do list...

What you need to do is add a hidden input element to the page for each checkbox which is selected such that the browser will submit it when it sends the form to the server.

Hope that clears up the confusion,
Allan

archimede

Allan,

thank you for your reply.

I was suspecting something stupid on my part, but my javascript skills are... ahem... limited.

In order to better understand your suggestion, could you please explain why some checkboxes are sent (those visible) and others are not?

Also a brief example on how to populate the hidden element(s?) would be greatly appreciated. ;)

Regards.

Alessandro

allan

The reason some are sent and some aren't is that only elements which are actually in the DOM (on the page) at the time of the browser submitting the data to the server will be parsed for information - those which are hidden by DataTables will not be.

As such, the information is only being sent which is currently visible (the first page for example). So what needs to be done is that you either move the search boxes all into the DOM (from the hidden rows) or you insert hidden input elements into the DOM with the information given in the hidden rows.

Yes, I'll update my example when I get a chance :-)

Allan

pablodiaz

Hi everybody,

My problem is the same as the Archimede. All understand what you mean Allan, but I don't understand how you get to redraw checkboxes when you change pages. Can you post an example? Thank you so much.

archimede

That's what my workmate came up with:
[code]$(document).ready(function() {
$('#form').submit( function() {
for(i=0; i

allan

Nice one Alessandro - thanks for sharing your code for this solution! This is a fairly common question, so hopefully others will benefit from this as well.

Regards,
Allan

pablodiaz

Hi everyone
I've been working on another project and I could not visit the forum so far. Thank you very much Alessandro, your code has given me the solution. Thank's again.

mickeymic

Hello,

sorry for my english

I try to use the alessandro's solution to have checkboxes when you change pages. Because I want to delete.

I do this :

[code]
var oTable;

$(document).ready(function() {


$('#form').submit( function() {
for(i=0; i








<?php

for ($f = 1; $f <= $nbre_champs; $f++)
{

?>
Variable <?php echo $f;?>

<?php
}
?> 




<?php

while($data = mysql_fetch_assoc($r)){

?>



<?php

for ($d = 1; $d <= $nbre_champs; $d++)
{

echo "".htmlentities($data['reponse_contenu_jeux_'.$d.''],ENT_COMPAT,'utf-8')."";

}

?>




<?php

}

?>




<?php

for ($f = 1; $f <= $nbre_champs; $f++)
{

?>
Variable <?php echo $f;?>

<?php
}
?>
 





[/code]

And this is function verifselection () :

[code]function verifselection() {

n = 0;
temp = document.main.elements.length;

for (i=1; i

allan

Hi mickeymic,

I'm not sure what the problem is :-). Is it not working? Have you done a print_r($_POST) on the server side to make sure everything is coming through okay? There is quite a lot of code there to parse through... Perhaps you can narrow the issue down...

Allan

mickeymic

Hello,

I have no solution for the moment.

There is no problem to delete on the principal page, but when checkboxes are on an other page, there is problem to delete...

How can I have $_POST[' "h_"+item.name '] in php ?

allan

Hi mickeymic,

Did you do the print_r($_POST) as I suggested? You would be able to see all of the variables which as 'posted' to the PHP script at that point. The Javascript is basically prefixing an 'h_' to the names of the HTML checkboxes. So if your checkbox is , then there will be a POST variable called "h_input_1" posted to the server.

Allan

mickeymic

yes I do print_r

I see this [listMenu] => Array ( [0] => 2872 ) but not number checkboxes are on an other page

:D(

mickeymic

I think that there is no new input type hidden...

allan

I think you are right :-). This line is going to be a problem:

[code]
$('#form').submit( function() {
[/code]
Your element doesn't have an ID of 'form', therefore that submit function is never going to be executed! Sticking a console.log() or alert() into it would confirm this. Try using the selector $("form[name='main']"). :-)

Allan

mickeymic

Thanks you for your patience I'm sorry :D)

I try again to find a solution, but impossible..

This is my last code :

[code]
var oTable;

$(document).ready(function() {

$("form[id='main']").submit( function() {
for(i=0; i
Variable <?php echo $f;?>

<?php
}
?> 




<?php

while($data = mysql_fetch_assoc($r)){

?>



<?php

for ($d = 1; $d <= $nbre_champs; $d++)
{

echo "".htmlentities($data['reponse_contenu_jeux_'.$d.''],ENT_COMPAT,'utf-8')."";

}

?>




<?php

}

?>




<?php

for ($f = 1; $f <= $nbre_champs; $f++)
{

?>
Variable <?php echo $f;?>

<?php
}
?>
 







[/code]

I don't know how use console.log() or alert(), sorry

I'm sure that I'm near the solution.

;D)

allan

And what does print_r() give you now?

mickeymic

Hello,

The same thing :

Array ( [example_length] => 15 [listMenu] => Array ( [0] => 2558 ) [submit] => effacer )

but when checkboxes are on an other page, there is nothing

:D(

allan

Okay, you need to use 'alert()' to figure out what is going on. Also change your selector to be "$("#main").submit( function() {"... To use alert, just put "alert('hello');" after that submit line. Probably worth checking out how to debug Javascript on Google as well - here is the first hit: http://javascript.internet.com/debug-guide.html

Allan

mickeymic

I understand. (it's like echo in php to test)

I test :

[code]$("#main").submit( function() {alert('hello');}[/code]

it's ok, i have the message


[code]$("#main").submit( function() {

for(i=0; i

allan

Okay, next thing then - you said that the checkbox was in the last column of your table - but your code is looking at the first column... "oTable.fnGetNodes()[i].cells[0].childNodes[0]". Probably worth fixing that as well :-). Perhaps $("input", oTable.fnGetNodes()[i])[0] would do instead.

mickeymic

I do this :

[code]

var oTable;

$(document).ready(function() {
$("input", oTable.fnGetNodes()[i])[0].submit( function() {
alert('hello');
} );
oTable = $('#example').dataTable( {
"aaSorting": [ ],
/*"sPaginationType": "full_numbers"*/
} );
} );
[/code]

but there is an error (oTable is undefined)

allan

You are trying to use oTable before it's initialisted! Something like:

[code]
echo $i;
$i = "assigned";
[/code]
in PHP. Also - I'm not sure why you changed the selector for the submit event handler! :-). It was coorect before as you saw with the event handlers...

It might be an idea to pick up a Javascript book ("DOM Scripting" by Jeremy Keith is a good one) if you are going to be doing much Javascript development like this.

Allan

mickeymic

Arf, I'm lost...

:D(

I'm not a specialist of Javascript development (I know), but I find your Data Tables very good, and I want to use it for my administration.

Thanks for your recommendation of book.

So Where i can put this : oTable.fnGetNodes()[i].cells[0].childNodes[0]

I must continu to use $("#main").submit( function() { ??

I'm so sorry to have all this problem

;D)

allan

Try something like this:

[code]

var oTable;

$(document).ready(function() {
$("#main").submit( function() {
for(i=0; i

mickeymic

Hey It's good for me

Very Good

Thank you very much allan, you are really nice ;D)