locked
Submit after preview : Jquery Ajax() RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I am using Jquery ajax to submit a form. After submitting the al values goes to database.

    Ajax method

    <script type="text/javascript">
            $(function () {
    
                $("#btnDraft").click(function (event) {
                    event.preventDefault();
    		var formData = new FormData();
                  
                    formData.append("request_id", request_id);
    				
    //...... start appending items.......// 
    //...... end appeding items.......// 
    
    				$.ajax({
                       url:"@Url.Action("Save_Consultancy_Contract_Draft", "InitiateRequest")",
                        type: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            window.location.href = response;
                        }
                    });
                });
            });
    		</script>

    After submitting this ajax function calling Controllers action reult

    public ActionResult Save_Consultancy_Contract_Draft(InteractiveRequestsModel formData)
    {
    // saving values
    }

    What I want is, before calling this Action result, on btnDraft click it should show a popup where all form controls values should appear (preview form). Once  I ok the preview it should call the Action result and if I cancel the preview (popup) it should go back to the form.

    Please share any working example.

    Thanks

    Tuesday, April 7, 2020 8:49 AM

Answers

  • User1535942433 posted

    Hi demoninside9,

    As for now $("#preview").text(JSON.stringify(formData)); shows as below {} Array Type.

    Accroding to your description and codes,as far as I think,you need to convert formdata to json.

    More details,you could refer to below codes:

     
      <script type="text/javascript">
            $(function () {
                $("#btnSubmit").click(function (event) {
                    event.preventDefault();
    
                    var url = window.location.href;
                    var request_id = url.substring(url.lastIndexOf('/') + 1);
                    var formData = new FormData();
    
                    // to get form data
                    formData.append("request_id", request_id);
                    formData.append("project_number", $("#txt_pnno").val());
                    formData.append("estimated_cost", $("#txtEstimateCostAwardProcedure").val());
    
    
    
                    formData.append("information_email", $("#txtinformationemail").val());
                    formData.append("av_email", $("#ddl_avdvdeputy").val());
                    formData.append("purpose_of_request", $("#txtpurpose_of_request").val());
                    formData.append("award_type", $("#award_type").val());
                    formData.append("executed_country_id", $("#ddlExeCountry").val());
    
                    if ($('input[name="award_type"]').val() == "Discretionary Award") {
                        var fileInput5 = document.getElementById('FUDiscretionaryawardTOR');
                        var fileInput6 = document.getElementById('FUDiscretionaryawardCorporateDocuments');
                        var fileInput7 = document.getElementById('FUDiscretionaryawardDeclaration');
                        var fileInput8 = document.getElementById('FUDiscretionaryawardHonorariumMatrix');
                        formData.append("ImageFilePathDiscretionaryawardTOR", fileInput5.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardCorporateDocuments", fileInput6.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardDeclaration", fileInput7.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardHonorariumMatrix", fileInput8.files[0]);
    
    
                        if (fileInput5.files[0] != null) {
                            formData.append("tor", fileInput5.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput6.files[0] != null) {
                            formData.append("corporate_documents", fileInput6.files[0].name);
                        }
                        else {
                            formData.append("corporate_documents", "");
                        }
                        if (fileInput7.files[0] != null) {
                            formData.append("declaration", fileInput7.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
                        }
                        if (fileInput8.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput8.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDiscretionaryVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDiscretionaryName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDiscretionaryEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDiscretionaryPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDiscretionaryAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address= _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
                        formData.append("remarks", $("#txtDiscretionaryRemarks").val());
    
                    }
                    else if ($('input[name="award_type"]').val() == "Direct Award") {
    
                        var fileInput1 = document.getElementById('FUDirectAwardTOR');
                        var fileInput2 = document.getElementById('FUDirectAwardCorporateDocuments');
                        var fileInput3 = document.getElementById('FUDirectAwardDeclaration');
                        var fileInput4 = document.getElementById('FUDirectAwardHonorariumMatrix');
                        formData.append("ImageFilePathDirectAwardTOR", fileInput1.files[0]);
                        formData.append("ImageFilePathDirectAwardCorporateDocuments", fileInput2.files[0]);
                        formData.append("ImageFilePathDirectAwardDeclaration", fileInput3.files[0]);
                        formData.append("ImageFilePathDirectAwardHonorariumMatrix", fileInput4.files[0]);
    
    
                        if (fileInput1.files[0] != null) {
                            formData.append("tor", fileInput1.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput2.files[0] != null) {
                            formData.append("corporate_documents", fileInput2.files[0].name);
                        }
    
                        else {
                            formData.append("corporate_documents", "");
    
                        }
                        if (fileInput3.files[0] != null) {
                            formData.append("declaration", fileInput3.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
    
                        }
                        if (fileInput4.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput4.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDirectVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDirectName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDirectEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDirectPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDirectAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address = _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
                        formData.append("remarks", $("#txtDirectRemarks").val());
                        formData.append("justifiable_reason", $("#txtjustifiable_reason").val());
    
    
    
                    }
                    else { }
    
                    // Construct a new function to convert formDate to a json string
                    var object = {};
                    formData.forEach(function (value, key) {
                        object[key] = value;
                    });
                    var json = JSON.stringify(object);
    
    
                    $("#preview").html(json); // output preview items to your dialog - your method will probably be more complicated
                    $("#dialog-confirm").dialog({
                        resizable: false,
                        height: 'auto',
                        width: 400,
                        modal: true,
                        buttons: {
                            OK: function () {
    
                    $.ajax({
                       url:"@Url.Action("Index", "Submitpreview")",
                        type: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            window.location.href = response;
                        }
                                });
                                $(this).dialog("close"); // close dialog
                            },
                            Cancel: function () {
                                $(this).dialog("close"); // do nothing
                            }
                        }
                    });
                });
            });
        </script>
    <div style="background-color:aquamarine">
            <input id="btnSubmit" type="button" value="button" />
            <div id="dialog-confirm" title="Submit?">
                <div id="preview"></div>
            </div>
            <input id="txtEstimateCostAwardProcedure" type="text" /><br /><br /><br />
            <input id="txtinformationemail" type="text" /> <br /><br /><br />
            <input id="ddl_avdvdeputy" type="text" /> <br /><br /><br />
            <input id="txtpurpose_of_request" type="text" /> <br /><br /><br />
            <input id="award_type" type="text" /> <br /><br /><br />
            <input id="ddlExeCountry" type="text" /> <br /><br /><br />
            <input id="award_type" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardTOR" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardCorporateDocuments" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardDeclaration" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardHonorariumMatrix" type="text" /> <br /><br /><br />
            <input id="DynamicTextBoxDirectName" type="text" name="DynamicTextBoxDirectName" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryVendorId" type="text" name="DynamicTextBoxDiscretionaryVendorId" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryName" type="text" name="DynamicTextBoxDiscretionaryName" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryEmail" type="text" name="DynamicTextBoxDiscretionaryEmail" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryAddress" type="text" name="DynamicTextBoxDiscretionaryAddress" /> <br /><br /><br />
            <input id="txtDiscretionaryRemarks" type="text" name="txtDiscretionaryRemarks" /> <br /><br /><br />
            <input id="txtDirectRemarks" type="text" /> <br /><br /><br />
            <input id="txtjustifiable_reason" type="text" /> <br /><br /><br />
        </div>

    Result:

    One more thing also here from where the background white strip is coming?

    I suggest you could post your full codes about page.

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 14, 2020 8:10 AM

All replies

  • User415553908 posted

    Assimung jQuery UI is an option, you could opt for their confirmation dialog widget (you can probably implement your own, but the idea remains same):

    <input id="inputValue" name="value" value="22" />
    <input id="btnDraft" type="button" value="OK" />
    
    <div id="dialog-confirm" title="Submit?">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>     
        Are you sure?</p>
      <div id="preview" />
    </div>

    then your JS would look something like so:

    $(function a() {
      $("#btnDraft").click(function (event) {
        event.preventDefault();
        var formData = { // I will assume you've got a way to populate your object already and will just hardcode something for example
          value: $("#inputValue").val(),      
        };
    //...... start appending items.......//
    //...... end appeding items.......// $("#preview").text(JSON.stringify(formData)); // output preview items to your dialog - your method will probably be more complicated $("#dialog-confirm").dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { OK: function() { $.ajax({ url:"@Url.Action("Save_Consultancy_Contract_Draft", "InitiateRequest")", type: 'POST', cache: false, contentType: false, processData: false, data: formData, success: function (response) { window.location.href = response; } }); // submit $(this).dialog("close"); // close dialog }, Cancel: function() { $(this).dialog("close"); // do nothing } } }); }); });

    check out code pen

    Tuesday, April 7, 2020 9:28 AM
  • User1052662409 posted

    Assimung jQuery UI is an option, you could opt for their confirmation dialog widget (you can probably implement your own, but the idea remains same):

    Thank you Timir.kh your approach works fine. here I need to clarify one thing. Do I need to put every controls data using jquery (like $("#txtpurpose_of_request").val()) ? in 

    <div id="preview" />
    </div>

    As for now $("#preview").text(JSON.stringify(formData)); shows as below {} Array Type.

    1

    One more thing also here from where the background white strip is coming?  is it because of 

    height: "auto",
          width: 400,
    Thursday, April 9, 2020 10:49 AM
  • User1535942433 posted

    Hi demoninside9,

    Do I need to put every controls data using jquery (like $("#txtpurpose_of_request").val()) ?

    Accroding to your description,as far as I think,you need to post all your value you want.

    One more thing also here from where the background white strip is coming?  is it because of 

    I create a demo for the codes and it works fine.I suggest you could post your current codes to us.It will help us to solve your problem.

    Best regards,

    Yijing Sun

    Friday, April 10, 2020 9:44 AM
  • User1052662409 posted

    I suggest you could post your current codes to us.It will help us to solve your problem.

    <script type="text/javascript">
            $(function () {
                $("#btnSubmit").click(function (event) {
                    event.preventDefault();
    
                    var url = window.location.href;
                    var request_id = url.substring(url.lastIndexOf('/') + 1);
                    var formData = new FormData();
                    // to get form data
                    formData.append("request_id", request_id);
                    formData.append("project_number", $("#txt_pnno").val());
                    formData.append("estimated_cost", $("#txtEstimateCostAwardProcedure").val());
                    formData.append("information_email", $("#txtinformationemail").val());
                    formData.append("av_email", $("#ddl_avdvdeputy").val());
                    formData.append("purpose_of_request", $("#txtpurpose_of_request").val());
                    formData.append("award_type", $("#award_type").val());
                    formData.append("executed_country_id", $("#ddlExeCountry").val());
    
                    if ($('input[name="award_type"]').val() == "Discretionary Award") {
                        var fileInput5 = document.getElementById('FUDiscretionaryawardTOR');
                        var fileInput6 = document.getElementById('FUDiscretionaryawardCorporateDocuments');
                        var fileInput7 = document.getElementById('FUDiscretionaryawardDeclaration');
                        var fileInput8 = document.getElementById('FUDiscretionaryawardHonorariumMatrix');
                        formData.append("ImageFilePathDiscretionaryawardTOR", fileInput5.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardCorporateDocuments", fileInput6.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardDeclaration", fileInput7.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardHonorariumMatrix", fileInput8.files[0]);
    
                        if (fileInput5.files[0] != null) {
                            formData.append("tor", fileInput5.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput6.files[0] != null) {
                            formData.append("corporate_documents", fileInput6.files[0].name);
                        }
                        else {
                            formData.append("corporate_documents", "");
                        }
                        if (fileInput7.files[0] != null) {
                            formData.append("declaration", fileInput7.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
                        }
                        if (fileInput8.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput8.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDiscretionaryVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDiscretionaryName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDiscretionaryEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDiscretionaryPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDiscretionaryAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address= _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
    
                        formData.append("remarks", $("#txtDiscretionaryRemarks").val());
    
    
    
    
    
    
                    }
                    else if ($('input[name="award_type"]').val() == "Direct Award") {
    
                        var fileInput1 = document.getElementById('FUDirectAwardTOR');
                        var fileInput2 = document.getElementById('FUDirectAwardCorporateDocuments');
                        var fileInput3 = document.getElementById('FUDirectAwardDeclaration');
                        var fileInput4 = document.getElementById('FUDirectAwardHonorariumMatrix');
                        formData.append("ImageFilePathDirectAwardTOR", fileInput1.files[0]);
                        formData.append("ImageFilePathDirectAwardCorporateDocuments", fileInput2.files[0]);
                        formData.append("ImageFilePathDirectAwardDeclaration", fileInput3.files[0]);
                        formData.append("ImageFilePathDirectAwardHonorariumMatrix", fileInput4.files[0]);
    
    
                        if (fileInput1.files[0] != null) {
                            formData.append("tor", fileInput1.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput2.files[0] != null) {
                            formData.append("corporate_documents", fileInput2.files[0].name);
                        }
    
                        else {
                            formData.append("corporate_documents", "");
    
                        }
                        if (fileInput3.files[0] != null) {
                            formData.append("declaration", fileInput3.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
    
                        }
                        if (fileInput4.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput4.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDirectVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDirectName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDirectEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDirectPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDirectAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address = _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
                        formData.append("remarks", $("#txtDirectRemarks").val());
                        formData.append("justifiable_reason", $("#txtjustifiable_reason").val());
    
    
    
                    }
                    else { }
    
                    $("#preview").text(JSON.stringify(formData)); // output preview items to your dialog - your method will probably be more complicated
                    $("#dialog-confirm").dialog({
                        resizable: false,
                        height: "auto",
                        width: 400,
                        modal: true,
                        buttons: {
                            OK: function () {
    
                    $.ajax({
                       url:"@Url.Action("Save_Consultancy_Contract_Final", "InitiateRequest")",
                        type: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            window.location.href = response;
                        }
                                });
                                $(this).dialog("close"); // close dialog
                            },
                            Cancel: function () {
                                $(this).dialog("close"); // do nothing
                            }
                        }
                    });
                });
            });
        </script>

    Friday, April 10, 2020 6:01 PM
  • User1535942433 posted

    Hi demoninside9,

    As for now $("#preview").text(JSON.stringify(formData)); shows as below {} Array Type.

    Accroding to your description and codes,as far as I think,you need to convert formdata to json.

    More details,you could refer to below codes:

     
      <script type="text/javascript">
            $(function () {
                $("#btnSubmit").click(function (event) {
                    event.preventDefault();
    
                    var url = window.location.href;
                    var request_id = url.substring(url.lastIndexOf('/') + 1);
                    var formData = new FormData();
    
                    // to get form data
                    formData.append("request_id", request_id);
                    formData.append("project_number", $("#txt_pnno").val());
                    formData.append("estimated_cost", $("#txtEstimateCostAwardProcedure").val());
    
    
    
                    formData.append("information_email", $("#txtinformationemail").val());
                    formData.append("av_email", $("#ddl_avdvdeputy").val());
                    formData.append("purpose_of_request", $("#txtpurpose_of_request").val());
                    formData.append("award_type", $("#award_type").val());
                    formData.append("executed_country_id", $("#ddlExeCountry").val());
    
                    if ($('input[name="award_type"]').val() == "Discretionary Award") {
                        var fileInput5 = document.getElementById('FUDiscretionaryawardTOR');
                        var fileInput6 = document.getElementById('FUDiscretionaryawardCorporateDocuments');
                        var fileInput7 = document.getElementById('FUDiscretionaryawardDeclaration');
                        var fileInput8 = document.getElementById('FUDiscretionaryawardHonorariumMatrix');
                        formData.append("ImageFilePathDiscretionaryawardTOR", fileInput5.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardCorporateDocuments", fileInput6.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardDeclaration", fileInput7.files[0]);
                        formData.append("ImageFilePathDiscretionaryawardHonorariumMatrix", fileInput8.files[0]);
    
    
                        if (fileInput5.files[0] != null) {
                            formData.append("tor", fileInput5.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput6.files[0] != null) {
                            formData.append("corporate_documents", fileInput6.files[0].name);
                        }
                        else {
                            formData.append("corporate_documents", "");
                        }
                        if (fileInput7.files[0] != null) {
                            formData.append("declaration", fileInput7.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
                        }
                        if (fileInput8.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput8.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDiscretionaryVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDiscretionaryName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDiscretionaryEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDiscretionaryPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDiscretionaryAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address= _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
                        formData.append("remarks", $("#txtDiscretionaryRemarks").val());
    
                    }
                    else if ($('input[name="award_type"]').val() == "Direct Award") {
    
                        var fileInput1 = document.getElementById('FUDirectAwardTOR');
                        var fileInput2 = document.getElementById('FUDirectAwardCorporateDocuments');
                        var fileInput3 = document.getElementById('FUDirectAwardDeclaration');
                        var fileInput4 = document.getElementById('FUDirectAwardHonorariumMatrix');
                        formData.append("ImageFilePathDirectAwardTOR", fileInput1.files[0]);
                        formData.append("ImageFilePathDirectAwardCorporateDocuments", fileInput2.files[0]);
                        formData.append("ImageFilePathDirectAwardDeclaration", fileInput3.files[0]);
                        formData.append("ImageFilePathDirectAwardHonorariumMatrix", fileInput4.files[0]);
    
    
                        if (fileInput1.files[0] != null) {
                            formData.append("tor", fileInput1.files[0].name);
                        }
                        else {
                            formData.append("tor", "");
                        }
                        if (fileInput2.files[0] != null) {
                            formData.append("corporate_documents", fileInput2.files[0].name);
                        }
    
                        else {
                            formData.append("corporate_documents", "");
    
                        }
                        if (fileInput3.files[0] != null) {
                            formData.append("declaration", fileInput3.files[0].name);
                        }
                        else {
                            formData.append("declaration", "");
    
                        }
                        if (fileInput4.files[0] != null) {
                            formData.append("honorarium_matrix", fileInput4.files[0].name);
                        }
                        else {
                            formData.append("honorarium_matrix", "");
    
                        }
    
                        var _vendorsModels = [];
    
                        var count = document.getElementsByName("DynamicTextBoxDirectName").length;
    
                        for (var i = 0; i < count; i++) {
                            var _vendor_id = document.getElementsByName("DynamicTextBoxDirectVendorId").item(i).value;
                            var _name = document.getElementsByName("DynamicTextBoxDirectName").item(i).value;
                            var _email = document.getElementsByName("DynamicTextBoxDirectEmail").item(i).value;
                            var _phone = document.getElementsByName("DynamicTextBoxDirectPhone").item(i).value;
                            var _address = document.getElementsByName("DynamicTextBoxDirectAddress").item(i).value;
    
                            var jsonData = {};
                            jsonData.vendor_id = _vendor_id;
                            jsonData.name = _name;
                            jsonData.email = _email;
                            jsonData.phone = _phone;
                            jsonData.address = _address;
    
                            _vendorsModels.push(jsonData);
    
                            console.log(_vendorsModels);
                        }
    
    
    
                        var index = 0;
                        for (var item of _vendorsModels) {
                            if (item.vendor_id) {
                            }
                            else {
                                item.vendor_id = "0";
                            }
                            var _name = item.name;
                            var _email = item.email;
                            var _phone = item.phone;
                            formData.append("vendorsModels[" + index + "].vendor_id", _vendor_id);
                            formData.append("vendorsModels[" + index + "].name", _name);
                            formData.append("vendorsModels[" + index + "].email", _email);
                            formData.append("vendorsModels[" + index + "].phone", _phone);
                            formData.append("vendorsModels[" + index + "].address", _address);
                            index++;
                        }
                        formData.append("remarks", $("#txtDirectRemarks").val());
                        formData.append("justifiable_reason", $("#txtjustifiable_reason").val());
    
    
    
                    }
                    else { }
    
                    // Construct a new function to convert formDate to a json string
                    var object = {};
                    formData.forEach(function (value, key) {
                        object[key] = value;
                    });
                    var json = JSON.stringify(object);
    
    
                    $("#preview").html(json); // output preview items to your dialog - your method will probably be more complicated
                    $("#dialog-confirm").dialog({
                        resizable: false,
                        height: 'auto',
                        width: 400,
                        modal: true,
                        buttons: {
                            OK: function () {
    
                    $.ajax({
                       url:"@Url.Action("Index", "Submitpreview")",
                        type: 'POST',
                        cache: false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (response) {
                            window.location.href = response;
                        }
                                });
                                $(this).dialog("close"); // close dialog
                            },
                            Cancel: function () {
                                $(this).dialog("close"); // do nothing
                            }
                        }
                    });
                });
            });
        </script>
    <div style="background-color:aquamarine">
            <input id="btnSubmit" type="button" value="button" />
            <div id="dialog-confirm" title="Submit?">
                <div id="preview"></div>
            </div>
            <input id="txtEstimateCostAwardProcedure" type="text" /><br /><br /><br />
            <input id="txtinformationemail" type="text" /> <br /><br /><br />
            <input id="ddl_avdvdeputy" type="text" /> <br /><br /><br />
            <input id="txtpurpose_of_request" type="text" /> <br /><br /><br />
            <input id="award_type" type="text" /> <br /><br /><br />
            <input id="ddlExeCountry" type="text" /> <br /><br /><br />
            <input id="award_type" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardTOR" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardCorporateDocuments" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardDeclaration" type="text" /> <br /><br /><br />
            <input id="FUDiscretionaryawardHonorariumMatrix" type="text" /> <br /><br /><br />
            <input id="DynamicTextBoxDirectName" type="text" name="DynamicTextBoxDirectName" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryVendorId" type="text" name="DynamicTextBoxDiscretionaryVendorId" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryName" type="text" name="DynamicTextBoxDiscretionaryName" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryEmail" type="text" name="DynamicTextBoxDiscretionaryEmail" /> <br /><br /><br />
            <input id="DynamicTextBoxDiscretionaryAddress" type="text" name="DynamicTextBoxDiscretionaryAddress" /> <br /><br /><br />
            <input id="txtDiscretionaryRemarks" type="text" name="txtDiscretionaryRemarks" /> <br /><br /><br />
            <input id="txtDirectRemarks" type="text" /> <br /><br /><br />
            <input id="txtjustifiable_reason" type="text" /> <br /><br /><br />
        </div>

    Result:

    One more thing also here from where the background white strip is coming?

    I suggest you could post your full codes about page.

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 14, 2020 8:10 AM