[javascript+html] form-post lukt niet - Softwareontwikkeling

dinsdag 2 september 2008 13:00

Acties:

Topicstarter

code:

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script language="javascript">
function change(idnow, idnewer, idchange, idok)
{
    $(idnow).innerHTML = $(idnewer).innerHTML;
    $(idchange).innerHTML = $(idok).innerHTML;
}
</script>

</head>

<body bgcolor="#99FF33">

<?php
$sql = "select users.username as username, users.password as password, users_detail.naam as naam, users_detail.voornaam as voornaam, users_detail.mail as mail  
        from users, users_detail
        WHERE users.ID = users_detail.ID
        AND users.ID = '". $_SESSION['user_ID'] ."'";
$result = mysql_query($sql);
$usergegevens = mysql_fetch_array($result);

?>

<table border="1" width="60%" align="left">
<tr><td>Uw gegevens : </td></tr>
<form name="form_name" method="post" action="<?php $_SERVER['PHP_SELF'] ?>">
<tr><td width="25%"><?php echo "naam : </td><td id='name_now' width='55%'>".$usergegevens['naam']; ?></td>
<td id='name_newer' width='55%'><input type="text" maxlength="35" size="10" name="name_input"></td>
<td id="change_button1" width="20%"><input type="button" value="Change" onclick="change('name_now','name_newer','change_button1','ok_button1')"></td>
<td id="ok_button1" width="20%"><input type="submit" name="name_submit" value="OK"></td>
</form>

Wanneer men op de change-knop klikt, dan verschijnt er een text-input + OK-knop.
Bij druk op de OK-knop wordt het formulier gePOST.

Echter, na een druk op de OK-knop gebeurd er niks...
Normaal gezien zou de pagina zich moeten verversen en er wordt aan het begin van de pagina getest of er een POST is gebeurd voor dynamische opbouw van de pagina...
Maar dus : de OK-knop doet niks.
Ik zie niet meteen de fout...

[ Voor 8% gewijzigd door jonaskellens op 02-09-2008 13:03 ]

dinsdag 2 september 2008 14:04

Acties:

reddevil

Misschien makkelijker als je de gegenereerde code laat zien ipv de php code. Waarschijnlijk zie je dan snel zelf ook de fout.

dinsdag 2 september 2008 15:00

Acties:

André

Analytics dude

Ik vermoedt dat de action leeg is

dinsdag 2 september 2008 15:30

Acties:

jonaskellens

Topicstarter

Een print_r($_POST) toont aan dat er niks van POST doorkomt want de array is leeg...
We zitten hier met 2 te proberen en het lukt niet... zeer raar.

Momenteel aan het proberen via onclick=location.href en op deze manier argumenten doorgeven in de url, zoals een GET. En het formulier jammer genoeg volledig overboord moeten gooien...

Ik heb nu ten minste al een $GET-array met mijn elementen erin en hun waarden, maar het updaten van de database... gaat em nog effe wat moeilijk doen.

Zeer raar dat de POST het laat afweten...

Ik werk met firefox3. Wanneer ik de website lanceer met IE7 dan wordt de pagina bij een klik op de OK-knop wel herladen, maar toch komt er ook niks door in de POST-array...

Doet me vermoeden dat de fout op het niveau van het formulier ligt, ergens in mijn naamgeving of id-tags... ma het is niet mijn eerste formulier en alles werkt tot nogtoe... behalve dus op deze ene pagina.

dinsdag 2 september 2008 15:32

Acties:

jonaskellens

Topicstarter

André schreef op dinsdag 02 september 2008 @ 15:00:
Ik vermoedt dat de action leeg is

action="<?php $_SERVER['PHP_SELF'] ?>"
--> pagina roept gewoon zichzelf aan
Ben zelfs niet verplicht ook maar iets te zetten tussen de ""-quotes, dit gebeurd by default.

dinsdag 2 september 2008 15:56

Acties:

reddevil

Daarom zeg ik: view source!

En daarom zegt André: volgens mij is de action leeg

PS. Via get is eng

edit:
We proberen je te helpen en aan te geven hoe je iets zelf kan oplossen.... doe't gewoon is ipv (indirect) aan te geven dat wij fout zitten

[ Voor 53% gewijzigd door reddevil op 02-09-2008 15:57 ]

dinsdag 2 september 2008 20:38

Acties:

jonaskellens

Topicstarter

code:

if (isset($_POST['okbutton1']))
{
    echo "test€";
    $sql_statement = "UPDATE users_detail
                    SET naam = '".$_POST['naam_input'].
                    "' WHERE ID = '".$_SESSION['user_ID']."'";
    mysql_query($sql_statement);
    $rijen = mysql_affected_rows($db);
    echo "rijen : ". $rijen;
}
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Area</title>

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous/src/effects.js" type="text/javascript"></script>
<script language="javascript">
function change(idnow, idnewer, idchange, idok)
{
    $(idnow).innerHTML = $(idnewer).innerHTML;
    $(idchange).innerHTML = $(idok).innerHTML;
}
</script>

</head>

<body bgcolor="#99FF33">

<?php
$sql = "SELECT users.username as username, users.password as password, users_detail.naam as naam, users_detail.voornaam as voornaam, users_detail.mail as mail  
        FROM users, users_detail
        WHERE users.ID = users_detail.ID
        AND users.ID = '". $_SESSION['user_ID'] ."'";
$result = mysql_query($sql);
$usergegevens = mysql_fetch_array($result);

?>
<table border="1" width="100%" align="center">
<tr><td>&nbsp;</td></tr>
</table>
<table border="1" width="60%" align="left">
<tr><td colspan="2">Uw gegevens : </td></tr>
<tr><td width="20%">naam : </td>
<td id="huidige_naam" width="60%"><?php echo "".$usergegevens['naam']; ?></td>
<form id="naam_form" method="post" action="<?php $_SERVER['PHP_SELF']; ?>"
<td id="nieuwe_naam" width="60%"><input type="text" id="naam_input" size="10" maxlength="35"></td>
<td id="changebutton1" width="20%"><input type="button" id="changebutton1" value="Change" onClick="change('huidige_naam','nieuwe_naam','changebutton1','okbutton1')"></td>
<td id="okbutton1" width="20%"><input type="submit" id="okbutton1" value="OK"></form></td></tr>
</table>

<?php
echo "<script>";
echo "Element.hide('nieuwe_naam');";
echo "Element.hide('okbutton1');";
echo "";
echo "</script>";
?>

Output verkregen via Firebug :

code:

<body bgcolor="#99ff33">
<table border="1" align="center" width="100%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table border="1" align="left" width="60%">
<tbody>
<tr>
<td colspan="2">Uw gegevens : </td>
</tr>
<tr>
<td width="20%">naam : </td>
<td id="huidige_naam" width="60%">kellens</td>
<form id="naam_form" action="" method="post"/>
<td id="nieuwe_naam" width="60%" style="display: none;">
<input id="naam_input" type="text" maxlength="35" size="10"/>
</td>
<td id="changebutton1" width="20%">
<input id="changebutton1" type="button" onclick="change('huidige_naam','nieuwe_naam','changebutton1','okbutton1')" value="Change"/>
</td>
<td id="okbutton1" width="20%">
<input id="okbutton1" type="submit" value="OK"/>
</td>
</tr>
</tbody>
</table>
<script>
1Element.hide('nieuwe_naam');
</script>
</body>
</html>

Het gedeelte 'action' is inderdaad leeg !
(ik zou niet durven zeggen dat jullie ernaast zitten, ik denk gewoon al te vaak dat ik TOCH juist zit :-))

Hoe komt het volgens jullie dan dat action leeg is ?
Is dat dan niet die default output dat de php-motor gebruikt voor het aanmaken van de html-pagina ??

dinsdag 2 september 2008 20:40

Acties:

Noork

PHP:

1	<?php $_SERVER['PHP_SELF'] ?>

Lees bovenstaande code nog eens goed door. Wat doet het precies?

dinsdag 2 september 2008 21:01

Acties:

crisp

Devver

Pixelated

SQL:

1	$(idnow).innerHTML = $(idnewer).innerHTML;

vervangt

HTML:

kellens

in je source door

HTML:

1	<input id="naam_input" type="text" maxlength="35" size="10"/>

