Values aus input-Felder von Tabelle holen für json Array

Blueplanet · 08. Feb. 2015

Hallo miteinander,

ich bin ganz neu hier und neu mit JS. Deshalb habe ich eine Newbie Frage. Ich habe ein Tutorial gefunden, was das machen sollte, was ich brauche, aber es geht nicht. Ich versuche von der Tabelle unten die Values aus den Input-Felder zu sammeln, um sie in ein Array ein zu fügen.

Hier mein Code der nix tut und mit der Tabelle:

Code:

<script>
var TableData;
TableData = storeTblValues()
TableData = $.toJSON(TableData);

function validate_form ( ) { 

    var TableData = new Array();

    $('#siteartefacts tr').each(function(row, tr){
        TableData[row]={
            "SiteArtefact" : $(tr).find('input:eq(1)').value();
        }    
    }); 

    return TableData;



}
</script>

HTML:

 <table id="siteartefacts" style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1">
	<tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Test 1"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Test 2"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Test 3"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Test 4"></td>
    </tr>
</table>

Mephiztopheles · 08. Feb. 2015

Zuerst einmal... wird das Script so nicht funktionieren. Wenn ich mich nicht irre, sollte in der Console sowas stehen wie undefined value "u".

So sollte es klappen:

Code:

<script>
var TableData;
TableData = $.toJSON(validate_form());

function validate_form ( ) { 

    var obj= {};

    $('#siteartefacts tr').each(function(i, tr){
        obj[i]={
            checkbox: $(tr).find('input[type=checkbox]').prop('checked'),
            text: $(tr).find('input[type=text]').value()
        }    
    }); 

    return obj;



}
</script>

Dazu musst du noch jQuery in deine Seite einbinden, aber darauf baut deine Funktion ja auf, also hast du es sicher schon getan.
Wenn nicht.. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
In dem tableData findest du dann ein Object mit durchnummerierten Keys und einem Object als value mit den Werten checkbox (true/false) und ein text mit dem eingetragenen Wert als value.

Blueplanet · 09. Feb. 2015

Hallo Memphiz,
danke für Deine Hilfe, aber leider tut sich da immer noch nichts.

... es kommt nicht mal etwas bei console.log. funktioniert das denn bei Dir?

gform · 09. Feb. 2015

Ersetz .value() mit .val().
Und den Sinn von $.toJSON erschließt sich mir auch nicht ganz, kann man eig. weglassen.

Blueplanet · 09. Feb. 2015

Hallo, danke, leider funkt es immer noch nix

ich habe nun mal die ganze Seite in code block eingefügt

Code:

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editing Site</title>


<script src="jquery.json-2.4.min.js"></script>
<script src="jquery-1.11.2.min.js"></script>


<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
}
-->
</style>




</head>

<body style="font-family: Arial;">

 



 <script language="javascript">
 function addRow(tableID)
 {var table=document.getElementById(tableID);
		var rowCount=table.rows.length;
		var row=table.insertRow(rowCount);
		var colCount=table.rows[0].cells.length;
		for(var i=0;i<colCount;i++)
		{var newcell=row.insertCell(i);
		newcell.innerHTML=table.rows[1].cells[i].innerHTML;
		switch(newcell.childNodes[0].type)
		{case"text":newcell.childNodes[0].value="";
		break;
		case"checkbox":newcell.childNodes[0].checked=false;
		break;
		case"select-one":newcell.childNodes[0].selectedIndex=0;
		break;}}}
		
	
function deleteRow(tableID)
	{try
		{var table=document.getElementById(tableID);
			var rowCount=table.rows.length;
			for(var i=0;i<rowCount;i++)
				{var row=table.rows[i];
				var chkbox=row.cells[0].childNodes[0];
				if(null!=chkbox&&true==chkbox.checked)
					{if(rowCount<=1)
						{alert("Cannot delete all the rows.");
						break;
						}
					table.deleteRow(i);
					rowCount--;
					i--;
				}
			}
		}catch(e){alert(e);}
	}
	
</script>
 
 
<table style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1"> 
	<tbody>
          <tr>
            <td style="width: 15%;">facts</td>
            <td width="88%"><input value="Add Row" onclick="addRow('siteartefacts')" type="button"><input value="Delete Row" onclick="deleteRow('siteartefacts')" type="button"></td>
          </tr>
    </tbody>
</table>



<script>
var TableData;
TableData = $.toJSON(validate_form());

function validate_form ( ) { 

    var obj= {};

    $('#siteartefacts tr').each(function(i, tr){
        obj[i]={
            checkbox: $(tr).find('input[type=checkbox]').prop('checked'),
            text: $(tr).find('input[type=text]').val()
        }    
    }); 

    return obj;



}
</script>


 <form id="form" name="form" method="post" action="page_edit_parse_test.php" onsubmit="return validate_form ( );">
 
 <table id="siteartefacts" style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1"><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Anomalien"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Sehr"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Astro"></td>
    </tr><tr align="left">
	<td style="width: 15%;"><input name="chk" type="checkbox"></td>
	<td width="88%" align="left"><input name="txt" size="132" type="text" value="Steinbearbeitung"></td>
    </tr></table> 
 
 
 
<table style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1"> 
	<tbody>
          <tr>
            <td style="width: 15%;"></td>
            <td width="88%"><input name="SiteNameID" type="hidden" value="1" /><input name="button" id="button" value="Submit Site Edit" type="submit" /></br></br></br>
			<button id="testbutton" onclick="validate_form ( )" type="button">Click4Test</button>
			</form></td>
          </tr>
    </tbody>
