webForumDet fria alternativet

Disabla en submit-knapp inifrån form utan användande av ID?

JavaScript

27 svar · 1 055 visningar · startad av haider

Medlem sedan jan. 2003956 inlägg
Frågan#1

Tjena,

Jag har en sida med flertalet <form> taggar och jag vet att risken är överhängande att det kan uppstå krockar med IDs förr eller senare om varje form-tagg ska ha sin egen.

Frågan är om jag inifrån en form-tag kan köra ett javascript, tex i formulärets <select>-tag i stil med <select onChange=" nånting "> och tack vare detta kunna nå den nuvarande form (this) utan att använda mig av ID.

Jag har för mig att jag var med om något liknande, men jag minns inte om 'this' påverkar precis den taggen man befinner sig i eller "modertaggen", den första form-taggen ovanför taggen man kör scriptet från.

Medlem sedan juni 200032 967 inlägg
#2

this.form borde funka.

Medlem sedan jan. 2003956 inlägg
#3

ska undersöka, tack!

edit: men, hur kommer jag åt "denna formens submitknapp"? Jag var lite otydlig innan; det är alltså submit-taggen (en input-tagg) som jag la ett ID på för att hitta. Om det är så att man _måste_ ha ett ID för att hitta just den unika input-taggen bland flera input-taggar i denna form, kan man då använda samma namn på samtliga submit-taggarna på denna sida, men att man då kommer åt dem genom this.form.*namnet på input-taggen*?

Medlem sedan dec. 20025 483 inlägg
#4

Det stämmer, för varje formulär är det en fördel om submitknapparna har unika namn. Då kan du inifrån var och ett av formulären nå submitknappen med this.form.<knappnamn>

Medlem sedan jan. 2003956 inlägg
#5

Peter, menar du att om alla submitknappar heter 'pelle', så kan man inte inifrån ett formulär skriva this.form.pelle, eftersom det krockar med externa pellen?

Medlem sedan dec. 20025 483 inlägg
#6

Nej, precis tvärtom :) Du kan ha en submitknapp i varje formulär med name = "pelle" och sedan använda this.form.pelle

Medlem sedan jan. 2003956 inlägg
#7

Aha, tack :)
Ska testa på det direkt!

Medlem sedan jan. 2003956 inlägg
#8

Hur går jag tillväga om jag vill anropa en extern funktion som ska behandla "this.form.pelle"?
Blir det plötsligt problem?

Min hjärna får inte ihop det, så jag ska knåpa vidare där jag kör mitt lilla javascript direkt i onchange="*scriptet*", men någongång kommer jag behöva arbeta i en extern function som jag anropar via onchange...
Tacksam för lite råd

Medlem sedan dec. 20025 483 inlägg
#9

Exempel:

<script>
function f(elm){
  alert(elm.value);
}
</script>
...
<form>
  <select onchange="f(this.form.pelle)">
    ...
  </select>
  <input type="submit" value="hejhopp" name="pelle">
</form>
Medlem sedan jan. 2003956 inlägg
#10

Tackar, den gav mig en kick åt rätt håll även om jag brände en dos nerver på vägen.
Det verkar som om det blir problem om input-taggen är av type="image". Någon idé varför?

Medlem sedan dec. 20025 483 inlägg
#11

Av någon anledning verkar inte formulärets elements-samling innehålla inputs av typen image, vilket rent spontant känns väldigt fel. Som alternativ gissar jag att du kan sätta ett id på elementet och använda document.getElementById i stället. Ett annat sätt kan vara att kapsla in en <img> i en <button>.

Medlem sedan jan. 2003956 inlägg
#12

Nå, nu behöver jag i och för sig inte läsa dess värde, så vi kommer undan med första problemet i alla fall. Jag behövde nämligen styra .disabled = true alt. false.

Men så snart jag kommer in på bildstyrningen, det vill säga att jag behöver ändra bilden beroende på om knappen är disablad eller enablad, så får jag problem.
Jag vill helst inte anta att detta problem går att lösa med getElementById, för jag vill ju just slippa ha unika IDs på varje knapp.

