DataTables Form Input issue.

Isaac
Isaac used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst programmer
Commented:
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>";
IsaacSharePoint Client Side Developer

Author

Commented:
Thanks!
KarenAnalyst programmer

Commented:
No worries :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial