Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

DataTables Form Input issue.

Posted on 2016-10-05
3
Medium Priority
?
172 Views
Last Modified: 2016-10-05
Hi All,

I am trying to get my page to do what's on this site (click the submit form above the table).  As you will see, it alerts data from the table.

My alert does not do the same thing.  I think it's b/c how sloppy my code is which I'm trying to figure out how to fix but no success.  Any help would be appreciated.
Here's the site and code.

$(function() {
	retrieveListItems();
});


function retrieveListItems() {
	var clientContext = new SP.ClientContext();
	var oList = clientContext.get_web().get_lists().getByTitle('ParkFundingForm');
	
	var camlQuery = new SP.CamlQuery();
  
	this.collListItem = oList.getItems(camlQuery);
	
	clientContext.load(collListItem);
	
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
}

var htmlTbl = "<div><button type='Submit'>Submit Form</button></div><table id='prioritize' class='display' cellspacing='0' width='100%'>";
	htmlTbl += "<thead><th>Priority Number</th><th>Title</th><th>Project Name</th><th>Project Number</th></thead>";
	htmlTbl += "<tbody>";

//var items=[];

function onQuerySucceeded(sender, args) {
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	
	while (listItemEnumerator.moveNext()) {
		var oListItem = listItemEnumerator.get_current();
		
		htmlTbl += "<tr><td><input type='text' id='rowID-"+oListItem.get_item('ProjectName')+"' value="+oListItem.get_item('PriorityNumber')+"></td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
	}
	
	htmlTbl += "</tbody></table>";
	//alert(htmlTbl);
	
		$("#divListItems").html(htmlTbl);
		//$('#prioritize').DataTable();
		
		var table = $('#prioritize').DataTable();
		//alert(table);
 
    $('button').click( function() {
        var data = table.$('input').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 1, 120 )+'nothing...'
        );
        return false;
    } );
		

}

function onQueryFailed(sender, args) {
	alert('Request failed. '+args.get_message() + '\n' + args.get_stackTrace());
}

/*$(document).ready(function() {
    $('#prioritize').DataTable();
});*/

Open in new window

0
Comment
Question by:Isaac
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
Karen earned 2000 total points
ID: 41831099
The problem is the "serialize" method requires all input elements to have name values.
You need to change how you build your html:

      htmlTbl += "<tr><td><input type='text' id='rowID-"+oListItem.get_item('ProjectName')+"'  name='rowID-"+oListItem.get_item('ProjectName')+"' value="+oListItem.get_item('PriorityNumber')+"></td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 41831111
Thanks!
0
 
LVL 9

Expert Comment

by:Karen
ID: 41831119
No worries :)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question