Jquery .serializeArray() not getting selected text with value-CodePudding

My main issue is that I have to send data using serialize with id and serializeArray with selected text. I need both information selected value and selected text in 2 serialization, serialize() and serializeArray() respectively. Not changing much code in the blade.

<form id="updateUser">
    <label for="name">Name</label> 
    <input type="text" id="name" name="name" placeholder="First and last name" tabindex="1" />

    <label>Agent Name</label> 
        <select name="user_id" id="user_id" >
          @foreach ($users as $user)
                <option value="{{ $user->id }}">{{ ucwords($user->name)}}</option>
           @endforeach
         </select>

    <input name="submit" type="submit" id="submit" tabindex="6" value="Send Message"/>

</form>

I then use jQuery to send AJAX request, serializing the form and save the data, then in response.success I send serializeArray to another function in js file.

$.easyAjax({
            url: url,
            container: '#updateUser',
            type: "POST",
            buttonSelector: $(this),
            data: $('#updateUser').serialize(),

            success: function (response) {
                if(response.status == 'success'){
                  var form_data= $('#updateUser').serializeArray();
                    track("user store",form_data);
                 }
           });

this is the data in form_data when serializeArray

0:{name: 'name', value: 'abc'}
1:{name: 'user_id', value: '23'}

I tried this but how to send selected text of dropdown with value.

if(response.status == 'success'){
    var agent_name = $("#user_id option:selected").text(); 
    var form_data= $('#updateUser').serializeArray();
    track("user store",form_data);
}

CodePudding user response：

Found a solution.

$.easyAjax({
            url: url,
            container: '#updateUser',
            type: "POST",
            buttonSelector: $(this),
            data: $('#updateUser').serialize(),

            success: function (response) {
                if(response.status == 'success'){
                  var form_data= $('#updateUser').serializeArray();
                  var form_data_obj = {};
             $.map(form_data, function(n, i){
            form_data_obj[n['name']]= n['value'];
            if(n['name'].includes("_id")){ 
            var id_value= $.trim($("#" n['name'] " option:selected").text());
            var id_name= n['name'].substr(0, n['name'].indexOf("_id"));
            id_name=id_name "_name";
            form_data_obj[id_name]=id_value;
            }
        })      
        }
      });