How can i pass same append element data as an array to the controller with jquery

Question

Jquery

$(document).ready(function(){
$('#addmatches').click(function(e){
    var count=$('#countmatches').val();
    var test = "<?php echo form_error('match_teamone');?>";

    if (count==0){
        $('.count #noofmatches').addClass('has-error');
        $('.count .erroraddmatch').show();
        $('.count .erroraddmatch').text('The field is required');
        e.preventDefault();
    }
    else{

        for (i=1;i<=count; i++){

            $('#panel_body').append('<div class="panel panel-default" id="match_panel">'+
                    '<div class="panel-heading headingchange">'+
                        '<h3 class="panel-title">'+i+'. Match</h3>'+
                    '</div>'+
                    '<div class="panel-body">'+
                        '<div class="col-md-5 match_teamone">'+
                            '<select name="match_teamone" class="form-control first_select" id="match-teamone"></select>'+

                        '</div>'+
                    '<div class="col-md-2">'+
                        '<label>VS</label>'+
                    '</div>'+
                    '<div class="col-md-5 match_teamtwo">'+
                        '<select name="match_teamtwo" class="form-control second_select" id="match-teamtwo"></select>'+

                    '</div>'+
                    '<br><hr>'+
                    '<div class="col-md-5 match_ground">'+
                        '<select name="match_ground" class="form-control" id="match-ground">'+
                            '<option value="">--- Select Ground ---</option>'+
                            '<option value="tribhuwan">Tribhuwan University Ground</option>'+
                            '<option value="2016">Mulpani Internation Ground</option>'+
                            '<option value="2017">Pulchok Engineering Ground</option>'+
                            '<option value="2018">Bhaktapur Ground</option>'+
                        '</select>'+
                    '</div>'+
                    '<div class="col-md-2 match_time">'+
                        '<select name="match_time" class="form-control" id="match-time">'+
                            '<option value="">Time</option>'+
                            '<option value="2015">00:00 AM</option>'+
                            '<option value="2016">00:15 AM</option>'+
                            '<option value="2016">00:30 AM</option>'+
                            '<option value="2016">00:45 AM</option>'+
                            '<option value="2016">01:00 AM</option>'+
                        '</select>'+
                    '</div>'+
                    '<div class="col-md-5 match_umpire">'+
                        '<select name="match_umpire" class="form-control" id="match-umpire">'+
                            '<option value="">--- Select Umpire ---</option>'+
                            '<option value="2015">Mohammad Ashqiue Ali</option> '+
                            '<option value="2016">Nischal Tiwari</option>'+
                            '<option value="2017">Razesh KC</option>'+
                            '<option value="2018">Raazan Bhattarai</option>'+
                        '</select>'+
                    '</div>'+
                '</div>'+
            '</div>');

            $('.count #countmatches').attr('disabled','disabled');
            $('#addmatches').attr('disabled','disabled');   
            $('#match-tournament').removeAttr('disabled');
            $('.count #noofmatches').removeClass('has-error');
            $('.count .erroraddmatch').hide();
            e.preventDefault();

        }           
    }
});

});

The append is working fine and while i my form submit code is :

$(document).ready(function() {
$('#match').validate({

    rules:{

        match_tournament: {
            required:true
        },
        match_teamone:{
            required:true
        },
        match_teamtwo:{
            required:true
        },
        match_ground:{
            required:true
        },
        match_time:{
            required:true
        },
        match_umpire:{
            required:true
        },
    },

    messages: {
                match_teamone: "Team One should be selected",
                match_teamtwo: "Team Two should be selected.",
                match_ground:"Ground should be selected.",
                match_time:"Time should be selected.",
                match_umpire:"Umpire should be selected.",
            },

     submitHandler: function() {

            var data = $('#match').serializeArray();

                $.ajax({
                    url: 'matches/addMatches',
                    data:$.param(data),
                    success: function(return_data) {
                         alert(return_data);
                    }
                });

            }
});

});

My problem is that when i append two panel-body then only last values of panel-body is passed through the jquery but i need both append values to the database.

I changed my name of the appended field with [i] but it make more complex because it create each field an array rather i need all data as in a single array.

Only one appended data is passing to the database i know i am lacking here with array but i am stuck for using array while sending through jquery and load it on to the controller.

Any help will be appreciated . Thank You

ID must be unique. Change to class definition for multiple element that share the same name. Then find all values and store inside array object to send data — Norlihazmey Ghazali
– Norlihazmey Ghazali, Commented Aug 20, 2015 at 7:36
Change your first line of append and add i to it -> .append('<div class="panel panel-default" id="match_panel_'+i+'">' — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 20, 2015 at 7:37
@guruprasad: if i add i on the begging what that it happens ?? — Mohmmad Ali
– Mohmmad Ali, Commented Aug 20, 2015 at 7:47

Norlihazmey Ghazali · Accepted Answer · 2015-08-20 09:41:56Z

1

Try change this :

$('#panel_body')

into this :

$('.panel_body')

then inside submitHandler: function() block put this :

var arrayValue = [];

$(".panel_body").each(function () {
  var obj = {};
  $(this).find(':input').each(function(){
    obj[$(this).attr('name')] = $(this).val();
  });      
  arrayValue.push(obj);  
});

// arrayValue suppose to be like this :
// [
//   { match_teamone : "some value", match_teamtwo : "some value",...},
//   { match_teamone : "some value", match_teamtwo : "some value",...},
//   ...
// ]  

$.ajax({
   url: 'matches/addMatches',
   type : 'POST',
   data:{
    myData : arrayValue
   },
   success: function(return_data) {
         alert(return_data);
   }
});

Then inside controller just treat myData as like array.

DEMO

edited Aug 20, 2015 at 9:41

answered Aug 20, 2015 at 8:22

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

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

7 Comments

Mohmmad Ali Over a year ago

Thanx let me try once this

Norlihazmey Ghazali Over a year ago

If $(".panel_body") did't work, change into $(".panel-body") instead. This line of code to iterate over parent body first before searching for form input. Seems like using $(".panel-body") is more accurate. It would be nice if you can share HTML snippet.

Norlihazmey Ghazali Over a year ago

@MohmmadAli : see demo attached, and browse for console if you're using chrome.

Norlihazmey Ghazali Over a year ago

From the demo page you meant?

Norlihazmey Ghazali Over a year ago

did't get it, where you put console.log, and there is something wrong with parent selector. Can you share HTML snippet, then easy for me to see the whole pictures what we are working on.

|

Collectives™ on Stack Overflow

How can i pass same append element data as an array to the controller with jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related