Pass Multiple values via AJAX

Question

I am stuck in passing the multiple value through AJAX call in Codeigniter.

My View is :

<script>
$( document ).ready(function() {

    var current_id = 0;
 $('#btn').click(function(){
     nextElement($('#Outer_00'));
 })

 function nextElement(element){
     var newElement = element.clone()
     .find("input:text").val("").end();

     var id = current_id+1;
     current_id = id;
     if(id <10)id = "0"+id;

     $('input', newElement).attr("id", id );
     newElement.appendTo($("#elements"));
            if($('#elements').find('div').length=='5')
    {
    $('#btn').prop('disabled',true);
    }
 }


$('#exercises').on('click', '.remove', function() {
if($('#elements').find('div').length<'6')
{

$('#btn').prop('disabled',false);
}
  if($('#elements').find('div').length=='1')
{
    $('.remove').addAttr("disabled",true);
}

$(this).parent().remove();

return false; //prevent form submission
});
});
</script>

/******************************

<script>
var  base_url = '<?=base_url()?>';
$(document).ready(function()
    {
        $('#Edit').click(function()
        {
            $('#Name').removeAttr("disabled");


    });

    $('#Add').click(function()
    {
        $('#Name').attr("disabled","disabled");
        $('#Phone').attr("disabled","disabled");
        $('#email').attr("disabled","disabled");
        $('#CurrentlyLocated').attr("disabled","disabled");
        $('#KeySkills').attr("disabled","disabled");
        //var queryString = $('#form1').serialize();



                $.ajax({
                    url: '<?php echo site_url('PutArtistProfile_c/formDataSubmit');?>',
                  type : 'POST', //the way you want to send datas to your URL
                  data: {Name:$("#Name").val(), Phone: $("#Phone").val(), email: $("#email").val(),
                         birthday: $("#birthday").val(), bornIn: $("#bornIn").val(),
                         CurrentlyLocated: $("#CurrentlyLocated").val(), KeySkills: $("#KeySkills").val(),
                         Audio1: $("#00").val(), Audio2: $("#01").val(), Audio3: $("#02").val(),Audio4: $("#03").val(), Audio5: $("#04").val(),
                         },                     
                  success : function(data)
                  { //probably this request will return anything, it'll be put in var "data"
                    $('body').html(data);                   

                  }
               });  

    });
    });
</script>

<p>

<div id="elements">
<div id="Outer_00">
Audio:  <input type="text" id="00" value="">
<input type="button" class="remove" value="x"></button>

</div>
</div>

<div id="count"></div>
<input type="button" id="btn" value="Add Audio"></button>
</p>

My Controller is :

public function formDataSubmit()
{

    $queryAudio1 = $this->input->post('Audio1');
            $queryAudio2 = $this->input->post('Audio2');
            $queryAudio3 = $this->input->post('Audio3');
            $queryAudio4 = $this->input->post('Audio4');
            $queryAudio5 = $this->input->post('Audio5');

}

How can I pass Multiple Values of text box? The above code is passing the values to the controller. But on clicking 'x' Button the value of text box is been getting deleted, but the id of the textbox is getting Incremented, Thus I am not able to pass the further values of textbox to controller via AJAX. Please help me over here.

Answer 1

IT is very simple:

Consider you want to pass: user name, surname, and country. These are three input boxes then:

using Jquery do so:

Javascript side

$.post("url",{name:name,surname:surname,country:country},
function(data){
  console.log("Query success");
});

In your Model or controller where your Query will be handled

$name=$this->input->post("name");
$surname=$this->input->post("surname");
$country=$this->input->post("country");

in your case just pass parameters that YOU need. I use codignitter and this method works fine!

Answer 2

If you have a remove button then getting the value by id may result in a js error, Why don't you make use of html element array:

<div id="elements">
<div id="Outer_00">
Audio:  <input type="text" name="audio[]" value="">
<input type="button" class="remove" value="x"></button>
</div>
</div>

Answer 3

instead of doing :

 data: {Name:$("#Name").val(), Phone: $("#Phone").val(), email: $("#email").val(),
                             birthday: $("#birthday").val(), bornIn: $("#bornIn").val(),
                             CurrentlyLocated: $("#CurrentlyLocated").val(), KeySkills: $("#KeySkills").val(),
                             Audio1: $("#00").val(), Audio2: $("#01").val(), Audio3: $("#02").val(),Audio4: $("#03").val(), Audio5: $("#04").val(),
                             }, 

You can do as

data:$("#Form_id").serialize(); // all form data will be passed to controller as Post data.