jQuery Map To Retrieve Comma Separated Values Separately

Question

I am using multiple text box to insert data into database table. So doing few researches and used online resources to make it work. But stuck into one basic thing, I guess. The issue is with the jQuery mapping. Let me share the code here:

 //Add row to the table $('#btnAddRow').on('click', function() { var $clone = $('#tblQuesAns tbody tr:last').clone(); $clone.find('input').val('') $('#tblQuesAns tbody').append($clone); }); //Add more rows for option $('body').on('click', '.addOptions', function() { $(this).parent().append('<div><input class="txtOptions" type="text" /></div>'); }); //Get text box values $('#btnGetValues').on('click', function() { const allData = $('#tblQuesAns tbody tr').map(function() { const $row = $(this), question = $row.find('.txtQuestion').val(), options = $row.find('.txtOptions').map(function() { return this.value; }).get().join(" "); //return { question, options }; alert(question + ' ' + options.replace(/\s+/g, "_")); }).get(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button id="btnAddRow" type="button"> Add Row </button> <button id="btnGetValues" type="button"> Get Values </button> <table id="tblQuesAns" border="1"> <thead> <tr> <th>Question</th> <th>Options</th> </tr> </thead> <tbody> <tr> <td> <input class="txtQuestion" value="Capital of Englnad" /> </td> <td> <input class="txtOptions" value="London" /> <span class="addOptions">(+)</span> </td> </tr> <tr> <td> <input class="txtQuestion" value="Current Pandemic" /> </td> <td> <input class="txtOptions" value="Corona" /> <span class="addOptions">(+)</span> </td> </tr> </tbody> </table>

By default, jQuery map uses comma and I tried to remove those by using replace method as follows:

options.join(' ').replace(/\s+/g, "_")

Now I may have options that may contain comma. For example:

Question     Options
Question 1   New York
             Jakarta
             London, Paris
             Munich

So problem is, the values having space from text boxes also get replaced with the underscore sign replace(/\s+/g, "_") . So I get this output:

New_York_Jakarta_London,_Paris_Munich

But my expected output is this:

New York_Jakarta_London, Paris_Munich

I tried a different way that works but in this case all the text box values get concatenated:

var options = $("input[name*='txtOptions']");
var str = "";

$.each(options, function(i, item) {
  str += $(item).val();
});

The problem with the above is, when I've different questions say question 1, question 2, it'll merge all the options to both of them. Though I want specific options for both questions.

Answer 1

Something like this?

 //Add row to the table $('#btnAddRow').on('click', function() { var $clone = $('#tblQuesAns tbody tr:last').clone(); $clone.find('input').val('') $('#tblQuesAns tbody').append($clone); }); //Add more rows for option $('body').on('click', '.addOptions', function() { $(this).parent().append('<div><input class="txtOptions" type="text" /></div>'); }); //Get text box values $('#btnGetValues').on('click', function() { const allData = $('#tblQuesAns tbody tr').map(function() { const $row = $(this), question = $row.find('.txtQuestion').val(), options = $row.find('.txtOptions').map(function() { return this.value; }).get().join("_"); return {question,options} }).get() const x = allData.map(item => `${item.question}_${item.options}`).join(" ") console.log(x) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <button id="btnAddRow" type="button"> Add Row </button> <button id="btnGetValues" type="button"> Get Values </button> <table id="tblQuesAns" border="1"> <thead> <tr> <th>Question</th> <th>Options</th> </tr> </thead> <tbody> <tr> <td> <input class="txtQuestion" value="Capital of England" /> </td> <td> <input class="txtOptions" value="London" /> <span class="addOptions">(+)</span> </td> </tr> <tr> <td> <input class="txtQuestion" value="Current Pandemic" /> </td> <td> <input class="txtOptions" value="Corona" /> <span class="addOptions">(+)</span> </td> </tr> </tbody> </table>