</table>
 



      

</body>
</html>

gform · 09. Feb. 2015

Du bindest die beiden Skripte in falscher Reihenfolge ein. Dann solltest du auch gänzlich auf Inline-JS verzichten, du rufst so nämlich Funktionen auf, die zu der Zeit noch nicht existieren.

Zusätzlich ist dein HTML nicht valide und auch ziemlich schlecht formatiert, da hat man doch kaum Überblick und es schleichen sich leicht Fehler ein.

Blueplanet · 09. Feb. 2015

^^okay, welche beiden Scripte sind in falscher Reihenfolge und was meinst Du mit Inline-JS? Ich habe keine Ahnung sry...

- - - Aktualisiert - - -

bzw. wie müsste es aussehen, abgesehen vom schlecht formattierten HTML?

gform · 09. Feb. 2015

Blueplanet schrieb:
^^okay, welche beiden Scripte sind in falscher Reihenfolge

Die beiden jQuery-Dateien, die du im head eingebunden hast. Die sind in falscher Reihenfolge, es muss erst das jQuery kommen, dann die andere Datei.

Blueplanet schrieb:
und was meinst Du mit Inline-JS? Ich habe keine Ahnung sry...

Z.B. sowas: onclick="validate_form ( )". Das gehört in den JavaScript, nicht in den HTML-Elementen. Mit jQuery geht es doch besonders einfach.

Blueplanet schrieb:
bzw. wie müsste es aussehen, abgesehen vom schlecht formattierten HTML?

Du schließt form mitten in der Tabelle, statt danach.

Blueplanet · 09. Feb. 2015

herzlichen Dank ich check das mal ab! Ich bin eben noch ein Grünschnabel

gform · 09. Feb. 2015

Hab es mal überarbeitet, jetzt geht es.

Code:

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>Editing Site</title>

    <style>
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
    }
    </style>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="jquery.json-2.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#addBtn").click(function () {
                var table = document.getElementById("siteartefacts"),
                    row = table.insertRow(table.rows.length);
                    
                for (var i = 0; i < table.rows[0].cells.length; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                    
                    switch (newcell.childNodes[0].type) {
                        case "text":
                            newcell.childNodes[0].value = "";
                            break;
                        case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                        case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                    }
                }
            });
            
            $("#deleteBtn").click(function () {
                var table = document.getElementById("siteartefacts"),
                    rowCount = table.rows.length;
                
                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i],
                        chkbox = row.cells[0].childNodes[0];

                    if (null != chkbox && true == chkbox.checked) {
                        if (rowCount <= 1) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
            });
            
            $("#form").submit(function () {
                var tableData = $.toJSON(validate_form());
                
                return false;
            });
            
            $("#testbutton").click(function () {
                var tableData = $.toJSON(validate_form());
                
            });
            
            function validate_form() {
                var obj = {};

                $('#siteartefacts tr').each(function(i, tr) {
                    obj[i] = {
                        checkbox: $(tr).find('input[type=checkbox]').prop('checked'),
                        text: $(tr).find('input[type=text]').val()
                    }
                });

                return obj;
            }
        });
    </script>
</head>

<body style="font-family: Arial;">
 
    <table style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1"> 
        <tbody>
              <tr>
                <td style="width: 15%;">facts</td>
                <td width="88%"><input id="addBtn" value="Add Row" type="button"><input id="deleteBtn" value="Delete Row" type="button"></td>
              </tr>
        </tbody>
    </table>

    <form id="form" name="form" method="post" action="page_edit_parse_test.php">
        <table id="siteartefacts" style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1">
            <tr align="left">
                <td style="width: 15%;"><input name="chk" type="checkbox"></td>
                <td width="88%" align="left"><input name="txt" size="132" type="text" value="Anomalien"></td>
            </tr>
            <tr align="left">
                <td style="width: 15%;"><input name="chk" type="checkbox"></td>
                <td width="88%" align="left"><input name="txt" size="132" type="text" value="Sehr"></td>
            </tr>
            <tr align="left">
                <td style="width: 15%;"><input name="chk" type="checkbox"></td>
                <td width="88%" align="left"><input name="txt" size="132" type="text" value="Astro"></td>
            </tr>
            <tr align="left">
                <td style="width: 15%;"><input name="chk" type="checkbox"></td>
                <td width="88%" align="left"><input name="txt" size="132" type="text" value="Steinbearbeitung"></td>
            </tr>
        </table> 
     
     
     
        <table style="background-color: rgb(13, 128, 164); width: 1000px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="1"> 
            <tbody>
                  <tr>
                    <td style="width: 15%;"></td>
                    <td width="88%"><input name="SiteNameID" type="hidden" value="1" /><input name="button" id="button" value="Submit Site Edit" type="submit" /></br></br></br>
                    <button id="testbutton" type="button">Click4Test</button>
                    </td>
                  </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

Du solltest noch unbedingt das Inline-CSS sein lassen, ist einerseits schlechter Stil, anderereits wird es unnötig unübersichtlich, besonders für Anfänger.

Blueplanet · 09. Feb. 2015

hey supa, jetzt sehe ich wie es sogar richtig professionell aussehen soll. DANKE.

Values aus input-Felder von Tabelle holen für json Array

Blueplanet

New member

Mephiztopheles

New member

Blueplanet

New member

gform

Guest

Blueplanet

New member

gform

Guest

Blueplanet

New member

gform

Guest

Blueplanet

New member

gform

Guest

Blueplanet

New member