Select multiple var in ajax

Question

I want to send multiple attributes of HTML element generated by php while loop by Ajax call.

For example:

<div id="chart" >
    $i=1;
    while($i<10){
       <input type="text" calss="item" id="$i" >   
       $i++;
    }
 </div>

Above code represent the part of the information which I want to send through ajax code as below. The input ids differ from pages representing different item. My question is how to select those ids to get val() inside input & declare them as variables at the same time so that i can pass these values through AJAX call. `

var main = function() {

$('.btn').click(function(){
var item1=$('#1').val();
var item2=$('#2').val();
var item3=$('#3').val();
var item4=$('#4').val();
var item5=$('#5').val();
var item6=$('#6').val();
var item7=$('#7').val();
var item8=$('#8').val();
var item9=$('#9').val();

 $.ajax({
    type:"POST",
    url: "something.php",
    cache:0,
    data:({
     "item1":item1,
     "item2":item2,
    "item3":item3,
   "item4":item4,
    "item5":item5,
    "item6":item6,
    "item7":item7,
    "item8":item8,
    "item9":item9,
    }),
    success:function(result){
    $('#chart').html(result);
    },
    complete:function(){
        alert('good!!');
    }   
     });
 });

 }
   $(document).ready(main);`

As your question is lil bit confusing but what you want is the value of your text box, please correct me if I'm wrong — Narendrasingh Sisodia, Mar 18 '15 at 06:09
quiz have lack of information, need more clear description.. — Shahzad Barkati, Mar 18 '15 at 06:09
I modified my question and sorry for that ambiguous information — EEEEEric, Mar 18 '15 at 06:18
Its seems you don't have values within your input, so how could you get values by `$('#1').val();` — Narendrasingh Sisodia, Mar 18 '15 at 06:24
well I wanna make people type in that input so I can get the information with val() — EEEEEric, Mar 18 '15 at 06:26

Edi G. · Accepted Answer · 2015-03-18T06:25:31.070

1

I'm not sure whether I get your question right, but shouldn't the following work?

select with jquery by ID

var myInputObject = $("#1");
alert(myInputObject.val());

$("#1") returns your field with the id 1

or select by class

var myInputObjects = $(".item");

$(".item") returns all field's with the attribute class=item

jQuery selectors API-Documentation

CREATE:

<div id="chart" />

<script type="text/javascript">
    for(var i = 1;i<10;i++){
        $('<input/>', {
           id: i,
           class: "item",
           type: "text"
        }).appendTo('#myFields');
    {
</script>

--> Creates 10 input elements and append it to <div id="chart" />

Create a post request:

var postData = $(this).serializeArray();
$.ajax({
    type:"POST",
    url: "something.php",
    cache:0,
    data : postData,
    success:function(data, textStatus, jqXHR)
    {
        //data: return data from server
    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        //if fails     
    }
});

-> sends your form as a POST request to something.php... there you can get your values by $_POST["1"]

edited Mar 18 '15 at 06:25

answered Mar 18 '15 at 06:06

Edi G.

2,432
7
24
33

Sorry for my poor expression. What I really trying to say is that I use a loop to generate each id and dont know how to declare them one by one in an single AJAX call – EEEEEric Mar 18 '15 at 06:09
thx for replying so fast!!. I just modified my original question which is a little bit different but I still appreciate your answer – EEEEEric Mar 18 '15 at 06:23
ahh.. :) now i know what do you want to do :) ->updatet – Edi G. Mar 18 '15 at 06:26
so what's within $_POST will be a serialize array, then how do I classify them after ajax. Can I get the text of id =1 of an input by $_POST['1']?? – EEEEEric Mar 18 '15 at 06:41

score 0 · Answer 2 · edited May 23 '17 at 12:03

I used a method here How to get an Array with jQuery, multiple <input> with the same name to solve my problem in the end

       var main=function(){
      $('.btn').click(function(){
       var items-name = $('input[class="item"]').map(function(){
            return $(this).val();
            }).get();
       var items-id=$('input[class="item"]').map(function(){
            return $(this).attr('id');
        }).get();

        $.ajax({
        type:"POST",
        url: "something.php",
        cache:0,
        data:({
         "name":items-name,
         "id":items-id                  
        }),
         success:function(){
        alert('done');
        }
       });
        });
         }
        $(document).ready(main);

Select multiple var in ajax

2 Answers2