CODEWITHSUNDEEP
javascriptjquery
Nomis
Nomis

Reputation: 457

Issue with the way data is displayed in confirm box

I have a form with multiple text boxes where I can type a material name and in another box I can type the material price.

When the user clicks submit I am displaying a confirm box with the entered material(s) and price(s). In this confirm box I want to show all entered matr_name with the associated matr_price (one per line). I just can not seem to make it display as I want, the below script outputs like this:

matr_name
matr_price
matr_name
matr_price
etc.

I want it to display like this:
 matr_name: matr_price
matr_name: matr_price
matr_name: matr_price
etc.

All I got is the below script which gives me the correct output, just not displayed as I want it in the confirm box.

Script

var matr_name = $("input[name*='matr']").map(function() {
return $(this).val()}).get().join('\n');
var confirm_form = confirm("Rep:\n" + matr_name);
console.log("Mart.: " + matr_name);
if(confirm_form == true)
  {
return true;
  } 
else {
return false;
      }
    }

Part of the form:

    <tr>
            <td><input type="text" name="matr_name[]" id="matr_name" ></td>
            <td><input type="text" name="matr_price[]" id="matr_price"/></td>
        </tr>
        <tr>
            <td><input type="text" name="matr_name[]" id="matr_name" ></td>
            <td><input type="text" name="matr_price[]" id="matr_price"/></td>
        </tr>
        <tr>
            <td><input type="text" name="matr_name[]" id="matr_name" ></td>
            <td><input type="text" name="matr_price[]" id="matr_price"/></td>
        </tr>
        <tr>
            <td><input type="text" name="matr_name[]" id="matr_name" ></td>
            <td><input type="text" name="matr_price[]" id="matr_price"/></td>
        </tr>
<input type="submit" name="submit_name" id="submit_id" class="submit" value="Done" onclick="javascript:return show_confirm();"/>

Upvotes: 3

Views: 107

Answers (1)

Guffa
Guffa

Reputation: 700262

You can put different strings after the value depending on the name:

var matr_name = $("input[name*='matr']").map(function() {
  return $(this).val() + ($(this).attr('name') == 'matr_name[]' ? ': ' : '\n');
}).get().join('');

or:

var matr_name = $("input[name*='matr']").map(function() {
  if ($(this).attr('name') == 'matr_name[]') {
    return $(this).val() + ': ';
  } else {
    return $(this).val() + '\n';
  }
}).get().join('');

Upvotes: 3

Related Questions