how to handle html array elements in javascript and pass them to controller using ajax

Question

This is my code in view file in CodeIgniter

<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" id="edit">   

    <?php if(count($voucher_info) > 0 ){ ?>
            <tr class="bgcolor_02">

            <td width="27%" align="center"   class="admin" >S.no</td>
            <td width="37%" align="center"   class="admin" >Voucher Type</td>
            <td width="47%" align="center"   class="admin" >Voucher Mode</td>

            <!--  <td width="41%" align="center" class="narmal">&nbsp;<strong>Actions</strong></td>-->

            </tr>
            <?php 
                $rownum = 1;    
                foreach ($voucher_info as $eachrecord){
                    $zibracolor = ($rownum%2==0)?"even":"odd";
            ?>
                    <tr align="center"  class="narmal">
                    <td height="25"><?php echo $eachrecord->voucher_id ; ?><input type="hidden" name="voucher_id[]" value="<?php echo $eachrecord->voucher_id; ?>" /></td>
                    <td><input name="vouchertype[]" type="text" value="<?php echo $eachrecord->voucher_type; ?>" /></td>    
                    <td><select name="mode[]" >
                    <option value="paidin" <?php if($eachrecord->voucher_mode=='paidin') { ?> selected="selected" <?php } ?>>Paid In</option>
                    <option value="paidout" <?php if($eachrecord->voucher_mode=='paidout') { ?> selected="selected" <?php } ?>>Paid Out</option>
                    </select></td>                  
                    </tr>
            <?php   
                } 
        }                   
        else {
        echo "<tr class='bgcolor_02'>";
        echo "<td align='center'><strong>No records found</strong></td>";
        echo "</tr>";
        } 
    ?>

</table>

<input id="update" type="submit" name="submit" value="Edit"/>

I want to know how to I handle vouchertype[] and mode[] in JavaScript and pass them to controller using AJAX??

This is my javascript code

 <script>
    $("#edit").hide(); // Hide the edit table first

    $("#update").click(function() {
            $("#edit").toggle();
            $("#shown").toggle();
            // If we are going from edit table to shown table

            if($("#shown").is(":visible")) {

                var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get();
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get();

                // Then add it to the shown table
         var baseurl='<?php echo base_url()."index.php/account/insert_voucher";?>';

                    $.ajax({

                            type: "POST",
                            url: baseurl,
                            data: {'mode' : mode,'vouchertype':vouchertype} ,
                            cache: false,
                            success: function(html) {



                            }
                        });

                $(this).val("Edit");
            }
            else $(this).val("Update");
        });
</script>

Rohan Kumar · Accepted Answer · 2015-02-11 09:05:10Z

1

Pass it like,

var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get();
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get();
$.ajax({
   url:'your-controller-url',
   data:{vouchertype :vouchertype,mode:mode },
   ....
});

You can pass it by using serialize() like

$.ajax({
   url:'your-controller-url',
   data:$('#edit *').serialize(), // in this case all element would pass in controller
   ....
});

edited Feb 11, 2015 at 9:05

answered Feb 11, 2015 at 5:47

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rohan Kumar Over a year ago

Simply by using $this->input->post('Your element name');

Kedar B Over a year ago

Please see this link stackoverflow.com/questions/28447355/…" and this is the same question. please help me out with that

Rohan Kumar Over a year ago

In your account controller make a function insert_voucher and read mode like, function insert_voucher(){ $mode=$this->input->post('mode');...}

Rohan Kumar Over a year ago

Your other question linked with the same question. And if your table is toggled before ajax success callback then you should use your toggling code in ajax success callback. So that when you get the response then only your table would toggle

Kedar B Over a year ago

What changes should I make in above javascript code..I use toggle in ajax success..but now success coming before table gets editable..

Mehul Patel · Accepted Answer · 2015-02-11 05:52:00Z

0

If Voucher_type is an array you can not just echo it. do a urlencode(json_encode($Voucher_type)) and same for the mode also.

edited Feb 11, 2015 at 5:52

Mehul Patel

23.1k21 gold badges99 silver badges95 bronze badges

answered Feb 11, 2015 at 5:47

Pihu

12 bronze badges

Collectives™ on Stack Overflow

how to handle html array elements in javascript and pass them to controller using ajax

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related