posting array of text fields using jquery and ajax

Question

i dont want to use serialize() function please help me with this. I am a beginner

html

        <input type='button' value='Add Tier Flavor' id='Add'>
        <input type='button' value='Remove Tier Flavor' id='Remove'>

        <div id='batch'>
            <div id="BatchDiv1">
                <h4>Batch #1 :</h4>
                <label>Flavor<input class="textbox" type='text' id="fl1" name="fl[]" value=""/></label></br>
                <label>Filling<input class="textbox" type='text' id="fi1" name="fi[]" value="" /></label></br>
                <label>Frosting<input class="textbox" type='text' id="fr1" name="fr[]" value=""/></label></br>

            </div>
        </div>
        <br>

    </div>

this is a dynamically added fields using javascript the code is:

javascript

  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

    var counter = 2;

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

        if(counter>5){
            alert("Only 5 Tiers allow");
            return false;
        }
        var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter);
        newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' +
            '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+
            '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+
            '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' );

        newBatchBoxDiv.appendTo("#batch");

        counter++;
    });

    $("#Remove").click(function () {
        if(counter==1){
            alert("No more tier to remove");
            return false;
        }
        counter--;

        $("#BatchDiv" + counter).remove();
    });



});
 </script>

i am trying to post the values in an array to post it onto next .php page

i am using this

        var user_cupfl =  $('input[name^="fl"]').serialize();
        var user_cupfi =  $('input[name^="fi"]').serialize();
        var user_cupfr = $('input[name^="fr"]').serialize();

serialize is not passing the values. :(

on second page i am trying to mail it using

   $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("\n", $user_cupfl). "</pre></td></tr>";
            $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfi). "</pre></td></tr>";
            $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("\n", $user_cupfr). "</pre></td></tr>";

i m posting array like this

  $user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING);

$user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING);
$user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING);

your replies will be highly appreciated

Please post your full submit/ajax code.

BReal14
– BReal14

2014-08-20 15:52:30 +00:00
Commented Aug 20, 2014 at 15:52 — BReal14
– BReal14, Commented Aug 20, 2014 at 15:52
jsfiddle.net/35e2j4fb here is a fiddle

tabia
– tabia

2014-08-20 16:12:10 +00:00
Commented Aug 20, 2014 at 16:12 — tabia
– tabia, Commented Aug 20, 2014 at 16:12

Mike Brant · Accepted Answer · 2014-08-20 16:36:03Z

1

Just because you name a variable user_* doesn't mean that is what the name of the field is in the serialized POST data. You would still be looking for $_POST['fl'], $_POST['fi'] etc.

I don't understand why you think you need to serialize sets of input groups individually. You should just serialize the whole form at once.

I also see no reason why you need to have all this logic around unique id's with the counter and what not. If you are not using id's at all, just drop them altogether.

You might also consider simply using clone techniques to generate your dynamically added fields. You could greatly simplify all that javascript code by doing these things.

A more reasonable implementation may look like this.

HTML (cleaning up your code - consistent use of double quotes around properties, better strategy for class and id usage, etc.)

<div id="batch">
    <div class="batchDiv">
        <h4 class="batchLabel">Batch #1 :</h4>
        <label>Flavor</label>
        <input class="textbox" type="text" name="fl[]" value=""/>
        </br>
        <label>Filling</label>
        <input class="textbox" type="text" name="fi[]" value="" />
        </br>
        <label>Frosting</label>
        <input class="textbox" type="text" name="fr[]" value=""/>
        </br>
    </div>
</div>

Javascript:

$(document).ready(function() {
    $('#Add').click(function(){
        var $existingBatches = $('.batchDiv');
        var count = $existingBatches.size();
        if (count < 5) {
            // get last batch div
            var $newBatch = $existingBatches.last().clone();
            // reset input values to empty string
            $newBatch.find('input').val('');
            // change batch label
            count++;
            $newBatch.find('.batchLabel').html('Batch #' + count + ' :');
            // append to document
            $newBatch.appendTo('#batch');
        } else {
            // alert or whatever
        }
    });

    $('#Remove').click(function(){
        var $existingBatches = $('.batchDiv');
        var count = $existingBatches.size();
        // delete last batch item if more than 1 exists
        if(count > 1) {
            $existingBatches.last().remove();
        } else {
            // alert or whatever
        }
    });
});

Now you haven't shown your AJAX code, but all you would need to do is something like:

var url = '/some/url';
var postData = $('[some form selector]').serialize();
var dataType = '...'; //whatever dataType you are expecting back
$.post(url, postData, function(){
    // success handler
}, dataType));

Your data when then be available in PHP script at $_POST['fl'], etc.

edited Aug 20, 2014 at 16:36

answered Aug 20, 2014 at 15:53

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

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

7 Comments

tabia Over a year ago

Sir i am going to send this form values via email.

Mike Brant Over a year ago

@tabia What does that matter?

tabia Over a year ago

one more thing if i am not taking your time kindly please help me in getting the array values of these text fields. i want fl within flavor array fi in filling array and fr in frosting array

Mike Brant Over a year ago

@tabia They will be be in an arrays within $_POST as $_POST['fl'], $_POST['fi'], etc. Do a var_dump($_POST) and take a look.

tabia Over a year ago

Sir it it not returning me the values.

|

Collectives™ on Stack Overflow

posting array of text fields using jquery and ajax

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