CODEWITHSUNDEEP
javascriptjquery
The Professor and the Madman
The Professor and the Madman

Reputation: 199

Get multiple value from input field and append them into new row

I have an input which contains multiple value in and separated with comma, and when button clicked i tried to get value of input and replace comma with empty space and append each one of value into new row <tr>:

function PostForm() {

  var getVal = $("#Kundenummer").val().replace(/,/g, ''); //11548 10883

  $('#tablebody').append('<tr><td>' + getVal + '</td></tr>')

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table id="tablebody"></table>

But after getting value of input and append them into table , it will put both value together in one row

<table id="tablebody">
  <tbody id="output">
    <tr>
      <td>11548 10883</td>
    </tr>
  </tbody>
</table>

And the Output i looking for:

<table id="tablebody">
  <tbody id="output">
    <tr>
      <td>11548</td>
    </tr>
    <tr>
      <td>10883</td>
    </tr>
  </tbody>
</table>

Can anyone please help me !

Upvotes: 0

Views: 74

Answers (5)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

you are replacing comma with space which will return you the string only, instead you can split string with comma which will return you the array of string and iterate the result to create table

    function PostForm() {
    
    var getVal = $("#Kundenummer").val().split(',');
    
    for(var i=0; i<getVal.length; i++) {
        var val = getVal[i];
        val = val.trim();
        if(val!='') {
          $('#tablebody').append('<tr><td>' + getVal[i] + '</td></tr>');
        }
    }  
    
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table border='1'>
 <tbody id="tablebody">
 </tbody>
</table>

Upvotes: 1

4b0
4b0

Reputation: 22323

Use split and loop to bind data on tbody like below.

var getVal = '11548 10883';
var result = getVal.split(' ');
var html = '';
$.each(result, function(index, value) {
  html += '<tr><td>' + value + '</td></tr>';
});
$('#tablebody').append(html);
table, th, td {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablebody">
  <tbody id="output">

  </tbody>
</table>

Upvotes: 1

JoshG
JoshG

Reputation: 6735

First, use split to convert your string to an array:

var getVal = $("#Kundenummer").val().replace(/,/g, '').split(" ");

Then, loop over the elements in the array and append a row and column:

getVal.forEach((e) => $("#tablebody").append(${e}));

Full snippet:

function PostForm() {
  var getVal = $("#Kundenummer").val().replace(/,/g, '').split(" "); //11548 10883
  getVal.forEach((e) => $("#tablebody").append(`<tr><td>${e}</tr></td>`));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table id="tablebody">
  <tbody id="output">

  </tbody>
</table>

Upvotes: 2

Shubham Baranwal
Shubham Baranwal

Reputation: 2498

You have to split your input value string to form an array and after that iterate over that array you can add a row for your table. Please see below working code-

function PostForm() {

  $('#tablebody').html('');
  
  var getVal = $("#Kundenummer").val().split(','); //11548 10883

  getVal.forEach(function(val){
    $('#tablebody').append('<tr><td>' + val + '</td></tr>');
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883,">
<button onclick="PostForm();" type="button">Save</button>
<table id="tablebody"></table>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

To achieve this more effectively you need to split() the value in to an array by the , character. Then you can iterate over the array and build a new table row for each value, before appending the content to the table.

Also note that on* attributes are outdated and should be avoided where possible. Use unobtrusive event handlers instead. As you've already loaded jQuery in the page, you can use on(), like this:

$(function() {
  $('button').on('click', function() {
    var values = $("#Kundenummer").val().split(',');
    var html = values.map(function(value) {
      return `<tr><td>${value}</td></tr>`;
    });
    $('#tablebody').append(html);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Kundenummer" id="Kundenummer" value="11548, 10883">
<button type="button">Save</button>

<table>
  <tbody id="tablebody"></tbody>
</table>

Upvotes: 1

Related Questions