Question

If I have a dynamic element like this: http://jsfiddle.net/kfm5b/2/

<select name="roomFac1" id="roomFac1">
  <option selected="selected">Any</option>
</select>
<input type="button" value="Add" class="pmbtn" id="addFac"/>
<input type="button" value="Remove" class="pmbtn" id="removeFac"/>

$(document).ready(function(){
    $('#addFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac'+n).attr('id', 'roomFac'+n);
        $obj.appendTo($('body'));
    });
    $('#removeFac').click(function(){
        var $objs = $('select[name*=roomFac]');
        if($objs.size() > 1){
           $objs.last().remove();
        }
    });
});

How would I fetch its output for use in an AJAX submission once the user clicks the submit button e.g.

$("#submit").click(function () {
...
...
var dataString = ....; // how I would I implement the dynamically created elements here s I don't know the size
...
...
$.ajax({
    type: "POST",
    url: "process.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#search_room').html(html);
    }
});

Secondly, what would I put in the PHP document handling the processing?

Answer 1

Considering you need to put values of all the selected elements in the dataString.

    $("#submit").click(function () {

    var dataString = "";

        $('select[name*=roomFac]').each(function(){
            dataString+=$(this).val();
            dataString+=",";
        });

        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString.substring(0, dataString.length - 1);,
            cache: false,
            success: function (html) {
                $('#search_room').html(html);
            }
        });
    });

On php side :

    $dataFromClient = $_POST['data'];
    $dataFromClient = explode(',',$dataFromClient);

//now $dataFromClient  will be an array that contains all the values.