Adding and deleting table rows works now. Also there is error checing for entered values.
This commit is contained in:
		
							parent
							
								
									6840a0d0c3
								
							
						
					
					
						commit
						7e252ae4e5
					
				
							
								
								
									
										4
									
								
								ka.html
								
								
								
								
							
							
						
						
									
										4
									
								
								ka.html
								
								
								
								
							|  | @ -162,8 +162,10 @@ | |||
| 
 | ||||
| 		<div class="is-row"> | ||||
| 		<div class="is-col is-70"> | ||||
| 			<fieldset> | ||||
| 			<fieldset id="fieldset2"> | ||||
| 				<legend>2. Erfasse deine Ausgaben</legend> | ||||
| 
 | ||||
| 
 | ||||
| 				<div class="is-row"> | ||||
| 					<div class="is-col is-70"> | ||||
| 						<div class="is-row"> | ||||
|  |  | |||
							
								
								
									
										121
									
								
								kaform.js
								
								
								
								
							
							
						
						
									
										121
									
								
								kaform.js
								
								
								
								
							|  | @ -1,9 +1,6 @@ | |||
| 
 | ||||
| var nextRowId=1; | ||||
| var currentRowId=1; | ||||
| 
 | ||||
| function getNextRowId() { | ||||
| 	return nextRowId; | ||||
| } | ||||
| 
 | ||||
