deleteRow und submit funktioniert nicht im FF!!!
VinceM
- javascript
Hallo,
Ich versuche ein Script zu schreiben, was E-Mail Adresse dynamisch in einer Tabelle einfuegt, bzw. loescht... Beim 'submit' werden die key/value paare gezeigt.
Beim einfuegen habe ich kein Problem, es funktioniert. Ich kann beliebige E-Mail Adresse einfuegen und dann auf submit, es geht. Aber beim loeschen, dann geht es nicht mehr im FF. Komischerweise geht es im IE... Das heisst, ich loesche ein Row von der Tabelle und wenn ich auf submit klicke, passiert nichts, keine Fehlermeldung in der FF Fehler-Konsole, nichts... Ich habe schon mehrere Loesungen ausprobiert, deleteRow, removeChild und jetzt bin ich ideenlos...
Wenn einer mir helfen kann, waere es super!
Hier der Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>THIS IS A TEST</title>
</head>
<script language="JavaScript">
<!--
// myRowObject is an object for storing information about the table rows
function myRowObject(one, two, three)
{
this.one = one; // email object
this.two = two; // button object
this.three = three; // input hidden object
}
// The following function updates the mailing list (additional receivers)
function update_mailinglist() {
document.body.style.cursor="default";
var MyForm = document.forms["MyForm"];
var address = document.forms["MyForm"]["Mail2Add"].value;
// Get the table id MailingList and add one tr and two tds
var table = document.getElementById("MailingList");
var nextRow = table.rows.length;
var iteration = nextRow + 1;
alert('AddRow: ' + nextRow);
// Add the row
var row = table.insertRow(nextRow);
// Create the delete-button
var cell0 = row.insertCell(0);
var deleteBut = document.createElement('button');
deleteBut.appendChild(document.createTextNode('DEL'));
deleteBut.onclick = function () {deleteCurrentRow(this)};
cell0.appendChild(deleteBut);
// Create text (email address)
var cell1 = row.insertCell(1);
var text = document.createTextNode(address);
cell1.style.width = "80%";
cell1.appendChild(text);
// Create the hidden input
var cell2 = row.insertCell(2);
var inpHidden = document.createElement('input');
inpHidden.setAttribute("type","hidden");
inpHidden.setAttribute("name","AddMail_" + iteration);
inpHidden.setAttribute("value",address);
cell2.appendChild(inpHidden);
// Remove entry in Mail2Add
document.getElementById("Mail2Add").value = '';
// Display the tr AddReceivers and hide the tr NoAddReceivers
document.getElementById("NoAddReceivers").style.display = 'none';
// Pass in the elements you want to reference later
// Store the myRow object in each row
row.myRow = new myRowObject(text, deleteBut, inpHidden);
// Stop the event
return false;
}
function deleteCurrentRow(obj)
{
var delRow = obj.parentNode.parentNode.rowIndex;
alert('Row: '+ delRow);
document.getElementById("MailingList").deleteRow(delRow);
}
//-->
</script>
<form action="test.pl" method="GET" name="MyForm" id="MyForm">
<fieldset>
<legend>Additional Receivers</legend>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:15%">Name:
</td>
<td style="width:30%">
<input type="text" name="Mail2Add" id="Mail2Add" size="40" value="">
</td>
<td>
<input type="button" onClick="update_mailinglist(); return false;" name="ButMail" id="ButMail" value="Add E-Mail address">
</td>
</tr>
<tr>
<td colspan="2">Added receivers
<table id="MailingList" cellpadding="0" cellspacing="0" border="0" width="100%">
</table>
</td>
<td colspan="2" style="padding-left:10px;">
<div id="ICDListMail"></div>
</td>
</tr>
</table>
<p>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr class="field">
<td align="left">
<input type="button" value="Submit" style="font:arial" onClick="document.MyForm.submit();">
</td>
</tr>
</table>
</p>
</fieldset>
</form>
</html>
======================================================================
und hier der perl Script:
#!/usr/bin/env perl
use strict;
#----------------------------------------------------------------------
my %params = &parse_query;
#----------------------------------------------------------------------
print "Content-type: text/html\n\n";
foreach (keys %params) {
print "Key: $_ --> value: $params{$_}<br>\n";
}
#----------------------------------------------------------------------
sub parse_query {
my (@pairs,%p);
if ($ENV{'REQUEST_METHOD'} eq 'GET') {
@pairs = split(/&/, $ENV{'QUERY_STRING'});
}
my $pair;
my %CHECK_ID_HASH = ();
foreach $pair (@pairs) {
my ($name, $value) = split(/=/, $pair);
$name =~ tr/+/ /;
$name =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$value =~ s/<!--(.|\n)*-->//g;
$p{$name}=$value;
}
return (%p);
}
=============================================================
Danke fuer die Hilfe,
Gruss,
VinceM.
Hi,
Das heisst, ich loesche ein Row von der Tabelle und wenn ich auf submit klicke, passiert nichts, keine Fehlermeldung in der FF Fehler-Konsole, nichts...
tja, ich muss sagen, dass ich ebenfalls etwas verwirrt bin. Bitte validiere zunächst den Code und entferne den Fehler:
Error: document.getElementById("NoAddReceivers") has no properties
Source File: http://localhost/test/delrow.html
Line: 58
Unabhängig davon: Wenn Du aus dem Button einen Submit-Button machst, funktioniert es.
Cheatah
Hi,
Vielen Dank, mindestens laeuft es jetzt...:-)
VinceM
Unabhängig davon: Wenn Du aus dem Button einen Submit-Button machst, funktioniert es.
Wenn ich aus dem button einen submit-button mache, dann wird die Form immer geschickt, egal ob die if schleife mit true oder false zurueckkommt...
<input type="submit" value="Submit" onClick="if (CheckInput()) document.GeneralForm.submit();">
--> schickt die Form immer.
<input type="button" value="Submit" onClick="if (CheckInput()) document.GeneralForm.submit();">
--> schickt die Form nur wenn CheckInput() mit true zurueckkommt.
Wieso das?
Gruss,
VinceM.
Hi,
Wenn ich aus dem button einen submit-button mache, dann wird die Form immer geschickt, egal ob die if schleife mit true oder false zurueckkommt...
das kannst Du spätestens onsubmit handhaben.
<input type="submit" value="Submit" onClick="if (CheckInput()) document.GeneralForm.submit();">
--> schickt die Form immer.
Natürlich, Du unterbindest ja auch nicht die Funktion eines Submit-Buttons, sondern tust ggf. das, was er selbst bereits kann.
<input type="button" value="Submit" onClick="if (CheckInput()) document.GeneralForm.submit();">
--> schickt die Form nur wenn CheckInput() mit true zurueckkommt.
Wieso das?
Weil ein type="button" das Formular nicht abschickt. Ein type="submit" tut dies - auch ohne einen zusätzlichen Aufruf der submit()-Methode des Formulars. Gib einfach die Rückgabe Deiner CheckInput()-Funktion[1] aus dem Event-Handler zurück.
Cheatah
[1] Btw: Die üblichen Nomenklaturen sehen mit Großbuchstaben beginnende Bezeichner für Klassen vor, nicht für Funktionen.
Gib einfach die Rückgabe Deiner CheckInput()-Funktion[1] aus dem Event-Handler zurück.
Wie meinst Du das genau, wie wuerde es im Code ausschauen? Ich habe bei der Form Definition ein onSubmit="checkInput();" eingefuegt, es wird aber trotzdem geschickt...
Vielen Dank fuer die Muehe!
Gruss,
VinceM.
hi,
Gib einfach die Rückgabe Deiner CheckInput()-Funktion[1] aus dem Event-Handler zurück.
Wie meinst Du das genau, wie wuerde es im Code ausschauen? Ich habe bei der Form Definition ein onSubmit="checkInput();" eingefuegt, es wird aber trotzdem geschickt...
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit
gruß,
wahsaga