SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast wallyweb's Avatar
    Join Date
    Oct 2003
    Location
    Saint John, NB, Canada
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX checkbox issue

    Difficult to determine where to post this as it involves a form posting data via AJAX, PHP, JavaScript to a MySQL database on an Apache server ... so if you must move it, be sure to let me know.

    The issue:

    Checkbox values are posted irregardless of whether the checkbox is selected or not.

    POST via AJAX was used because the form submits input from select, text, textarea, radial and checkbox all on one UPDATE click and feeds back a message.

    All works as intended except for the checkboxes.

    Here is the code (non-issue items removed):

    Code:
    <form name="formname" method="POST">
    <input type="checkbox" name="companyA" id="companyA" value="A" <?php $z=$companyA; if($z=='A'){echo 'CHECKED';}?> tabindex="1"/>A<br/>
    <input type="checkbox" name="companyB" id="companyB" value="B" <?php $z=$companyB; if($z=='B'){echo 'CHECKED';}?> tabindex="2"/>B<br/>
    <!-- ======= Send to update page via AJAX ====== -->
    <input type="button" name="update" id="update" class="button" value="UPDATE" onclick="SetClimate('updateitem.php', 'formname', 'messagebox2')" tabindex="3"/>
    </form>
    Let me know if you need more information. Thanks.

    By the way, the database default is NULL:

    companyA VARCHAR(255) DEFAULT NULL
    companyB VARCHAR(255) DEFAULT NULL
    Last edited by wallyweb; Jul 27, 2006 at 03:48. Reason: more descriptive summary/title

  2. #2
    PHP Brainiac dg_den_golotyuk's Avatar
    Join Date
    Jul 2006
    Location
    Kiev, Ukraine
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...'All works as intended except for the checkboxes'...
    What do you mean by that?
    DG [Den Golotyuk], Lead Developer
    Chestnut Software
    Avoid web outsourcing scams!
    Click here
    for a free downloadable report

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    Mar 2006
    Posts
    6,132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gonna take a guess here.

    your checkboxes have a value assigned to them, which is ok. but that value should only be grabbed if the checkbox is checked.

    so in your javascript which retrieves the values of the different form fields, you must only grab the value from the checkboxe if it is checked.

    im not that great with javascript, but i beleive something to this order would work
    Code:
    if (document.getElementById('companyA').checked) {
       val = document.getElementById('companyA').value;
    } else {
        val = '';
    }
    
    if (!val) {
        // dont even bother adding the name/value to the post data
    }
    although your application may still work as intended if you still sent the checkbox name with an empty value in the post data, it may be better to just not even send the name of the checkbox at all if its not checked, because thats how a browser would behave.


    btw, you can easily verify if this is your problem. im sure you build a variable in javascript which represents the post data. instead of submitting the post data, just alert() it or use a div and set the divs innerHTML to the value of the postdata so you can see it.

  4. #4
    SitePoint Enthusiast wallyweb's Avatar
    Join Date
    Oct 2003
    Location
    Saint John, NB, Canada
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dg_den_golotyuk
    What do you mean by that?
    Other parts of the form with multiple input options, such as with radial and with select only send the selected values.

    Quote Originally Posted by clamcrusher
    gonna take a guess here.

    your checkboxes have a value assigned to them, which is ok. but that value should only be grabbed if the checkbox is checked.

    so in your javascript which retrieves the values of the different form fields, you must only grab the value from the checkboxe if it is checked.
    Exactly ... normal form behaviour

    Quote Originally Posted by clamcrusher
    im not that great with javascript, but i beleive something to this order would work
    Code:
    if (document.getElementById('companyA').checked) {
       val = document.getElementById('companyA').value;
    } else {
        val = '';
    }
    
    if (!val) {
        // dont even bother adding the name/value to the post data
    }
    That might work but normal form processing should look after this. What is breaking the process?

    Quote Originally Posted by clamcrusher
    although your application may still work as intended if you still sent the checkbox name with an empty value in the post data, it may be better to just not even send the name of the checkbox at all if its not checked, because thats how a browser would behave.


    btw, you can easily verify if this is your problem. im sure you build a variable in javascript which represents the post data. instead of submitting the post data, just alert() it or use a div and set the divs innerHTML to the value of the postdata so you can see it.
    The value is posted to the table in the database, whether checked or not. I verified this with a SELECT in the console.

    Perhaps this is more a JavaScript issue than a PHP one.
    Feel free to move it if that's the case :-(
    Last edited by wallyweb; Jul 25, 2006 at 11:35. Reason: adding notification

  5. #5
    SitePoint Enthusiast wallyweb's Avatar
    Join Date
    Oct 2003
    Location
    Saint John, NB, Canada
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up issue is with ajax

    Sorry for the double post but after much googling, digging and delving, I have found that this issue seems to be known:

    When a form with checkboxes is posted via AJAX, all checkbox values, irregardless of whether they be checked or not, are passsed to the server.

    Debugging to follow the flow of the data seems to confirm this.

    My quest through the internet in search of a solution has returned NULL.

    Meanwhile, I have resorted to a different approach to my goal and have substituted a multiple select option menu which appears to work. However the checkboxes would be the better solution from a user viewpoint.

    Any ideas or suggestions?

    UPDATE

    Clamcrusher was right:

    Quote Originally Posted by clamcrusher
    i beleive something to this order would work
    Code:
    if (document.getElementById('companyA').checked) {
       val = document.getElementById('companyA').value;
    } else {
        val = '';
    }
    
    if (!val) {
        // dont even bother adding the name/value to the post data
    }
    I added the following condition to my AJAX function:

    Code:
    eval("document."+ajax+".elements[x].type")=="checkbox" && eval("document."+ajax+".elements[x].checked")==true
    and it worked like a charm, so the checkbox implementation is back on.

    Thank you Clamcrusher
    Last edited by wallyweb; Jul 27, 2006 at 09:55. Reason: Update


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •