Form met meerdere buttons

[Onbekend]

Ik heb dit stukje code:

HTML:

<form>
<input type='submit' id='Update[1]' name='Update[1]' value='Update'>
<input type='submit' id='Update[2]' name='Update[2]' value='Update'>
<input type='submit' id='Update[3]' name='Update[3]' value='Update'>
</form>

Elke knop heeft een eigen set velden wat in de database geupdated moet worden.
Deze velden zijn, net zoals de knoppen hier, in een array gezet.

Op het moment dat er op een knop wordt gedrukt, wordt op de server (PHP, maar dat doet er niet toe) de gehele array doorgelopen om te zoeken op welke knop er is gedrukt. Nu kan in de toekomst de nummers aardig oplopen, en om dan nog steeds aan de serverkant de gehele array van tienduizenden nummers te doorlopen om die ene button te vinden ging mij een beetje te ver.

Na wat onderzoek en wat experimenteren vul ik nu m.b.v. JavaScript een veld waarin staat op welke knop er is gedrukt. Op de server lees ik dat veld dan uit en hoef ik niet te zoeken. Dit werkt overigens prima.
Ik vind het vullen van een apart veldje met JavaScript toch een beetje omslachtig, en vraag mij af of er niet een snellere weg is waarmee ik aan de serverkant direct kan zien op welke knop er is gedrukt.

Hebben jullie suggesties?

[gvdh]

Onbekend schreef op donderdag 05 augustus 2010 @ 13:23:
Elke knop heeft een eigen set velden wat in de database geupdated moet worden.
Deze velden zijn, net zoals de knoppen hier, in een array gezet.

Waarom gebruik je daar dan geen aparte forms voor?

[seer]

Als je input type=button gebruikt ipv submit en ze dan een ID geeft kun je met javascript kijken welke gebruikt is en daarmee de juiste velden naar de server sturen.

JavaScript:

$("input#knop1").click(function(){
    // hier de actie voor knop1
});

$("input#knop2").click(function(){
    // hier de actie voor knop2
});

$("input#knop3").click(function(){
    // hier de actie voor knop3
});

[Amras]

Bovenstaande is gedaan met het erg populaire jQuery framework, mocht de syntax je wat vreemd overkomen.

[Onbekend]

@gvdh:
Ik heb op het form ook nog "globale" velden staan. Die dienen bij elke submit (maakt niet uit welke knop) ook verzonden te worden.

@Seer:
Zo'n constructie heb ik nu dus al. Elke knop roept deze functie aan:

JavaScript:

function SubmitForm(ID)
{
  document.forms["Form"].ID.value = ID;
  document.Form.submit();
}

[seer]

Om hoeveel invoervelden gaat het?
Wellicht kun je met elke knop gewoon alles verzonden en op basis van de submit value aan de achterkant bepalen welke data je daadwerkelijk gaat gebruiken...

[Onbekend]

De grens zal wel op zo'n 30 knoppen per pagina liggen, en de totaal aantal invulvelden komt dan op ongeveer 300 uit. De data daarin is meestal maximaal 10 tekens, dus qua dataverkeer valt dat erg mee.

seer schreef op donderdag 05 augustus 2010 @ 13:57:
Wellicht kun je met elke knop gewoon alles verzonden en op basis van de submit value aan de achterkant bepalen welke data je daadwerkelijk gaat gebruiken...

Op dit moment wordt ook alles verzonden, want de submitknoppen zitten in het zelfde form. Ik gebruik aan de serverkant niet alle data, want dat doe ik d.m.v. het veldje ID wat ik met die JavaScript-functie vul.

[seer]

Als ik het goed begrijp wil je alleen het stukje JS ontlopen wat nu een de aangeklikte ID in een hidden field invoert en meestuurt?

Het lijkt me dat je de knoppen visueel uit elkaar moet houden. Als je drie knoppen hebt waarop staat "Update" dan weet je niet wat het verschil is. Als je deze value uniek maakt per knop (en de name voor alledrie hetzelfde) dan kun je dat aan de achterkant opvangen.

HTML:

<input type="submit" name="update" value="Knop1"/>
<input type="submit" name="update" value="Knop2"/>
<input type="submit" name="update" value="Knop3"/>

PHP:

$knop = $_REQUEST['update']; // bijv. 'Knop1'

je kunt dan matchen op $knop. (wellicht met een switch-constructie)

[MueR]

Doe maar $_POST dan. $_REQUEST is unsafe.

[Onbekend]

seer schreef op donderdag 05 augustus 2010 @ 14:26:
Als ik het goed begrijp wil je alleen het stukje JS ontlopen wat nu een de aangeklikte ID in een hidden field invoert en meestuurt?

Klopt. Ik heb het idee dat het ook zonder JS zou moeten kunnen.

Het lijkt me dat je de knoppen visueel uit elkaar moet houden. Als je drie knoppen hebt waarop staat "Update" dan weet je niet wat het verschil is. Als je deze value uniek maakt per knop (en de name voor alledrie hetzelfde) dan kun je dat aan de achterkant opvangen.

De knoppen staan in een tabel, en met zo'n knop update je de regel of kolom waarin die knop staat.
Het is volgens mij overzichtelijker om de knoppen allemaal de zelfde zichtbare waarde te houden, anders kan dat tot verwarring leiden denk ik. Dan heb ik liever nog de JS oplossing.

[seer]

Ah, je hebt een soort database editor gemaakt, begrijp ik dat goed?

Kun je dan niet aan het begin/eind van de regel een edit knop maken en dan m.b.v. ajax ALLEEN die regel editable maken (en de edit knop aanpassen naar update).

[Verwijderd]

15:25:
Klopt. Ik heb het idee dat het ook zonder JS zou moeten kunnen.

Dit geldt misschien voor websites/frontends maar voor een GUI van een webapplicatie ontkom je tegenwoordig niet meer aan (netjes geschreven) javascript.

Ik heb dit laatst ook met javascript gedaan, op de manier seer omschreef.
Het scheelt ook laadtijd van de pagina als je de html code beperkt, PHP handelt de rest af aan de hand van de gekozen actie.

Mijn mening: javascript gebruiken.

[ Voor 1% gewijzigd door Verwijderd op 06-08-2010 17:17 . Reden: typo ]

[RobIII]

seer schreef op donderdag 05 augustus 2010 @ 14:26:

Je kunt ze natuurlijk ook alle 3 een verschillende name geven en zien welke van de 3 je binnen krijgt

[DeTeraarist]

Is het niet eenvoudiger om 1 submit knop te maken en in plaats van die drie knoppen radiobuttons te gebruiken?
Kun je gewoon de value van de radiobutton uitlezen om te zien welke keuze er is gemaakt en hoef je ook geen complete arrays met buttons te doorlopen.

[seer]

RobIII schreef op vrijdag 06 augustus 2010 @ 17:28:
[...]

Je kunt ze natuurlijk ook alle 3 een verschillende name geven en zien welke van de 3 je binnen krijgt

Dat is inderdaad een beter optie dan verschillende values :-p

Toch blijft mijn voorkeur uiteindelijk bij de ajax oplossing. Dit scheelt een hoop uitzoekwerk en ontlast het dataverkeer.

[Onbekend]

seer schreef op donderdag 05 augustus 2010 @ 16:01:
Ah, je hebt een soort database editor gemaakt, begrijp ik dat goed?

Daar lijkt het wel een beetje op. Ik wil uit een tabel een overzicht geven, en dat de gebruiker die meteen kan aanpassen.


Ik gebruik nu JavaScript om het form te verzenden. Voor de gebruiksvriendelijkheid controleer ik namelijk clientside ook de invoer, en die ene regel meer om het form te verzenden kan er ook nog wel bij.

Later zal ik er ajax van maken, maar nu heeft de website zelf prioriteit en daar is geen ajax voor nodig.