Ska pula lite mer med den, men har du något att tillägga om ovanstående?

edit: kanske lika bra att skriva ner kodsnutten ifall jag råkade missa något själv:
onchange="this.form.pelle.src='/bilder/knapp_disabled.gif'"

Syftet är att testa och se om jag kan få den att reagera.

Medlem sedan jan. 2003956 inlägg
#13

Läste på lite på nätet. Kan man skippa input-taggen och ersätta den med en vanlig knapp som submittar vid klick?
Med detta sagt, hur vet browsern att just den input-taggen är en submit knapp? Är type="image" eller "button" automatiskt submitknappar?

Medlem sedan dec. 20025 483 inlägg
#14

Så här skulle jag kunna tänka mig att göra:

function f(elm){
  if (/^button$/i.test(elm.type))
  {
    elm.childNodes[0].src = "/bilder/knapp_disabled.gif";
  }
  else
  {
    elm.src = "/bilder/knapp_disabled.gif";
  }
}
...
onchange="f(this.form.pelle)"
...
<button type="button" value="Submit!" name="pelle"><img src=""></button>
Medlem sedan dec. 20025 483 inlägg
#15

Submitknappar är följande: <input type="submit">, <input type="image"> och <button type="submit"></button>.

Medlem sedan jan. 2003956 inlägg
#16

Peter S skrev:

Ett annat sätt kan vara att kapsla in en <img> i en <button>.

Aha, nu fattar jag vad du menade med denna :)

Medlem sedan jan. 2003956 inlägg
#17

Har ännu inte provat på buttonlösningen för att jag fortsatte att experimentera med koden som den var.
För övrigt; är lösningen med button-img standard eller en workaround?
Innebär den någon nackdel mot input-lösningen?

Jag försökte alltså komma åt src i input-taggen men utan framgång. Hittade ett javascript bibliotek där man kunde komma åt src attributet men det kändes lite overkill så jag lät det vara så länge.
Så jag vill nu bara försäkra mig; kan man komma åt src genom this.form.id-namnet över huvudtaget? Varför jag föredrar den metoden är för att inte behöva förändra originalkoden så särskilt mycket.

tillägg: kan man använda getelementbyid, men endast inuti den form man befinner sig?

Medlem sedan dec. 20025 483 inlägg
#18

Button-img är standard och kan inte se någon nackdel med den.

Ja, problemet är att input type="image" inte verkar vara med form.elements-samlingen och det är därför du inte kommer åt den. Varför den inte är med en är gåta.

Du menar this.form.name? Nej, det verkar inte gå.

GetElementById används på document-objektet, inte på this.form. Det som möjligen skulle kunna fungera är att loopa igenom this.form.getElementsByTagName("INPUT") och leta efter name="pelle".

Medlem sedan jan. 2003956 inlägg
#19

Peter S skrev:

Det som möjligen skulle kunna fungera är att loopa igenom this.form.getElementsByTagName("INPUT") och leta efter name="pelle".

Nej, så kan vi inte göra, eftersom pelle kommer att finnas på många ställen på sidan, på varje submitknapp rättare sagt.

Då är det din lösning som gäller.
Vet du, hela tiden trodde jag att button taggen skapade en knapp, som input type=button.
Men tydligen inte. Är den istället till för att skapa knappar av tex bilder?

Medlem sedan dec. 20025 483 inlägg
#20

haider skrev:

Nej, så kan vi inte göra, eftersom pelle kommer att finnas på många ställen på sidan, på varje submitknapp rättare sagt.

Då är det din lösning som gäller.
Vet du, hela tiden trodde jag att button taggen skapade en knapp, som input type=button.
Men tydligen inte. Är den istället till för att skapa knappar av tex bilder?

Men this.form.getElementsByTagName gäller ju bara aktuellt formulär, så det kommer att fungera.

<button> skapar också en knapp, men till skillnad från sin input-motsvarighet kan man kapsla in andra typer av element (inte bara <img>) i den.

252 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
119 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
119 ms — ändringar (db)