DataTables Form Input issue.

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

LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?
 
KarenAnalyst programmerCommented:
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
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Thanks!
0
 
KarenAnalyst programmerCommented:
No worries :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.