locked
send sharepoint list form data to another server api as JSON with onsubmit RRS feed

  • Question

  • I have a requirement for a helpdesk sharepoint list form to write to the Sp list (OOTB functionality) AND send the form data as JSON to an API endpoint.

    I know this needs to be done in js/jquery and this is my code. this example is just to test it and sends the json string to my email address :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $('#form').on('submit', function(event){

            var obj = $('form').serializeJSON();

            $.ajax({
                type: 'POST',
                url: 'mailto:me@me.ca',
                dataType: 'json',
                data: JSON.stringify(obj),
                contentType : 'application/json',
                success: function(data) {
                    alert(data)
                }
            });

           return false;
       });

    </script>

    it doesnt send the info to the email address. i am not a js expert and any help would be appreciated. I thought this was a simple process. 

    Regards,

    Luis

    Thursday, October 24, 2019 3:34 PM

Answers

  • Hi luis,

    You could add the script in SharePoint list form and pass Json data into other Web API like this:

    body>
        <section id="rest">
            <button id="sendformdata" type="button">Send Form Data</button>
            <div id="result"></div>
        </section>
    
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">       
            $(document).ready(function () {
                var URL = "https://sharepointtestggg.azurewebsites.net/api/HttpTrigger1";
                $("#sendformdata").click(function () {
    
                    var payload = JSON.stringify({
                        "Title": $("input[id^='Title'][title='Title Required Field']").val(),
                        "num": $("input[id^='num'][title='num Required Field']").val()
                    });
                    $.ajax({
                        url: URL,
                        type: "POST",
                        data: payload,
                        headers: { "content-type": "application/json;odata=verbose" },
                        success: function (res, status) {
                            $("#result").text(res);
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });
                });
    
            });
        </script>
        <style>
            #sendformdata {
                color: #444;
                font-size: 11px;
            }
        </style>
    </body>
    

    Thanks

    Best Regards


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 25, 2019 7:13 AM

All replies

  • Hi luis,

    You could add the script in SharePoint list form and pass Json data into other Web API like this:

    body>
        <section id="rest">
            <button id="sendformdata" type="button">Send Form Data</button>
            <div id="result"></div>
        </section>
    
        <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">       
            $(document).ready(function () {
                var URL = "https://sharepointtestggg.azurewebsites.net/api/HttpTrigger1";
                $("#sendformdata").click(function () {
    
                    var payload = JSON.stringify({
                        "Title": $("input[id^='Title'][title='Title Required Field']").val(),
                        "num": $("input[id^='num'][title='num Required Field']").val()
                    });
                    $.ajax({
                        url: URL,
                        type: "POST",
                        data: payload,
                        headers: { "content-type": "application/json;odata=verbose" },
                        success: function (res, status) {
                            $("#result").text(res);
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });
                });
    
            });
        </script>
        <style>
            #sendformdata {
                color: #444;
                font-size: 11px;
            }
        </style>
    </body>
    

    Thanks

    Best Regards


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, October 25, 2019 7:13 AM
  • Wendy,

    that is exactly what I needed. Thanks so much! I kept getting an error and your example cleared that up.

    Regards,

    Luis

    Tuesday, October 29, 2019 11:20 AM
  • no need to serialize it?

    Luis

    Tuesday, October 29, 2019 11:56 AM