Question

I am trying to grab the values of an array from html using jQuery and then pass this over to a PHP script. I have tried many variations that I have found on this site, however none have been successful.

This is what I have so far. (I am using jQuery to generate the textareas depending on the required amount, up to a max of 10).

<form>
<input type='text' value='Title', name='title' id='title' /><br>
<h2 class="achievements" id="subheading">Required Amount</h2><br><br><br>
<select id="selection">
<option value='0'>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
<div class="achievements" id="board"></div>
</form>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#selection').change(function() {
    var required = parseInt($(this).val());
    var i = 0;
    var str1 = "<h2 id=\"subheading\">Requirements</h2><br><br><br>";

    for( i = 0; i < required; i++) {
                str1 += "<br><br><label></label><textarea name='requirement["+ i +"]' class=\"requirements\" rows='2' cols='40'></textarea>";
            }
    str1 += "<br><input type='button' class='button' onclick=\"button('achievements/create_achievement');\" value='Add Achievement'/>";
    $('#board').html(str1); 
});
return false;
});
</script>

The jQuery script that grabs the data is:

function button(uri) {
var url = "http://www.blahblah.com/" + uri;
    var requirements = [];
    /**
      * solution below found on SO does not work as thought
      */
    /////////////////////////////////////////////////////////////////////////
    requirements = $('textarea[name^="requirement\\[\\]"]').map(function() {
    return $(this).val();
    }).get();
    //////////////////////////////////////////////////////////////////////// 
    $.ajax({
    url: url,
    data: {id:requirements},
    type: "POST",
    success: function(data) {
        $('#main-board').html(data);
    }
    });
return false;
} 

My issue is that when checking for the array of data using alert(requirements) nothing is found. I assume this is because the data from the html is not being parsed correctly using the jQuery statement I have used. Any assistance would be great. Thanks

Answer 1

Your selector for the textareas are wrong, because the names of the textarea have a decimal in the brackets; also see the jquery selectors page for ^=:

Description: Selects elements that have the specified attribute with a value beginning exactly with a given string.

Replace

$('textarea[name^="requirement\\[\\]"]')

with

$('textarea[name^="requirement\\["]')

You don’t have to change anymore.

Also see this exmaple.