| function renumberTableRows(){ | ||||
|     var row_no=1; | ||||
|  | @ -13,15 +10,32 @@ function renumberTableRows(){ | |||
|     } | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| function isFloat(val) { | ||||
|     var floatRegex = /^-?\d+(?:[.,]\d*?)?$/; | ||||
|     if (!floatRegex.test(val)) | ||||
|         return false; | ||||
| 
 | ||||
|     val = parseFloat(val); | ||||
|     if (isNaN(val)) | ||||
|         return false; | ||||
|     return true; | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| function deleteTableRow(rowId){ | ||||
| 
 | ||||
| 	alert (rowId); | ||||
|     var target = document.getElementById("upload-target"+rowId); | ||||
|     var children = target.children; | ||||
| //            this.message = app.message;    
 | ||||
|    var children = target.children; | ||||
| 
 | ||||
|     // delete all uploaded elements
 | ||||
|     for (var i = 0; i < children.length; i++) { | ||||
| /*    for (var i = 0; i < children.length; i++) { | ||||
| 	var tmp = children[i].getAttribute("data-id"); | ||||
| 	    alert ("DEL"); | ||||
| 	    alert (tmp); | ||||
| 	$K.ajax.post({ | ||||
| 	    url: 'delete.php', | ||||
| 	    data: 'id='+tmp, | ||||
|  | @ -30,29 +44,91 @@ function deleteTableRow(rowId){ | |||
| 	    error: function(response) {} | ||||
| 	}); | ||||
|     } | ||||
|      | ||||
|   */   | ||||
| 
 | ||||
|     // delete the row from table
 | ||||
|     var element = document.getElementById("trow"+rowId); | ||||
| 
 | ||||
|     element.parentNode.removeChild(element); | ||||
|     renumberTableRows(); | ||||
| //    alert(rowId);
 | ||||
|      | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| function showAlert(text) { | ||||
| 
 | ||||
| 	$K.app.message.show( { message: `${text}`, position: 'centered', type: 'is-error' }); | ||||
| 	return; | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
| function reset2() | ||||
| { | ||||
| 	document.getElementById("a_type").value=""; | ||||
| 	document.getElementById("a_description").value=""; | ||||
| 	document.getElementById("a_amount").value=""; | ||||
| 	setUploadField(); | ||||
| 
 | ||||
| } | ||||
| 
 | ||||
| function addTableRow(){ | ||||
| 
 | ||||
|     var $node = $K.dom('#tabbody'); | ||||
|     // create a new table row with id
 | ||||
|     var element = document.createElement('tr'); | ||||
|     element.setAttribute("id", "trow"+nextRowId); | ||||
| 	var $node = $K.dom('#tabbody'); | ||||
| 	// create a new table row with id
 | ||||
| 	var element = document.createElement('tr'); | ||||
| 	element.setAttribute("id", "trow"+currentRowId); | ||||
| 
 | ||||
| 
 | ||||
| 	var a_type = document.getElementById("a_type").value; | ||||
| 	if (!a_type.trim().length ) { | ||||
| 		document.getElementById("a_type").focus(); | ||||
| 		showAlert("Bitte gib eine Auslagenart an!"); | ||||
| 		return; | ||||
| 	} | ||||
| 
 | ||||
| 	var a_date = document.getElementById("a_date").value;  | ||||
| 	if (!a_date.trim().length){ | ||||
| 		document.getElementById("a_date").focus(); | ||||
| 		showAlert("Bitte gib ein gültiges Datum an!"); | ||||
| 		return; | ||||
| 	} | ||||
| 
 | ||||
| 
 | ||||
| 	var a_description = document.getElementById("a_description").value;  | ||||
| 	if (!a_description.trim().length){ | ||||
| 		document.getElementById("a_description").focus(); | ||||
| 		showAlert("Bitte gib eine Beschreibung ein!"); | ||||
| 		return; | ||||
| 	} | ||||
| 
 | ||||
| 	var a_amount = document.getElementById("a_amount").value;  | ||||
| 	if (!isFloat(a_amount)){ | ||||
| 		document.getElementById("a_amount").focus();  | ||||
| 		showAlert("Bitte gib einen gültigen Betrag ein!"); | ||||
| 		return; | ||||
| 	} | ||||
| 		 | ||||
| 
 | ||||
| 	var a_currency = document.getElementById("a_currency").value;  | ||||
| 	if (!a_currency.trim().length){ | ||||
| 		document.getElementById("a_currency").focus(); | ||||
| 		showAlert("Bitte gib eine Währung an!"); | ||||
| 		return; | ||||
| 	} | ||||
| 
 | ||||
| 	var target = document.getElementById("upload-target"+currentRowId); | ||||
|    	var children = target.children; | ||||
| 
 | ||||
| 	if (!children.length){ | ||||
| 		showAlert("Bitte lade mindestens einen Beleg hoch!"); | ||||
| 		return; | ||||
| 	} | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| /*	a_type = "Hello";*/ | ||||
| 
 | ||||
|  | @ -93,15 +169,16 @@ function addTableRow(){ | |||
|     // add delete bnutton
 | ||||
|     e += | ||||
| 	`<td><span
 | ||||
|     onclick="deleteTableRow(${nextRowId})" | ||||
|     onclick="deleteTableRow(${currentRowId})" | ||||
|     class="close is-large"> | ||||
| 	</span></td>`; | ||||
|      | ||||
|      | ||||
|     $node.append(element); | ||||
|     element.innerHTML=(e); | ||||
|     renumberTableRows(); | ||||
|     nextRowId++; | ||||
| //    renumberTableRows();
 | ||||
|     currentRowId++; | ||||
| 	reset2(); | ||||
| } | ||||
| 
 | ||||
| 
 | ||||
|  | @ -111,15 +188,12 @@ function setUploadField() | |||
| 	var uf =`<div class="upload"
 | ||||
| 		data-kube="upload" | ||||
| 		data-type="file" data-multiple="true" | ||||
| 		data-target="#upload-target${nextRowId}" | ||||
| 		data-url="upload.php?row=${nextRowId}" data-url-remove="delete.php" | ||||
| 		data-target="#upload-target${currentRowId}" | ||||
| 		data-url="upload.php?row=${currentRowId}" data-url-remove="delete.php" | ||||
| 		data-progress="true">Beleg hochladen  | ||||
| 		</div> | ||||
| 		<div id="upload-target${nextRowId}" class="upload-target small"></div> | ||||
| 		<div id="upload-target${currentRowId}" class="upload-target small"></div> | ||||
| 		</div> | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 		`;
 | ||||
| 	document.getElementById("uploadfield").innerHTML=uf;  | ||||
| } | ||||
|  | @ -128,6 +202,7 @@ $K.add('module', 'kaform', { | |||
| 	init: function(app, context) | ||||
|         { | ||||
|             this.app = app; | ||||
|             this.message = app.message;		 | ||||
|         }, | ||||
| 	// catch event
 | ||||
|         onmessage: { | ||||
|  | @ -135,7 +210,8 @@ $K.add('module', 'kaform', { | |||
|                 opened: function(sender) | ||||
|                 { | ||||
|                     console.log('Tab box is ',sender.getActiveBox()); | ||||
|                 } | ||||
| 		  this.message.show({ message: 'My message' }); | ||||
| 		} | ||||
|             } | ||||
|         }, | ||||
| 	 | ||||
|  | @ -164,5 +240,6 @@ setUploadField(); | |||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| 
 | ||||
| // add on table row
 | ||||
| //addTableRow();
 | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue