javascript - Issue passing back dynamic string array -

i have form inside modal popup, user can enter text in text box , click plus button dynamically adds text have typed in div can proceed add one.

 <div class="form-group">     <label class="control-label col-sm-4" for="prefix">        cast <span style="color:red">*</span>     </label>     <div class="col-sm-5">       <input type="text" class="form-control col-sm-5" id="cast" />     </div>     <div class="col-sm-1">       <button type="button" id="btnnewcast" class="btn btn-default">+</button>     </div> </div> <div class="form-group">   <label class="control-label col-sm-4" for="prefix"></label>    <div class="col-sm-6" id="newcast">     </div> </div> 

as shown here:

the newcast display entered value jquery.

when click btnnewcast following script called

  $("#btnnewcast").click(function () {             $("#newcast").append("<span class='label label-success label-as-badge custom-line-height' id='cast[]'><i class='glyphicon glyphicon-tag'></i> "+ $("#cast").val() + "</span><br/>");              $("#cast").val('');         }); 

which looks this:

the html follows:

<span id="cast[]" class="label label-success label-as-badge custom-line-height"> <i class="glyphicon glyphicon-tag"></i>      appear here     </span> 

when press submit on on form pass values shown here:

 $("#btnaddmovie").click(function() {                  $.ajax({                     url: '/movies/add',                     //data: $('newmovie').serialize(),                     data: { "title": $("#title").val(), "classification": $("#classification").val(), "rating": $("#rating").val(), "releasedate": $("#releasedate").val(), "cast": $("#cast").val() },                     cache: false,                     type: "post",                     success: function (result) {                         if (result.success) {                          }                     },                     error: function (result) {                         alert("error");                     }                 });         }); 

which mapped model, , working correctly.

controller:

    [httppost]     public actionresult add(movie model)     {           return view();     } 

my model declared this:

public int movieid { get; set; } public int rating { get; set; } public int releasedate { get; set; } public string title { get; set; } public string classification { get; set; } public string genre { get; set; } public string[] cast { get; set; } 

the issue have can see cast string array, items user enters (which shown in pictures) i'm trying map them cast string array when post.

i have tried

"cast": $("#cast[]").val() 

but jquery error when posting, unrecognized expression

i can't map correctly..

** update** complete post method

$("#btnaddmovie").click(function () {              var stringarr = $('span[data-id="cast[]"]').map(function() {                 return $(this).text().trim();             });              $.ajax({                 url: '/movies/add',                 //data: $('newmovie').serialize(),                 data: { "title": $("#title").val(), "classification": $("#classification").val(), "rating": $("#rating").val(), "releasedate": $("#releasedate").val(), "cast": stringarr },                 cache: false,                 type: "post",                 success: function (result) {                     if (result.success) {                      }                 },                 error: function (result) {                     alert("error");                 }             });           }); 

few issues :

1. <span> not have .val() (value), use text().

2. the error

   unrecognized expression

   is because : [] - special chars not allowed in plain #.. selectors. use [id=""]

3. so use map() iterate on this.

---

var stringarr = $('span[id="cast[]"').map(function(){     return $(this).text().trim(); }); 

also, way creating span through jquery, id = cast[] getting duplicated, , duplicated ids invalid markup. use class attribute or data-* attributes data-id="cast[]. code :

var stringarr = $('span[data-id="cast[]"').map(function(){     return $(this).text().trim(); }); 

demo -