JavaScript Forum

**empiresolutions** · 06-21-2007, 07:57 PM

im using the script.aculo.us drag n drop script. i am having an issue getting a checkbox to POST its value if checked, once the row the checkbox is in is moved. I believe that once i change the position of a checkbox, it is no longer considered a child of the parent form. How can i get it back to being part of the original parent form?

Another way of saying is... If i have 10 rows with checkbox's in each row, i check rows 1,2,3,4, then move row 1 to the 3 position (2,3,1,4), then submit, the returning POST array only has 2,3,4. How do i get 1 to be in the array as well?

Interface Script

Code:

<?php /*   needed for IE   */ ?>
<div id="page">
    <div id="sale_row" class="section">
        <div id="item_1" class="lineitem" style="cursor: move;">example 1 <input type="checkbox" name="check_value[]" value="example1"></div>
        <div id="item_2" class="lineitem" style="cursor: move;">example 2 <input type="checkbox" name="check_value[]" value="example2"></div>
    </div>
</div>

<?php /*   set JS outside *page* div   */ ?>
<script type="text/javascript">
    // <![CDATA[
    sections = ['sale_row'];

    <?php /*   this watches for event changes like drag and drop action   */ ?>
    Event.observe(window,'load',init,false);
    function init() {

        <?php /*   add a sortable.create for each group level div   */ ?>
        Sortable.create('sale_row',{tag:'div', dropOnEmpty:true, containment:sections, only:'lineitem', onUpdate:updateData});
    }

    Sortable.create('page',{tag:'div',only:'section',handle:'handle'});
    // ]]>
</script>

*Javasript* that formats and sends url to ajax db update page. When chekbox vars "params" are sent this works perfectly.

Code:

function updateData() {
    var params = '';
    var sections = document.getElementsByClassName('section');
    sections.each(function(section) {
        params = Sortable.serialize(section.id);
        var ajax = new Ajax.Request(page_url,{
            method: 'post',
            parameters: params
        });
    });
}