Preview form field input array before submit

Rodel Barbin

Hi Sir, Mam,

I would like to ask how can I preview the form fields like input text array, i.e text_name[] using jquery Dialog or any other

javascript function?. I used the code below AND IT ONLY DISPLAYS THE last record in array. I want to preview the data of a forms before submit to store records in database.

    for (var count = 0; count < input_array.length; count++) {
       var action_no = input_array[count];
       var text_section1_target1_tab1 = '' +
                    '' +
                        '' +
                            'No.' +
                            'A' +
                            'B' +
                            'C' +
                            'D' +
                            'REMARKS' +
                        '' +
                    '' +
                    '' +
                   '' +
                       '' + action_no.value + '' +
                       'Action1' +
                       '1' +
                       '1' +
                       'D' +
                       'OK' +
                   '' +
                    '' +
       '';
   }

Any help much appreciated.

Thank you.

Rodel

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mohammad Hussain3y ago

Accepted answer

var text_section1_target1_tab1 = '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '' +
    '';

for (var count = 0; count < input_array.length; count++) {
    var action_no = input_array[count];
    
    // Append a row for each record
    text_section1_target1_tab1 += '' +
        '' +
        '' +
        '' +
        '' +
        '' +
        '' +
        '';
}

// Close the tbody and table tags
text_section1_target1_tab1 += 'No. A B C D REMARKS
' + action_no.value + ' Action1 1 1 D OK';

var data = text_section1_target1_tab1;

$('#preview_data').html('');
$('#preview_data').append(data);
$('#preview_data').dialog({
    resizable: false,
    width: 1000,
    height: 1024,
    modal: true,
    buttons: {
        'Submit': function() {
            //submit the form
            $(this).dialog("close");
            return 0;
        },
        Cancel: function() {
            $(this).dialog("close");
            return 0;
        }
    }
});

No.	A	B	C	D	REMARKS
' + action_no.value + '	Action1	1	1	D	OK

Amit Mohanty3y ago

If you want to show all data in one table format:

var previewData = ''; // Initialize an empty string to accumulate the HTML
previewData += 
  '' +
    '' +
      '' +
        '' +
        '' +
        '' +
        '' +
        '' +
        '' +
      '' +
    '' +
    '';
for (var count = 0; count < input_array.length; count++) {
    var action_no = input_array[count];
    // Generate the HTML for the current record and add it to the accumulated HTML
    previewData += 
      '' +
        '' +
        '' +
        '' +
        '' +
        '' +
        '' +
      '';
}

previewData += 'No. A B C D REMARKS
' + action_no.value + ' Action1 1 1 D OK
 ';

// After the loop, display the accumulated HTML in the dialog
$('#preview_data').html('');
$('#preview_data').append(previewData);
$('#preview_data').dialog({
    resizable: false,
    width: 1000,
    height: 1024,
    modal: true,
    buttons: {
        'Submit': function () {
            // submit the form
            $(this).dialog("close");
            return 0;
        },
        Cancel: function () {
            $(this).dialog("close");
            return 0;
        }
    }
});

No.	A	B	C	D	REMARKS
' + action_no.value + '	Action1	1	1	D	OK

Amit Mohanty3y ago

var previewData = ''; // Initialize an empty string to accumulate the HTML

for (var count = 0; count < input_array.length; count++) {
    var action_no = input_array[count];
    // Generate the HTML for the current record and add it to the accumulated HTML
    previewData += 
      '' +
        '' +
          '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
          '' +
        '' +
        '' +
          '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
          '' +
        '' +
      'No. A B C D REMARKS
' + action_no.value + ' Action1 1 1 D OK';
}

// After the loop, display the accumulated HTML in the dialog
$('#preview_data').html('');
$('#preview_data').append(previewData);
$('#preview_data').dialog({
    resizable: false,
    width: 1000,
    height: 1024,
    modal: true,
    buttons: {
        'Submit': function () {
            // submit the form
            $(this).dialog("close");
            return 0;
        },
        Cancel: function () {
            $(this).dialog("close");
            return 0;
        }
    }
});