sofar so good, maar je hebt nu 2 dezelfde inputs in je formulier. Uiteindelijk zal de laatste in je POST meegestuurd worden, als die tenminste een name attribuut zou hebben

En dan:

HTML:

1 2	<td id="changebutton1" width="20%"> <input id="changebutton1" type="button" onclick="change('huidige_naam','nieuwe_naam','changebutton1','okbutton1')" value="Change"/>

ik zie hier dubbel (changebutton1)

Mijn advies: doe niet zo moeilijk met javascript (waardoor je je formulier alleen maar ontoegankelijker maakt). Waarom moet die input initieel verborgen zijn?

[ Voor 11% gewijzigd door crisp op 02-09-2008 21:04 ]

Intentionally left blank

dinsdag 2 september 2008 21:06

Acties:

jonaskellens

Topicstarter

<form id="naam_form" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">

wat deze doet is de huidige pagina herladen. Dus er worden gegevens naar de php-server verzonden, dewelke de nieuwe html-pagina opbouwt met de nieuwe gegevens en deze verzend naar de client(browser).

Wat is er hier mis mee ? Ik gebruik eenzelfde methode op andere pagina's zonder enig probleem...
Oa op een pagina om een username + paswoord op te vragen door een geldig mail-adres mee te geven (the usual dus). Dat is ook een formulier met POST-method waarbij de eigen url aangeroepen wordt en alles verwerkt wordt aan het begin van de pagina.

dinsdag 2 september 2008 21:08

Acties:

Noork

jonaskellens schreef op dinsdag 02 september 2008 @ 21:06:
Wat is er hier mis mee ? [blabla]

Ik doel op dit stukje:

PHP:

1	<?php $_SERVER['PHP_SELF'] ?>

Vergelijk eens hiermee:

PHP:

1	<?=$_SERVER['PHP_SELF']; ?>

PHP:

1	<? echo $_SERVER['PHP_SELF']; ?>

dinsdag 2 september 2008 21:14

Acties:

jonaskellens

Topicstarter

@ crisp :

Eerste deel van je uitleg : ik zie mijn fout in en het dubbele gebruik van dezelfde id voor verschillende <td>'s...

Mijn advies: doe niet zo moeilijk met javascript (waardoor je je formulier alleen maar ontoegankelijker maakt). Waarom moet die input initieel verborgen zijn?

Wat ik presenteer op de webpagina is een formulier (tabel) met alle gegevens en per lijn (row) een knop 'change' om die gegevens te veranderen. Wanneer daarop geklikt wordt, moet zonder herladen de inhoud van die cel veranderen. (ik weet dat ajax bestaat enzo, maar kan dat nu niet gebruiken) In de veranderde inhoud kunnen nieuwe gegevens geput worden en deze worden door een nieuw verschenen knop 'OK' (ipv de knop 'change') verzonden worden om de database-gegevens aan te passen.

Om dit te doen heb ik toch javascript nodig hé ?!

In een eerdere versie maakte ik gebruik van het prototype-framework, en van zaken als element.fade()...

Nieuwe versie :

code:

<script language="javascript">
function change(idnow, idchange)
{
    $(idnow).innerHTML = "<input type=\"text\" id=\"naam_input\" size=\"10\" maxlength=\"35\">";
    $(idchange).innerHTML = "<input type=\"submit\" id=\"okbutton1\" value=\"OK\">";
}
</script>

</head>

<body bgcolor="#99FF33">

<?php
$sql = "SELECT users.username as username, users.password as password, users_detail.naam as naam, users_detail.voornaam as voornaam, users_detail.mail as mail  
        FROM users, users_detail
        WHERE users.ID = users_detail.ID
        AND users.ID = '". $_SESSION['user_ID'] ."'";
$result = mysql_query($sql);
$usergegevens = mysql_fetch_array($result);
$rijen = mysql_num_rows($result);

?>
<table border="1" width="100%" align="center">
<tr><td>&nbsp;</td></tr>
</table>
<table border="1" width="60%" align="left">
<tr><td colspan="2">Uw gegevens : </td></tr>
<tr><td width="20%">naam : </td>
<td id="huidige_naam" width="60%"><?php echo "".$usergegevens['naam']; ?></td>
<form id="naam_form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<td id="changebutton1" width="20%"><input type="button" id="changebutton1" value="Change" onClick="change('huidige_naam','changebutton1')"></td></tr>
</form>
</table>

