Form, Checkbox, and MySQL

Form, Checkbox, and MySQL

jasonruylejasonruyle Posts: 3Questions: 0Answers: 0
edited March 2009 in General
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.
«1

Replies

  • sihing_stevesihing_steve Posts: 6Questions: 0Answers: 0
    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;
  • jasonruylejasonruyle Posts: 3Questions: 0Answers: 0
    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.
  • jasonruylejasonruyle Posts: 3Questions: 0Answers: 0
    edited March 2009
    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.
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • archimedearchimede Posts: 6Questions: 0Answers: 0
    edited May 2009
    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. :(
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • archimedearchimede Posts: 6Questions: 0Answers: 0
    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
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • pablodiazpablodiaz Posts: 2Questions: 0Answers: 0
    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.
  • archimedearchimede Posts: 6Questions: 0Answers: 0
    That's what my workmate came up with:
    [code]$(document).ready(function() {
    $('#form').submit( function() {
    for(i=0; i
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • pablodiazpablodiaz Posts: 2Questions: 0Answers: 0
    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.
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    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
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    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 ?
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    yes I do print_r

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

    :D(
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    I think that there is no new input type hidden...
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    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)
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    And what does print_r() give you now?
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    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(
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    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
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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.
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    edited September 2009
    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)
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    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
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    edited September 2009
    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)
  • allanallan Posts: 63,407Questions: 1Answers: 10,452 Site admin
    edited September 2009
    Try something like this:

    [code]

    var oTable;

    $(document).ready(function() {
    $("#main").submit( function() {
    for(i=0; i
  • mickeymicmickeymic Posts: 23Questions: 0Answers: 0
    Hey It's good for me

    Very Good

    Thank you very much allan, you are really nice ;D)
This discussion has been closed.