Как передать идентификатор контрольного узла через кнопку отправки HTML тоже с функцией

Question

Я пытаюсь отправить идентификатор контрольных узлов в базу данных с помощью кнопки отправки.Я пытаюсь несколько способов, но не понимаю.А как сделать так, чтобы кнопка отправки была функцией сохранения идентификатора?Кто-нибудь может показать правильный код?Вот что будет более понятно: https://dojo.telerik.com/IYEvALiY/11 Я хочу получить только идентификатор в базе данных.

Это код PHP для публикации данных в MySQL

function getTemplate() {
    global $ehorsObj;
    $positionTemplateID = (isset($_POST['positionTemplateID']) ? $_POST['positionTemplateID'] : '');
    $hrsPositionID = (isset($_POST['hrsPositionID']) ? $_POST['hrsPositionID'] : '');
    $programID = (isset($_POST['programID']) ? $_POST['programID'] : '');
    $propertyID = (isset($_POST['propertyID']) ? $_POST['propertyID'] : '');
    $employeeID = (isset($_POST['employeeID']));

    /* check unique */
    $sqlCount = "INSERT INTO tblHrsPositionProgramTemplate (programID) VALUES ($result)";
    $GetResult = $ehorsObj->FetchData($sqlCount, $ehorsObj->DEFAULT_PDO_CONNECTIONS);   
}

Это Javascript

<script>
	
	var grid;
	var dropdownlist;
	
	$(document).ready(function () {
  
  //AJAX i want to save into db
		
		dataSource = new kendo.data.DataSource({
			transport: {
				read: {
					url:  "./getTest.php",
					type: "POST",
					data: function() {
							return { 
								method: "getTemplate",
								positionTemplateID: document.getElementById('positionTemplateID').checked,
								hrsPositionID: dropdownlist.value(),
							}
						}
					},
					
				template: {
					url:  "./getTest.php",
					type: "POST",
					data: function () {
							return {
								method: "getTemplate",
								employeeID: document.getElementById('employeeID').value,
								propertyID: document.getElementById('propertyID').value,
							}
						},
						complete: function (e) {  
								$('#grid').data('kendoGrid').dataSource.read();
							  } 
					},
			},	
			schema: {
				model: {
				id: "positionTemplateID",
				}
			},
				
		});
		
		
		//dropdown position
		$("#dropdown").kendoDropDownList({
					  dataTextField: "functionName",
					  dataValueField: "hrsPositionID",
					  dataSource: {
						transport:{
							read: {
							url:  "../Designation/getTest.php",
							type: "POST",
							data: function() {
									return { 
										method: "getDropdown",
									}
								}
							},
						},
					  },
					  //change: onChange
				  }).data('kendoDropDownList');

	dropdownlist = $("#dropdown").data("kendoDropDownList");
	
	//function onChange() {
	//$('#dropdown').data('kendoGrid').dataSource.read();
	//}
	
		//grid
		var gridElement = $("#grid");
		$(window).resize(function(){
			var height = this.innerHeight
			$('#parent').height(height - 60) //60 is the height of the top content 
			gridElement.data("kendoGrid").resize();
		});
		
		grid = $("#grid").kendoGrid({
			dataBound: function(e){
							highlightRed();
							var height = $(window)[0].innerHeight
							$('#parent').height(height - 60) //60 is the height of the top content
							gridElement.data("kendoGrid").resize();
						//	grid.autoFitColumn(0);
						//	grid.autoFitColumn(13);
							
						},  
			
			editable: {	mode: "inline" },
			
			}).data("kendoGrid");
   
	});
	
	//treeview        
    var serviceRoot = "../../../HumanResource/EmployeeManagement/Designation/getTemplate.php";
	
			homogeneous = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
								id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
							}
                        },
						
						filter: { field: "module", operator: "startswith", value: "Accounting" }
                    });
					
                $("#AccountingTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true } ,
					dataSource: homogeneous,
						dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
				});
				
	
				
				
			
				homogeneous1 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Admin & System" }
					});
		
	
				$("#AdminSystemTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous1,
						dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
					
                });
			
			
				
			
				homogeneous2 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
                            }
                        },
						  
						filter: { field: "module", operator: "startswith", value: "Food & Beverage" }
                    });
					

                $("#FnBTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous2,
					dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
			
				homogeneous3 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Human Resource" }
                    });
					

                $("#HumanResourceTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous3,
					dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous4 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Inventory Management" }
                    });
					

                $("#InventoryManagementTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous4,
					dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous5 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "ehorsProgramID",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Sales & Marketing" }
                    });
					

                $("#SalesMarketingTree").kendoTreeView({
					check: onCheck,
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous5,
					dataBound: function(){
							this.expand('.k-item');
						},
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous6 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Front Office" }
                    });
					

                $("#FrontOfficeTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous6,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous7 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Guest Service System" }
                    });
					

                $("#GuestServiceSystemTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous7,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous8 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "House keeping Maintenance" }
                    });
					

                $("#HouseKeepingTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous8,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous9 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Pabx" }
                    });
					

                $("#PabxTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous9,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous10 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Point of Sales" }
                    });
					

                $("#PointSalesTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous10,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous11 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Purchasing" }
                    });
					

                $("#PurchasingTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous11,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous12 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Spa" }
                    });
					

                $("#SpaTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous12,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				homogeneous13 = new kendo.data.HierarchicalDataSource({
                        transport: {
                            read: {
                                url: serviceRoot,
                                dataType: "json"
                            }
                        },
                        schema: {
                            model: {
                                id : "module",
                                hasChildren: false,
								children : "items"
                            }
                        },
						filter: { field: "module", operator: "startswith", value: "Theme Park" }
                    });
					

                $("#ThemeParkTree").kendoTreeView({
					checkboxes: { checkChildren: true },
                    dataSource: homogeneous13,
                    dataTextField: ["module","groupname","ehorsProgramName"]
                });
				
				
function toggleCheckAll() {
			var checkButtonValue = $("#chbAll").val();

			if(checkButtonValue == "Uncheck"){
			  $("#AccountingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#FnBTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#HumanResourceTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#InventoryManagementTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#SalesMarketingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#FrontOfficeTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#GuestServiceSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#HouseKeepingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#PabxTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#PointSalesTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#PurchasingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#SpaTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#ThemeParkTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
			  $("#chbAll").val("Check");
			} else {
			  $("#AccountingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#FnBTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#HumanResourceTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#InventoryManagementTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#SalesMarketingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#FrontOfficeTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#GuestServiceSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#HouseKeepingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#PabxTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#PointSalesTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#PurchasingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#SpaTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#ThemeParkTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
			  $("#chbAll").val("Uncheck");
				
			}
}
			
	  function checkedNodeIds(nodes, checkedNodes) {
      for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
          //checkedNodes.push(nodes[i].moduleID);
         // checkedNodes.push(nodes[i].groupID);
          checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
          checkedNodeIds(nodes[i].children.view(), checkedNodes);
        }
      }
    }


    function onCheck() {
      var checkedNodes 	= [],treeView = $("#AccountingTree").data("kendoTreeView"),message;
      var checkedNodes2 = [],treeView2 = $("#AdminSystemTree").data("kendoTreeView"),message;
	  var checkedNodes3 = [],treeView3 = $("#FnBTree").data("kendoTreeView"),message;
	  var checkedNodes4 = [],treeView4 = $("#HumanResourceTree").data("kendoTreeView"),message;
	  var checkedNodes5 = [],treeView5 = $("#InventoryManagementTree").data("kendoTreeView"),message;
	  var checkedNodes6 = [],treeView6 = $("#SalesMarketingTree").data("kendoTreeView"),message;

      checkedNodeIds(treeView.dataSource.view(), checkedNodes);
      checkedNodeIds(treeView2.dataSource.view(), checkedNodes);
	  checkedNodeIds(treeView3.dataSource.view(), checkedNodes);
	  checkedNodeIds(treeView4.dataSource.view(), checkedNodes);
	  checkedNodeIds(treeView5.dataSource.view(), checkedNodes);
	  checkedNodeIds(treeView6.dataSource.view(), checkedNodes);
      if (checkedNodes.length > 0) {
      	message = "IDs of checked nodes: " + checkedNodes.filter(x => !!x).join(",");
      } else {
        message = "No nodes checked.";
      }

      $("#result").html(message);
    }
	
	$("#primaryTextButton").click(function(){
    $.post("getTemplate.php",
    {
        data1: "#result",
       // data2: //any other data
    },
    function(data, status){
        //this comes back from your server
        console.log("Data: " + data + "\nStatus: " + status);
    });
});


			
/*function send() {
   alert("Submit button clicked!");
   return true;
}
*/
	
</script>

	<style>
	* {
	  font-family:Arial, Helvetica, sans-serif;
	  font-style: normal;
	  font-size: 11px;
	  color: #fff;
	}

	#parent, #grid{
	  margin: 0;
	  padding: 0;
	  height: 100%; 
	}	
	</style>

</head>
<body onkeydown="return (event.keyCode != 116)">

	<div id="grid">
	<table style="height:auto ">
	
	<br><br>
	<label>Select Your Position : </label>
		<input id="dropdown"  style="width:200px;"/>  		
	<br><br>
	
	<div class="selectAll">
	  <input type="checkbox" id="chbAll" value="Uncheck" class="k-checkbox" onchange="toggleCheckAll()" />

	  <label class="k-checkbox-label" for="chbAll">Select All</label>
	
	<button id="primaryTextButton" value="submit"  class="k-primary" style="float:right; padding: 5px 20px; border-radius: 4px;">Submit</button>	
	
	
	<br></br>
	
	</div>
	
	<tr>
		
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="AccountingTree"></div>
       </div>
	  </td>

	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="AdminSystemTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="FnBTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="HumanResourceTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="InventoryManagementTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="SalesMarketingTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="FrontOfficeTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="GuestServiceSystemTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="HouseKeepingTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="PabxTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="PointSalesTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="PurchasingTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="SpaTree"></div>
	  </div>
	  </td>
	  
	  <td style="vertical-align:top;">
	   <div class="demo-section k-content">
	   <div id="ThemeParkTree"></div>
	  </div>
	  </td>
	  
	</tr>
	
	 <p id="result">No nodes checked.</p>
		
	</table>
    </div>
	
	

Answer 1

Вы забыли подключить кнопку отправки

$("#primaryTextButton").click(function(){
    $.post("your url",
    {
        data1: //put the selected Ids here,
        data2: //any other data
    },
    function(data, status){
        //this comes back from your server
        console.log("Data: " + data + "\nStatus: " + status);
    });
});