1

I created the Modal Form where it captures the user id information and a date stamp (date()).

Now I want to submit to update an item list. Below is the code. Everything is working as it should, however, the only thing it's not doing is submitting to the list. In the area of code below (below "//this is where I wanted to update using the text are") is where I thought it would update. Below is the Code:

<script>
  $( function() {
    var dialog, form,

      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      email = $( "#email" ),
      allFields = $( [] ).add( email ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );

      if ( valid ) {
        $( "#users tbody" ).append( "<tr>" +

          "<td>" + email.val() + "</td>" +

        "</tr>" );
        dialog.dialog( "close" );
      }
      return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Sign": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      /*close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }*/
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });

    $( "#create-user" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
  }
 );
  </script>
  <div id="dialog-form" title="Employee Signature">
  <p class="validateTips">Verify your Information</p>
    <script type="text/javascript">

        var loginName = "";
        var userid = _spPageContextInfo.userId;
        var da = new Date();
        var urlParam=GetUrlKeyValue("ID");

        GetCurrentUser();
        function GetCurrentUser() {
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

        var requestHeaders = { "accept" : "application/json;odata=verbose" };

        $.ajax({
          url : requestUri,
          contentType : "application/json;odata=verbose",
          headers : requestHeaders,
          success : onSuccess,
          error : onError
          });
        }

        function onSuccess(data, request) {
            var loginName = data.d.Title;
            var loginName = loginName + " - Signed on " + da;

                var edidpObject = {
                    loginObj: function () {
                        return loginName;
                    }
                }

                cacedi = edidpObject.loginObj();
                document.getElementById("edipiCac").value = cacedi;

            }

        function onError(error) {
          alert(error);
          }     

    </script>
<form>
    <fieldset>

      <label for="email">Signature - List Item ID Number:  <span id="dispID"></span></label><br />
      <textarea name="email" id="edipiCac" value="" class="text ui-widget-content ui-corner-all" cols="40" rows="4" readonly></textarea>      

      <input type="submit" tabindex="-1" onclick="updateListItem();" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
      <script>
        var urlParamForm=GetUrlKeyValue("ID");

        //this is where I wanted to update using the text are    
        //this is where I wanted to update using the text are
        //this is where I wanted to update using the text are

        document.getElementById("dispID").innerHTML=urlParamForm;
            function updateListItem() {
                var clientContext = new SP.ClientContext.get_current();
                var oList = clientContext.get_web().get_lists().getByTitle("sp-forms-form2");
                var x = document.getElementById("myForm").elements.namedItem("email).value;

                this.oListItem = oList.getItemById(urlParamForm);
                oListItem.set_item("preference", x);

                if (confirm("Click Ok to Continue with change(s) or cancel!")) {
                    oListItem.update();
                    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
                    } else {
                    alert("No change in Item.");
                    }

            }

            function onQuerySucceeded() {

                alert("Item updated!");
            }

            function onQueryFailed(sender, args) {

                alert("Request failed. " + args.get_message() + "\n" + args.get_stackTrace());
            }
      </script>
</div>
1

Sample test demo for your reference.

<!doctype html>
<html lang="en">
<head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>jQuery UI Dialog - Modal form</title>
                <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

                <style>
                                label, input { display:block; }
                                input.text { margin-bottom:12px; width:95%; padding: .4em; }
                                fieldset { padding:0; border:0; margin-top:25px; }
                                h1 { font-size: 1.2em; margin: .6em 0; }
                                div#users-contain { width: 350px; margin: 20px 0; }
                                div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
                                div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
                                .ui-dialog .ui-state-error { padding: .3em; }
                                .validateTips { border: 1px solid transparent; padding: 0.3em; }
                </style>
                <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
                <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
                <script>
                $( function() {
                                var dialog, form,                               
                                                preference = $( "#preference" ),                                
                                                allFields = $( [] ).add( preference ),
                                                tips = $( ".validateTips" );
                                function updateTips( t ) {
                                                tips
                                                                .text( t )
                                                                .addClass( "ui-state-highlight" );
                                                setTimeout(function() {
                                                                tips.removeClass( "ui-state-highlight", 1500 );
                                                }, 500 );
                                }

                                function checkLength( o, n, min, max ) {
                                                if ( o.val().length > max || o.val().length < min ) {
                                                                o.addClass( "ui-state-error" );
                                                                updateTips( "Length of " + n + " must be between " +
                                                                                min + " and " + max + "." );
                                                                return false;
                                                } else {
                                                                return true;
                                                }
                                }

                                function checkRegexp( o, regexp, n ) {
                                                if ( !( regexp.test( o.val() ) ) ) {
                                                                o.addClass( "ui-state-error" );
                                                                updateTips( n );
                                                                return false;
                                                } else {
                                                                return true;
                                                }
                                }

                                function addUser() {
                                                var valid = true;
                                                allFields.removeClass( "ui-state-error" );

                                                dialog.dialog( "open" );
                                                return valid;
                                }

                                dialog = $( "#dialog-form" ).dialog({
                                                autoOpen: false,
                                                height: 400,
                                                width: 350,
                                                modal: true,
                                                buttons: {
                                                                "update an item": function() {
                                                                                updateListItem();
                                                                },
                                                                Cancel: function() {
                                                                                dialog.dialog( "close" );
                                                                }
                                                },
                                                close: function() {
                                                                form[ 0 ].reset();
                                                                allFields.removeClass( "ui-state-error" );
                                                }
                                });

                                form = dialog.find( "form" ).on( "submit", function( event ) {
                                                event.preventDefault();
                                                updateListItem();
                                });

                                $( "#create-user" ).button().on( "click", function() {
                                                dialog.dialog( "open" );
                                });
                } );
                var loginName = "";
    var userid = _spPageContextInfo.userId;
    var da = new Date();
    var urlParam = GetUrlKeyValue("ID");

    GetCurrentUser();
    function GetCurrentUser() {
        var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";

        var requestHeaders = { "accept": "application/json;odata=verbose" };

        $.ajax({
            url: requestUri,
            contentType: "application/json;odata=verbose",
            headers: requestHeaders,
            success: onSuccess,
            error: onError
        });
    }

    function onSuccess(data, request) {
        var loginName = data.d.Title;
        var loginName = loginName + " - Signed on " + da;

        var edidpObject = {
            loginObj: function () {
                return loginName;
            }
        }
$( "#preference" ).val(loginName);


    }

    function onError(error) {
        alert(error);
    }
    function updateListItem() {
                var urlParamForm=GetUrlKeyValue("ID");

        var clientContext = new SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle("sp-forms-form2");
        clientContext.load(oList);
                                var x=$( "#preference" ).val();
        this.oListItem = oList.getItemById(urlParamForm);
         oListItem.set_item("preference", x);

                                //var lci = new SP.ListItemCreationInformation();
                                //var oListItem=oList.addItem(lci);

                      //clientContext.load(oListItem);
        //oListItem.set_item("preference", x);

        if (confirm("Click Ok to Continue with change(s) or cancel!")) {
            oListItem.update();
            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

        } else {
            alert("No change in Item.");
        }


    }

    function onQuerySucceeded() {

        alert("Item updated!");
                                window.location.reload();
    }

    function onQueryFailed(sender, args) {

        alert("Request failed. " + args.get_message() + "\n" + args.get_stackTrace());
    }
                </script>
</head>
<body>

<div id="dialog-form" title="Create new Item">
                <p class="validateTips">All form fields are required.</p>

                <form>
                                <fieldset>
                                                <label for="name">preference</label>
                                                <input type="text" name="preference" id="preference" value="" class="text ui-widget-content ui-corner-all">


                                                <!-- Allow form submission with keyboard without duplicating the dialog button -->
                                                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
                                </fieldset>
                </form>
</div>


<input id="create-user" value="Create new Item">


</body>
</html>
  • Thanks. The issue I am having is that the success alert pops up when the page loads and it keeps looping (the page keeps refreshing). When I actually look at the list though, it takes the input from the modal pop up. – adams-j Nov 1 at 13:43
  • Update from above. It works but I had to move the windows.location.reload out of the onQuerySucceeded function. – adams-j Nov 1 at 15:00
1

Missing ending quotation for "email" on line below might be causing the issue

var x = document.getElementById("myForm").elements.namedItem("email).value;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.