Dynamic .ajax() data variables with PHP

Question

I have a button which appends a drop down menu to the site, and within the drop down value attribute are numbers. I'm using an ajax function to run a math equation using the values from the drop down.. this is my code:

var data1 = $('#data1').val();
var data2 = $('#data2').val();
var data3 = $('#data3').val();


$.ajax({
  type: 'GET',
  url: 'ajaxcalc.php',
  data: {
    data1: data1,
    data2: data2,
    data3: data3
   },
  dataType: 'json',
  cache: false,
  success: function(data) { alert('yay!'); })
   });
  },
 });

//show dropdowns code
$('#data1').click(function() {
var $d = $('<select name="data1" id="data1"><option selected="selected" value="null">Choose your data!</option><option value="5">Option 1</option><option value="1">Option 2</option><option value="14">Option 3</option></select><br/>').fadeIn().delay(1000);
$('.data1').append($d);
});

//html button code for append data1 drop down
<button id="data1">Add Dropdown</button>

My problem comes in when people append 2 of the same drop downs with the same id and I can't retrieve both variables... It only gets the first drop down value!

in my ajaxcalc.php file I have this to retrieve variables:

$data1 = $_GET['data1'];
$data2 = $_GET['data2'];

I'm trying to allow someone to append the data1 drop down twice and pick 2 different values but still pass those values to my ajaxcalc.php file through the .ajax() function! does anyone know how I can accomplish this?

So don't create elements with the same ids. It is just wrong — zerkms
– zerkms, Commented Aug 3, 2012 at 2:32
well I have an append function that spits out the same dropdown with the same id... — tcd
– tcd, Commented Aug 3, 2012 at 2:34
so? Elements SHOULDN'T have the same id. This is what DOM requires — zerkms
– zerkms, Commented Aug 3, 2012 at 2:35

Tim Banks · Accepted Answer · 2012-08-03 02:54:46Z

1

In your case you don't have an id of "data2" or "data3". You keep appending "data1". When appending the dropdown, you need to increment the number with the id.

//show dropdowns code
var dropdownCount = 1;
$('#data1').click(function() {
    var $d = $('<select name="data' + dropdownCount + '" id="' + dropdownCount + '"><option selected="selected"          value="null">Choose your data!</option><option value="5">Option 1</option><option value="1">Option 2</option><option value="14">Option 3</option></select><br/>').fadeIn().delay(1000);
    $('.data1').append($d);
});

Try using that code in place of your dropdown code.

EDIT

A better solution would be to use a class instead of ids. If each dropdown had a class you could select them all (no matter how many were added) and loop through them to get values.

var dropdowns = $(".dropdowns");
//Loop through them to get values and pass them to your ajax call

EDIT2

Here is a fiddle I through together showing how you can add multiple dropdowns and pass an array back to your PHP page rather than individual variables.

http://jsfiddle.net/JtUuN/

edited Aug 3, 2012 at 2:54

answered Aug 3, 2012 at 2:36

Tim Banks

7,1895 gold badges33 silver badges28 bronze badges

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

2 Comments

tcd Over a year ago

but i need someone to be able to select options anywhere from 1-99 drop downs, i was actually asking if there is a way to dynamically update jQuery variables and data within the .ajax() function

Tim Banks Over a year ago

That's what my edit explains. Don't use ids on your dropdowns. Use a class instead. That way it doesn't matter how many dropdowns are created, you can select them all with a class selector.

Collectives™ on Stack Overflow

Dynamic .ajax() data variables with PHP

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related