none
Alert box to display SharePoint list values before submitting RRS feed

  • Question

  • Hi Team,

    I am having "Preview" button in  NewForm.aspx page of a SharePoint List. When that button is clicked, a pop up box should display with values entered by the user in NewForm.aspx before submitting the values. How to achieve this?

    Thanks in advance.

    Wednesday, December 28, 2016 11:28 AM

Answers

  • Hi,

    We can use jQuery selector to get the user input values, and use SharePoint "OpenPopUpPageWithDialogOptions" to open a popup dialog.

    The following example for your reference, add the code below to a content editor web part in NewForm.aspx page.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {	
    	$("input[id$='SaveItem']").before("<input id='preview' type='button' onclick='PreviewData()' value='Preview'/>");	
    });
    function PreviewData(){
    	var html = document.createElement("div");
    	html.innerHTML = "<table id='popuptb'><tr><td width='20%'>Title*</td><td>"+$("input[title='Title Required Field']").val()+"</td></tr></table>";
    	OpenPopUpPageWithDialogOptions({
    		title: "Preview values",
    		html:html,
    		dialogReturnValueCallback: function(dialogResult){
    			//alert(dialogResult); //Add your custom code here.
    		}
    	});
    }
    </script>
    <style type="text/css"> 
    #popuptb{ 
    	border-collapse: collapse; 
    	border: none; 
    	width: 400px; 
    } 
    #popuptb td{
    	border: solid #92c0e0 1px; 
    } 
    </style> 

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Jo.nec Thursday, December 29, 2016 7:15 AM
    Thursday, December 29, 2016 2:50 AM
    Moderator

All replies

  • Hi,

    We can use jQuery selector to get the user input values, and use SharePoint "OpenPopUpPageWithDialogOptions" to open a popup dialog.

    The following example for your reference, add the code below to a content editor web part in NewForm.aspx page.

    <script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {	
    	$("input[id$='SaveItem']").before("<input id='preview' type='button' onclick='PreviewData()' value='Preview'/>");	
    });
    function PreviewData(){
    	var html = document.createElement("div");
    	html.innerHTML = "<table id='popuptb'><tr><td width='20%'>Title*</td><td>"+$("input[title='Title Required Field']").val()+"</td></tr></table>";
    	OpenPopUpPageWithDialogOptions({
    		title: "Preview values",
    		html:html,
    		dialogReturnValueCallback: function(dialogResult){
    			//alert(dialogResult); //Add your custom code here.
    		}
    	});
    }
    </script>
    <style type="text/css"> 
    #popuptb{ 
    	border-collapse: collapse; 
    	border: none; 
    	width: 400px; 
    } 
    #popuptb td{
    	border: solid #92c0e0 1px; 
    } 
    </style> 

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by Jo.nec Thursday, December 29, 2016 7:15 AM
    Thursday, December 29, 2016 2:50 AM
    Moderator
  • Hi Dennis,

    Thanks for your reply. It works well. Now I am having an additional requirement.Is it possible to retrieve the look up column value from another list and display as pop up in the NewForm.aspx of the current list before saving?

    To be clear,

    Templates List:

    Components List:

    I am having "All Components" Look Up column in my NewForm.aspx of Templates List.When user clicks on the required components, corresponding values in the Look up list should display in the pop up message.

    Eg: If I select"Header" in "All components" field of Templates List, corresponding Look up "content" column value "Dear All," should be displayed in pop-up.How to achieve this?

    Thanks in advance.

    Thursday, December 29, 2016 7:36 AM
  • Hi,

    If you want to get other column in lookup list, we need using REST API to get the value base on the current select value "Header".

    The REST URI like below:

    /_api/lists/getbytitle('Components List')/items?$filter=Title eq 'Header'

    More information about working with REST API using jQuery Ajax in the article below:

    https://social.technet.microsoft.com/wiki/contents/articles/31995.sharepoint-2013-working-with-rest-api-using-jquery-ajax.aspx

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, December 29, 2016 7:53 AM
    Moderator
  • Hi Dennis,

    I follow the your steps and reach the output.

    I have one requirement same like this.

    My requirement is need to create a "Export to Excel" button on page and once i click on button dialog box will open and here i need to select a fields(Ex: In list having 10 fields but i have select only 5 fields and export 5 fields to excel).

    I appreciate your help.

    Regards,

    Sreenivas

    Thursday, September 6, 2018 11:49 AM