Maar nog steeds doet de OK-knop niks...

[ Voor 40% gewijzigd door jonaskellens op 02-09-2008 21:29 ]

dinsdag 2 september 2008 21:42

Acties:

Noork

Je gebruikt nu dus geen Prototype meer.... maar je maakt nog wel gebruik van de $ selector?
Doe eens document.getElementById(idnow) ipv $(idnow)

Overigens raad ik je aan eens in de error console van de browser (Firefox of Opera) te kijken. Hier vind je gedetailleerde foutmeldingen. En hiernaast is het handig om Firebug onder Firefox te gebruiken. Hiermee kun je ook zien welke waarden er gepost worden etc.

dinsdag 2 september 2008 21:46

Acties:

jonaskellens

Topicstarter

Firebug kan me op dit moment niks vertellen want er gebeurd geen post, dat is een groot probleem voor mij. Als ik op de knop druk die de 'submit' zou moeten uitvoeren, gebeurd er niks...

Wat firebug ziet :
[html]
<tr>
<td colspan="2">Uw gegevens : </td>
</tr>
<tr>
<td width="20%">naam : </td>
<form id="naam_form" action="" method="post"/>
<td id="huidige_naam" width="60%">
<input type="text" maxlength="35" size="10" name="naam_input"/>
</td>
<td id="changebutton1" width="20%">
<input type="submit" value="OK" name="okbutton1"/>
</td>
</tr>
[/html]

En verder kan ik niet zien, want een druk op de knop 'ok' doet gewoon niks...

code:

function change(idnow, idchange)
{
    $(idnow).innerHTML = "<input type=\"text\" name=\"naam_input\" size=\"10\" maxlength=\"35\">";
    $(idchange).innerHTML = "<input type=\"submit\" name=\"okbutton1\" value=\"OK\">";
}
</script>

Zou de string die ik toeken aan $(idchange).innerHTML zijn functie verliezen ?? Wordt dit gewoon aanzien als een string of is er wel degelijk een knop met een submit-functie ??

[ Voor 31% gewijzigd door jonaskellens op 02-09-2008 21:50 ]

dinsdag 2 september 2008 21:53

Acties:

crisp

Devver

Pixelated

Dat is sowieso invalide HTML; de plek van je <form> element is ongeldig en ik zie nergens een </form>

Verder heb ik het idee dat je verschillende versies loopt te posten, in je serverside code zie ik de name="name_input" bijvoorbeeld niet terug en in je clientside output ineens wel

Verder zie ik niet in waarom je niet gewoon dit kan doen:

code:

1 2	Huidige naam: Hetty Wijzig naam: <input> <button Wijzig>

waarom zou die input niet initieel zichbaar mogen zijn? Eventueel kan je daar later unobtrusive wel een andere behaviour aan toe kennen, maar begin in hemelsnaam eerst met gewoon een HTML-versie die zonder javascript ook werkt...

Intentionally left blank

dinsdag 2 september 2008 21:54

Acties:

Noork

jonaskellens schreef op dinsdag 02 september 2008 @ 21:46:
Zou de string die ik toeken aan $(idchange).innerHTML zijn functie verliezen ?? Wordt dit gewoon aanzien als een string of is er wel degelijk een knop met een submit-functie ??

Gast, dit is echt een kwestie van debuggen. Je kan alles (inhoud van variabelen) naar het scherm wegschrijven met b.v. document.write of alert.

Zie nog even mijn vorige post: gebruik je nu nog Prototype of niet? Zo niet, kun je geen gebruik maken van de $ selector.

woensdag 3 september 2008 08:34

Acties:

reddevil

BTW: kijk nooit naar de output van firebug... kijk naar view source

vrijdag 5 september 2008 15:53

Acties:

Cartman!

reddevil schreef op woensdag 03 september 2008 @ 08:34:
BTW: kijk nooit naar de output van firebug... kijk naar view source

Uhm, aan de view source heb je niks als je de DOM structuur veranderd hoor. Dus het kan enorm handig zijn om de output van firebug te gebruiken, zeker als je aan de slag gaat met wisselen van content en DOM nodes.

Pagina: 1

Reageer