SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 33
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A simple grid rows / columns

    Hi all.

    I need your help.

    I realize this script and I do not know where to begin:

    1) A simple grid rows / columns.
    2) The first column contain an input type = "checkbox"
    3) When select the input type, the line should change color than the other rows, and you should open a popup window.

    For points 1, 2 you are OK.
    Point 3 is the difficulty.

    Suggestions?
    Examples?

    Kind regards
    Viki

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    If you were using jQuery, this is the type of code you might use.

    Code javascript:
    $(':checkbox').click(function () {
        $(':checkbox').each(function () {
            if (this.checked) {
                $(this).setClass('active');
            } else {
                $(this).removeClass('active');
            }
            window.open('advertising.html');
        });
    });

    Without jQuery, you're looking at around 500% more code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I don't use JQuery... what JQuery?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    jQuery is a JavaScript library that simplifies scripting by simplifying document traversal and manipulation, along with resolving a vast number of cross-browser issues.

    As we're not likely to use jQuery for your solution, we can come up with some regular scripting for you to use.

    What is the code that you currently have? Is there an identifier to indicate the group of rows and columns? In orer to script for it, we need to know what your HTML code looks like too.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    jQuery is a JavaScript library that simplifies scripting by simplifying document traversal and manipulation, along with resolving a vast number of cross-browser issues.

    As we're not likely to use jQuery for your solution, we can come up with some regular scripting for you to use.

    What is the code that you currently have? Is there an identifier to indicate the group of rows and columns? In orer to script for it, we need to know what your HTML code looks like too.
    OK this is my code html:

    Code:
    <div align=center>
    
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border: 1px Solid #6699CC;">
    <tr>
    <td>
    <TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 style="font-size=11px;font-family:tahoma;" width="100%" BGCOLOR=WHITE>
    <tr bgcolor=#dcdcdc>
    
    <td align=center>Seleziona checkbox</td>
    <td align=center><b>Colonna A</b></td>
    <td align=center><b>Colonna B</b></td>
    <td align=center><b>Colonna C</b></td>
    <td align=center><b>Colonna D</b></td>
    
    <td align=center><input type=checkbox name=C1 value=ON></td>
    <td align=right>CMP</td>
    <td align=right>07/02/2010</td>
    <td align=center>06:43</td>
    <td align=left>SALERNO NORD</td>
    
    
    </td>
    </tr>
    </table>
    </div>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Okay, you want to chnge the row colour when the checkbox is clicked, and open a window. I presume that there are multiple rows of these within the table, so we want a way to attach events on to the inputs without affecting other parts of the page.

    As there are likely to be many rows, instead of attaching multiple events onto multiple inputs, we can instead allow the input events to bubble up the DOM to a common point, that point being the table that contains all of the rows.

    To attach the script, we need to be able to refer to some part of the table. Presuming that the div is a container for just the table, a good place to attach this one on to is the div itself, by giving the div a name that best describes its contents.

    Change the name "someList" in all of the sample code to a name that most appropriately describes the table.

    I will leave discussion about the inline presentation for later.

    Code html4strict:
    <div id="someList" align=center>
    ...

    When you change the row colour, we will change the class name of the row to "checked". We need to let the browser know what colour we want to use when that class is set. This stylesheet declaration does that for us.

    Code css:
    #someList tr.checked {
        background-color: #6699cc;
    }

    Now we want the script that will set the class name based on the state of the checkbox.

    You can put the script just before </body> which allows the script to easily find the page while it's loading.

    Code html4strict:
    <script type="text/javascript">
    ...
    </script>
    </body>

    The script itself will get the identifier for the table, and attach an onclick event on to it, so that you can capture all of the click events that occur.

    Code javascript:
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        ...
    };

    When a click event occurs, you want only in ones that are input elements

    Code javascript:
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement;
    if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
        return;
    }
    ...

    Now that you have an input that has been clicked, you want to set the class name of the row, depending on whether the checkbox is enabled or not.

    Code javascript:
    list.onclick = function (evt) {
        ...
        updateRowColour(targ);
    };
    function updateRowColour(input) {
        ...
    }

    The updateRowColour function needs to set the class name of the row. The first parent of the checkbox is the td element, and the parent of the td element is the tr element. So we need to go up two parents to get the the row.

    Code javascript:
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        }
        input.parentNode.parentNode.className = checked;
    }

    There are other ways of finding the parent that involve loops, but what we have will do well for now.

    Finally, you said that you want to open up a new window to go somewhere.

    Code javascript:
    ...
    updateRowColour(targ);
    window.open('somePage.html');

    And you're all good to go.

    Here is the full code for the test page.

    Code html4strict":
    <html>
    <head>
    <style type="text/css">
    #someList table table tr.checked {
        background-color: #6699cc;
    }
    </style>
    </head>
    <body>
    <div id="someList" align=center>
     
    <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 style="border: 1px Solid #6699CC;">
    <tr>
    <td>
    <TABLE BORDER=0 CELLPADDING=2 CELLSPACING=2 style="font-size:11px;font-family:tahoma;" width="100%" BGCOLOR=WHITE>
    <tr bgcolor=#dcdcdc>
     
    <td align=center>Seleziona checkbox</td>
    <td align=center><b>Colonna A</b></td>
    <td align=center><b>Colonna B</b></td>
    <td align=center><b>Colonna C</b></td>
    <td align=center><b>Colonna D</b></td>
     
    <td align=center><input type=checkbox name=C1 value=ON></td>
    <td align=right>CMP</td>
    <td align=right>07/02/2010</td>
    <td align=center>06:43</td>
    <td align=left>SALERNO NORD</td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </div>
    <script type="text/javascript">
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        updateRowColour(targ);
        window.open('somePage.html');
    };
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        }
        input.parentNode.parentNode.className = checked;
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Now, about the HTML code itself. The HTML attributes should use double quotes, and the presentational attributes really need to be moved out to a stylesheet instead.

    Here is the HTML code when the presentational attributes have been taken out. A minimum of class names have been added to target certain areas.

    Code html4strict:
    <div id="someList">
    <table><tr>
        <td><table><tr>
            <td class="desc">Seleziona checkbox</td>
            <td>Colonna A</td>
            <td>Colonna B</td>
            <td>Colonna C</td>
            <td>Colonna D</td>
            <td><input type="checkbox" name="C1" value="ON"></td>
            <td class="code">CMP</td>
            <td class="date">07/02/2010</td>
            <td class="time">06:43</td>
            <td class="location">SALERNO NORD</td>
        </tr></table></td>
    </tr></table>
    </div>

    The CSS code to provide the presentation that you had for the tables is:

    Code css:
    #someList table {
        margin: 0 auto;
        border: 1px Solid #6699CC;
        border-spacing: 0;
    }
    #someList table td {
        padding: 0px;
    }
    #someList table table {
        background-color: white; /* default */
        border: none; /* default */
        border-spacing: 2px;
        font-size: 11px;
        font-family: tahoma;
        width: 100&#37;;
    }
    #someList table table tr {
        background-color: #dcdcdc;
    }
    #someList table table tr.checked {
        background-color: #6699cc;
    }
    #someList table table td {
        font-weight: bold;
        padding: 2px;
        text-align: center;
    }
    #someList .code,
    #someList .date {
        text-align: right;
    }
    #someList .location {
        text-align: left;
    }
    #someList .desc,
    #someList .code,
    #someList .date,
    #someList .time,
    #someList .location {
        font-weight: 100;
    }

    Here is the full test page code that does the same job as the code in the previous post. Notice that the JavaScript code hasn't needed to be changed at all either.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Page title</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    </head>
    <body>
    <div id="someList">
    <table><tr>
        <td><table><tr>
            <td class="desc">Seleziona checkbox</td>
            <td>Colonna A</td>
            <td>Colonna B</td>
            <td>Colonna C</td>
            <td>Colonna D</td>
            <td><input type="checkbox" name="C1" value="ON"></td>
            <td class="code">CMP</td>
            <td class="date">07/02/2010</td>
            <td class="time">06:43</td>
            <td class="location">SALERNO NORD</td>
        </tr></table></td>
    </tr></table>
    </div>
    <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

    The above demo code has the CSS code in external files called css/style.css and the JavaScript code in js/script.js
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks x your help. It's OK.

    I have this problems:
    1) when unchecked the checkbox open another window...
    2) when checked other row open window, but the first row not change color and its checked

    Can you help me?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viki1967 View Post
    Many thanks x your help. It's OK.

    I have this problems:
    1) when unchecked the checkbox open another window...
    Check that the checkbox is checked, before opening the window.

    Code javascript:
    if (targ.checked) {
        window.open('somePage.html');
    }

    Quote Originally Posted by viki1967 View Post
    2) when checked other row open window, but the first row not change color and its checked

    Can you help me?
    Oh, so you want only one to be checked at a time.

    Before you do the row colour change, you need to first uncheck (and remove row colour) from all of the other rows.

    Code javascript:
    uncheckAllExceptThis(targ);
    updateRowColour(targ);

    This is where things get tricky.

    I am going to presume that all of the rows are contained within the one table. If instead you have a single table for each row, a modification will need to be made to the following code.


    The uncheckAllExceptThis function walks up the DOM to the table, gets all of the input elements contained in there, and if the input element is a checkbox (but not the one that was clicked) the checkbox will be set to unchecked and the colour of the row will be reset.

    Code javascript:
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                console.log(el.checked);
                el.checked = false;
                updateRowColour(el);
            }
        }
    }

    Here is the complete script code as it now stands:

    Code javascript:
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        if (targ.checked) {
            window.open('somePage.html');
        }
    };
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                console.log(el.checked);
                el.checked = false;
                updateRowColour(el);
            }
        }
    }
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        } else {
            input.checked = null;
        }
        input.parentNode.parentNode.className = checked;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here is the complete script code as it now stands:

    Code javascript:
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        if (targ.checked) {
            window.open('somePage.html');
        }
    };
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                console.log(el.checked);
                el.checked = false;
                updateRowColour(el);
            }
        }
    }
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        } else {
            input.checked = null;
        }
        input.parentNode.parentNode.className = checked;
    }
    Sorry but I have error javascript: 'console' is undefined,

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    My apologies, it's after midnight here. Get rid of the console.log line.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    My apologies, it's after midnight here. Get rid of the console.log line.
    No problem, I understand...

    If change checkbox the last window popup remain open in the browser, why?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Currently the popup window is a new browser window that is being opened.

    You'll need to explain what type of popup window you require if you need something different.

    Direct us to examples from other web sites if that will make it clearer easier for you to explain what you want.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Currently the popup window is a new browser window that is being opened.

    You'll need to explain what type of popup window you require if you need something different.

    Direct us to examples from other web sites if that will make it clearer easier for you to explain what you want.
    I need that when change checkbox the first window popup close and open new window popup.

    For example:

    I select checkbox number one: the script open window popup of row number one.

    I select checkbox number two: the script close window popup of row number one and open window popup of row number two.

    You understand?
    Thanks

  15. #15
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi my friend, I have problem.

    Any checkbox selected response always responds with the same sID...
    But sID is different from different checkbox...

    This is somePage.asp:
    Code:
    SELECT * FROM tbl WHERE ID = 28
    This is the grid rows / columns:

    Code:
    <script language="javascript" type="text/javascript">
    <!--
    
    
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                //console.log(el.checked);
                el.checked = false;
                updateRowColour(el);
            }
        }
    }
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        } else {
            input.checked = null;
        }
        input.parentNode.parentNode.className = checked;
    }
    
    //-->
        </script>
    
    
    <td align=center><input type=checkbox name=C1 value=ON></td>
    
    
    <script type="text/javascript">
    
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        
        if (targ.checked) {
        
        var w = 1000
        var h = 400
        var left = (screen.width/2)-(w/2);
        var top  = (screen.height/2)-(h/2);
        window.open ('somePage.asp?sID=32', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
        
    
        }
    };
    
    </script>
    
    
    <td align=center><input type=checkbox name=C1 value=ON></td>
    
    <script type="text/javascript">
    
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        
        if (targ.checked) {
        
        var w = 1000
        var h = 400
        var left = (screen.width/2)-(w/2);
        var top  = (screen.height/2)-(h/2);
        window.open ('somePage.asp?sID=7', '', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);        
        
    
        }
    };
    
    </script>

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viki1967 View Post
    I need that when change checkbox the first window popup close and open new window popup.
    Give the window a name, for example "details"

    Code javascript:
    window.open('somePage.html', 'details');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viki1967 View Post
    Hi my friend, I have problem.

    Any checkbox selected response always responds with the same sID...
    But sID is different from different checkbox...
    I see that you're adding on a lot more requirements than you first mentioned.

    If you had mentioned these requirements earlier, such as at the start, you would already have things working as required.

    Instead though, we are stumbling along while you push and prod things in previously unmentioned directions.

    Quote Originally Posted by viki1967 View Post
    This is somePage.asp:
    Code:
    SELECT * FROM tbl WHERE ID = 28
    The new requirement is to submit the checkbox to the new window.
    As the main window uses the post method, I will retain the same for the new window.

    By the way, you really should rename "somePage.html" to a more descriptive name, perhaps something like "details". I only use "somePage.html" to make this fact obvious to you.

    Your solution is to submit the form to the window after it has been opened.

    First, tell the form where you want to submit to. You have not said if the form posts using the "get" method or the "post" method, so I will presume that the standard "get" method is used to retrieve things.

    Code html4strict:
    <form method="get" action="somePage.php" target="details">

    Then when it's time to open the window, make it a blank window instead, and then tell the form to submit. The form will submit to the target that you have named.

    Code javascript:
    window.open('', 'details');
    targ.form.submit();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I dont understand... but not working:

    SELECT * FROM tbl WHERE ID =
    Microsoft OLE DB Provider for ODBC Drivers error '80040e14'

    [MySQL][ODBC 5.1 Driver][mysqld-5.0.45-community-nt]You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1
    Code:
    <script language="javascript" type="text/javascript">
    <!--
     
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                el.checked = false;
                updateRowColour(el);
            }
        }
    }
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        } else {
            input.checked = null;
        }
        input.parentNode.parentNode.className = checked;
    }
     
    //-->
        </script>
    
    <link type="text/css" rel="stylesheet" href="css/style.css">
    
    <div id="someList">
    <form method="get" action="somePage.php" target="details">
    
    <td align=center><input type=checkbox name=C1 value=ON></td>
    </div>
     
    <script type="text/javascript"> 
     
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        
        if (targ.checked) {  
        window.open('', 'details');
        targ.form.submit();
     
        }
    };
     
    </script>
    
    </form>

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I refer back to my previous statement.

    Quote Originally Posted by pmw57 View Post
    You have not said if the form posts using the "get" method or the "post" method, so I will presume that the standard "get" method is used to retrieve things.
    You have not stated whether your PHP code uses $_GET or $_POST to retrieve the checkbox value.

    If you are using $_GET (and you should when you are not making changes to the database) then you submit the form with:

    Code html4strict:
    <form method="get" action="somePage.php" target="details">

    If you are using $_POST to retrieve the checkbox value, then you use "post" instead, and submit the form with:

    Code html4strict:
    <form method="post" action="somePage.php" target="details">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing change... response with the same sID...

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by viki1967 View Post
    Nothing change... response with the same sID...
    You haven't yet shown us the form tag that you previously had success with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    You haven't yet shown us the form tag that you previously had success with.
    Code:
    <script language="javascript" type="text/javascript">
    <!--
    
    function uncheckAllExceptThis(input) {
        var table = input.parentNode,
            els,
            el,
            i;
        while (table.nodeName !== 'TABLE' && table.nodeName !== 'BODY') {
            table = table.parentNode;
        }
        if (table.nodeName === 'BODY') {
            return;
        }
        els = table.getElementsByTagName('input');
        for (i = 0; i < els.length; i += 1) {
            el = els[i];
            if (el.type === 'checkbox' && el !== input) {
                //console.log(el.checked);
                el.checked = false;
                updateRowColour(el);
            }
        }
    }
    function updateRowColour(input) {
        var checked = '';
        if (input.checked) {
            checked = 'checked';
        } else {
            input.checked = null;
        }
        input.parentNode.parentNode.className = checked;
    }
     
    //-->
        </script>
    
    
    <form method="post" action="somePage.php" target="details">
    
    <link type="text/css" rel="stylesheet" href="/css/style.css">
    <div id="someList">
    
    <td align=center><input type=checkbox name=C1 value=ON></td>
    
    </div>
     
    <script type="text/javascript"> 
     
    var list = document.getElementById('someList');
    list.onclick = function (evt) {
        evt = evt || window.event;
        var targ = evt.target || evt.srcElement;
        if (!(targ && targ.nodeName && targ.nodeName === 'INPUT' && targ.type === 'checkbox')) {
            return;
        }
        uncheckAllExceptThis(targ);
        updateRowColour(targ);
        
        if (targ.checked) {
           
        window.open('', 'details', 'location=no, directories=no, status=no, menubar=no, scrollbars=yes, toolbar=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        targ.form.submit();
     
        }
    };
     
    </script>
    
    ...
    
    
    </form>

  23. #23
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Is this the form line that worked?

    Code html4strict:
    <form method="post" action="somePage.php" target="details">

    If it's not, what did work before?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  24. #24
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Is this the form line that worked?

    Code html4strict:
    <form method="post" action="somePage.php" target="details">

    If it's not, what did work before?
    No, not working... I not understand...

    If I use GET method any checkbox selected response always with the same sID (28) But sID is different from different checkbox:
    Code:
    SELECT * FROM tbl WHERE ID = 28
    If I use POST method somePage.php response with all sID...
    Code:
    SELECT * FROM tbl WHERE ID = 28, 29, 30, 31, 32....

  25. #25
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    What does var_dump show you for $_GET and $_POST ?

    Code php:
    echo '<pre>', var_dump($_GET), '</pre>';
    echo '<pre>', var_dump($_POST), '</pre>';
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •