Update a list item from a custom Modal Form
https://sharepoint.stackexchange.com/questions/271519
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
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>
해결책
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>
다른 팁
Missing ending quotation for "email" on line below might be causing the issue
var x = document.getElementById("myForm").elements.namedItem("email).value;
제휴하지 않습니다 sharepoint.stackexchange
