PHP/HTML/AJAX meerdere forms, altijd data uit eerste form

[TeGek]

Naar veel geklooi en geruzie met PHP/AJAX/HTML denk ik dat het toch maar beter aan de professionals over kan laten.

Ik heb een pagina gemaakt genaamd buttons.php, waarop elke knoppen zitten die een post(of get) request moet sturen naar een php pagina,zonder een refresh te versturen, of visuele feedback.

Nu is het echter zo dat de knoppen altijd de eerste form lijken te submitten, zelf heb ik grotendeels de code op het web gevonden en proberen aan te passen.

code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var link = $("#link").val();
var dataString = 'link='+link;
if(link=='')

{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: link,
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>

<form method="POST" name="form">
<input id="link" name="link" type="hidden" value="return.php?checkemail.html" />
<div >
<INPUT TYPE="image" SRC="images/up.png" ALT="Submit Form" class=submit>
</div>
</form>

<form method="POST" name="form">
<input id="link" name="link" type="hidden" value="return.php?link={f1}.html" />
<div >
<INPUT TYPE="image" SRC="images/down.png" ALT="Submit Form" class=submit>
</div>
</form>

<form method="post" name="form">
<input id="link" name="link" type="hidden" value="left.html" />
<div >
<INPUT TYPE="image" SRC="images/left.png" ALT="Submit Form" class=submit>
</div>
</form>

<form method="post" name="form">
<input id="link" name="link" type="hidden" value="right.html" />
<div >
<INPUT TYPE="image" SRC="images/right.png" ALT="Submit Form" class=submit>
</div>
</form>

Hoe zorg ik ervoor dat de 2de knop( {f1}.html ) verstuurd wordt door buttons.php?

hieronder de processing van return.php:

code:

<?php
$hostcomputer = "http://192.168.1.12:1111/" ;
$urlend = $_POST['link'];
$correcturl = str_replace("return.php?","",$urlend);
$completeurl = $hostcomputer . $correcturl;
$fp = fopen('data.txt', 'w');
fwrite($fp,$hostcomputer);
fwrite($fp,$correcturl);
fwrite($fp,$completeurl);
fclose($fp);
$target = file_get_contents($completeurl);
?>

Waar de fwrite alleen maar voor troubleshooting is . Iemand enig idee?

[ray538]

De standaard actie van zo'n knop is het submitten van een form. In jQuery kun je deze standaard actie blokkeren met de regel:

code:

e.preventDefault();

Waarbij e je event is. Om regel 6 als voorbeeld te nemen:

code:

$(".submit").click(function(e) {
e.preventDefault();

Zie de toegevoegde variabele e in function().

[8088]

TeGek schreef op zondag 10 juli 2011 @ 12:05:
Iemand enig idee?

Ja. Haal je code eens door een validator, dan heb jij ook zo een idee.

HTML:

<input id="link" name="link" type="hidden" value="return.php?checkemail.html" />
<input id="link" name="link" type="hidden" value="return.php?link={f1}.html" />
<input id="link" name="link" type="hidden" value="left.html" />
<input id="link" name="link" type="hidden" value="right.html" />

Welke waarde verwacht je dat link krijgt?

[TeGek]

ray538 schreef op zondag 10 juli 2011 @ 12:09:
De standaard actie van zo'n knop is het submitten van een form. In jQuery kun je deze standaard actie blokkeren met de regel:

code:

e.preventDefault();

Waarbij e je event is. Om regel 6 als voorbeeld te nemen:

code:

$(".submit").click(function(e) {
e.preventDefault();

Zie de toegevoegde variabele e in function().

Inderdaad, maar gezien ik meerdere forms op de pagina heb probeert hij altijd het eerst form te posten (waar de waarde checkemail.html is) terwijl ik op de submit knop van het 2de form druk(waard de waarde {f1}.html is)

8088 schreef op zondag 10 juli 2011 @ 12:15:
[...]

Ja. Haal je code eens door een validator, dan heb jij ook zo een idee.

HTML:

<input id="link" name="link" type="hidden" value="return.php?checkemail.html" />
<input id="link" name="link" type="hidden" value="return.php?link={f1}.html" />
<input id="link" name="link" type="hidden" value="left.html" />
<input id="link" name="link" type="hidden" value="right.html" />

Welke waarde verwacht je dat link krijgt?

Ik dacht dat als ik verschillende forms gebruikte dat dit dan zou werken? zelf ben ik geen programmeur en probeer ik eigenlijk alleen voor elkaar te krijgen dat als ik op een image button klik, er een script wordt uitgevoerd met een bepaalde waarde, zonder dat er een refresh optreed, moet ik dit dan op een andere manier doen?

[Gamebuster]

Waarom gebruik je 4 forms? Wat is er mis met 1 form?

[ray538]

Gamebuster schreef op zondag 10 juli 2011 @ 12:24:
Waarom gebruik je 4 forms? Wat is er mis met 1 form?

Sterker nog, waarom überhaupt een form als er niets in te vullen valt? In principe met een gewone link ook werken, je kunt vervolgens een href of een title gebruiken om de link in op te slaan, bij het klikken op de link haal je die data er uit en stuur je het naar je php script. Of sla ik nu door?

[TeGek]

ray538 schreef op zondag 10 juli 2011 @ 12:27:
[...]

Sterker nog, waarom überhaupt een form als er niets in te vullen valt? In principe met een gewone link ook werken, je kunt vervolgens een href of een title gebruiken om de link in op te slaan, bij het klikken op de link haal je die data er uit en stuur je het naar je php script. Of sla ik nu door?

en toen snapte ik er helemaal niets meer van

Het doel van dit hele ding is dus simpelweg wat image buttons te hebben, waar je op kan klikken om een script te runnen zonder dat de pagina refresht, of zelfs enige vorm van feedback, naar veel gegooglt te hebben kwam ik hierop.

[8088]

Daar heb je inderdaad geen forms voor nodig.

TeGek schreef op zondag 10 juli 2011 @ 12:22:
moet ik dit dan op een andere manier doen?

Klaarblijkelijk, want nu werkt het niet. Heb je je HTML al door een validator gehaald?

[MueR]

8088 schreef op zondag 10 juli 2011 @ 12:15:
Welke waarde verwacht je dat link krijgt?

Bij normale forms krijgt link de waarde die staat ingevuld in het gesubmitte form. Daarom moet je, wanneer je met javascript de boel gaat enhancen, ook altijd het juiste formulier versturen.

[TeGek]

Naar de tips om wat meer te kijken naar .click event heb ik de volgende code samengesteld van wat ik voorheen had en wat de tips gaven:

code:

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:5px; cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><INPUT TYPE="image" NAME="email" SRC="images/email.png" ALT="email"></p>
  <p><INPUT TYPE="image" NAME="down" SRC="images/down.png" ALT="down"></p>
  <p><INPUT TYPE="image" NAME="up" SRC="images/up.png" ALT="up"></p>
<script>
    $("p").click(function () {
var datastring = $("#name").val();
$.ajax({
type: "POST",
url: "return.php",
data: dataString,
});
    });
</script>

</body>
</html>

Waarschijnlijk doe ik het nog steeds hopeloos fout, het liefst zou ik de knop een request laten posten naar return.php met daarin de value die het script verwerkt(bijvoorbeeld checkemail.html of up.html),(zonder refresh nog steeds)
Echter krijg ik maar niet door hoe dit moet.

[zwittrooper]

Waarom gebruik je niet het input element voor de .click actie?
Dan kan je rechtstreeks alle data op vragen over dat element. (name, alt, src, etc.)
Dat lijkt me veel makkelijker werken.

Kijk ook even hier: http://api.jquery.com/attr/

[ Voor 12% gewijzigd door zwittrooper op 10-07-2011 17:14 ]

[Manuel]

TeGek: Is er een reden waarom je speciaal voor de input-tag uppercase gebruikt terwijl je voor de rest alleen maar gebruik maakt van lowercase? Ik snap ook niet waar je #email vandaan haalt als element, het is nergens in je voorbeeldcode te vinden namelijk. De #-selector pakt namelijk alleen elementen met het opgegeven id. Volgens mij bedoel je iets als: input[name=email]

Voor meer informatie zie ook: Selectors – jQuery API

Trouwens, als je het posten van het formulier graag door jQuery wilt laten afhandelen lees dan ray538 in "PHP/HTML/AJAX meerdere forms, altijd dat..." zijn reactie nog eens door. Daar staat precies in hoe je kunt voorkomen dat het formulier normaal (ala standaard) wordt afgehandeld.

Voorbeeld:

JavaScript:

$(function() {
    $("input:image").click(function(e) {
        e.preventDefault(); // Erg belangrijk in dit geval.
        $.post("return.php", $(this).attr("name"), function(result) {
            // Doe iets met de teruggekregen data.
        });
    });
});

Gebruikte pagina's om dit te maken:
Selectors – jQuery API
Ajax – jQuery API
Events – jQuery API
Attributes – jQuery API

[ Voor 2% gewijzigd door Manuel op 10-07-2011 17:23 . Reden: Typo in voorbeeld.. ]

[TeGek]

Manuel schreef op zondag 10 juli 2011 @ 17:21:
TeGek: Is er een reden waarom je speciaal voor de input-tag uppercase gebruikt terwijl je voor de rest alleen maar gebruik maakt van lowercase? Ik snap ook niet waar je #email vandaan haalt als element, het is nergens in je voorbeeldcode te vinden namelijk. De #-selector pakt namelijk alleen elementen met het opgegeven id. Volgens mij bedoel je iets als: input[name=email]

Voor meer informatie zie ook: Selectors – jQuery API

Trouwens, als je het posten van het formulier graag door jQuery wilt laten afhandelen lees dan ray538 in "PHP/HTML/AJAX meerdere forms, altijd dat..." zijn reactie nog eens door. Daar staat precies in hoe je kunt voorkomen dat het formulier normaal (ala standaard) wordt afgehandeld.

Voorbeeld:

JavaScript:

$(function() {
    $("input:image").click(function(e) {
        e.preventDefault(); // Erg belangrijk in dit geval.
        $.post("return.php", $(this).attr("name"), function(result) {
            // Doe iets met de teruggekregen data.
        });
    });
});

Gebruikte pagina's om dit te maken:
Selectors – jQuery API
Ajax – jQuery API
Events – jQuery API
Attributes – jQuery API

En huppakee, met jou voorbeeld code het in een keer in een werkend geheel kunnen gieten

Hartstikke bedankt.

[MueR]

/laat

Schopje naar Webdesign, Markup & Clientside Scripting

[Bosmonster]

Naar veel geklooi en geruzie met PHP/AJAX/HTML denk ik dat het toch maar beter aan de professionals over kan laten.