[HTML] FireFox: hoe submit form met enter?

[JayVee]

Hey. Ik heb hier een raar probleem met het posten van een form met FireFox (0.9) onder Windows XP. Pagina is XHTML 1.1 strict (mocht dat ook maar iets uitmaken )

HTML:

<script type="text/javascript">
  function submit () { alert('call to submit'); }
</script>

<form name="w00t" onsubmit="alert('submit');">
  <input type="hidden" />

  <label for="in1">Shibby</label>  <input id="in1" type="image" src="del.gif" />

  <label for="in2">Sweet</label>  <input id="in2" type="image" src="del.gif" />

  <input type="text" name="addrow" size="15" value="" />
  <input type="submit" src="add.gif" name="submit" value="Voeg to" />
</form>

Ik heb name / value en wat andere attributen weggelaten om het overzichtelijk te houden. Ziet er uiteindelijk ongeveer zo uit:


Ik heb dus een form met wat regels (hier shibby en sweet, staan in een tabel), die ik een voor een wil kunnen deleten met een delete icon. Helemaal onderaan komt een input veld om een nieuwe regel toe te voegen.
Als ik op de plaatjes klik gaat het prima!

Het probleem doet zich voor als ik in de text input iets schrijf en dan op enter druk. Met IE gaat het goed, maar FireFox post dan alsof ik op het eerste delete icon heb geklikt.

Moet ik per ze twee forms gebruiken? Dat doe ik liever niet aangezien het dan in een <td> moet en die dan groter wordt (dan de tekst). Daarnaast is het minder mooi vind ik.


Daarnaast heb ik nog een ander raar probleem, maar dat zal wel meer met (mijn) javascript (skills) algemeen te maken hebben: de form onsubmit=alert() werkt zo wel. Maar als ik 'submit();' gebruik gebeurt er niets! Hoe kan dat?

[RSpliet]

voor die 2e, probeer eens onsubmit="javascript:submit();" in te vullen.

[Superdeboer]

Voor die tweede:

Gebruik niet submit() maar neem daar een ander woord voor... De JavaScript console roept steevast "submit() is not a function," ook als je onsubmit="javascript:submit();" gebruikt.

Als je dit gebruikt en aanroept lukt het ineens wel

HTML:

<script type="text/javascript">
 <!--
  function saweeetah() { alert('call to submit'); }
 //-->
</script>

[JayVee]

Ah, tweede probleem is idd opgelost. Jammer dat de FireFox Javascript Console daar niets over zegt.

offtopic:
Hey! Wij zijn ud grid maatjes @ Sa-weee-tah. En moet je raden wie dit logo ooit heeft gemaakt

[Superdeboer]

JayVee schreef op 17 juni 2004 @ 23:25:

Het probleem doet zich voor als ik in de text input iets schrijf en dan op enter druk. Met IE gaat het goed, maar FireFox post dan alsof ik op het eerste delete icon heb geklikt.

Moet ik per ze twee forms gebruiken? Dat doe ik liever niet aangezien het dan in een <td> moet en die dan groter wordt (dan de tekst). Daarnaast is het minder mooi vind ik.

Ik heb zo een beetje rond gelezen en ik heb begrepen dat dit default behavior is van respectievelijk IE en Moz/Firefox... Twee forms zou echter inderdaad meteen je hele probleem oplossen. Je probleem met die <td> snap ik niet eigenlijk, maar ik ken je layout verder ook niet. Je kunt toch gewoon elke form in een eigen divje stoppen en die strak tegen elkaar aan zetten?

offtopic:
Dat icon komt inderdaad daar vandaan; jij bent die dude met die dikke P4 toch? Doe Harm-Jan de groeten van me als je 'm spreekt.

[crisp]

een functie submit noemen is geen probleem, maar als je ergens een name="submit" gebruikt overschrijf je daarmee de functie weer (en in deze context tevens de submit-method van je form).
Verder valideerd dit formulier natuurlijk niet naar xhtml strict, en een deel van je probleem wordt veroorzaakt door het feit dat een input type="image" natuurlijk ook als submit button fungeert (en je laatste input moet ook type="image" zijn - je maakt er immers een plaatje van).

Ik zou die laatste 2 elementen gewoon in een los formulier zetten.

[ Voor 7% gewijzigd door crisp op 18-06-2004 07:29 ]

[JayVee]

Nou, dit is een uitknipsel uit de originele source (die wel valideerd!) om het even overzichtelijk te houden. Daarom ook het foutje met het laatste input plaate.

Het zit in een grote dynamische tabel waarvan ik niet weet hoe breed (inhoug van tds EN aantal tds!) en hoe lang (aantal trs) hij wordt. Het dus opsplitsen in twee divs wordt lastig aangezien die onderste (nieuwe regel invoeren) even breed moet zijn.
Misschien dat dat op te lossen is met een containter div, dat zou ik moeten proberen.

Is er verder geen manier om het op te lossen? Bijvoorbeeld door met javascript het op enter drukken te negeren?
Bijv:

code:

function checkkey( key ) {
  if (key == return ) return false;
}

<input type="text" onkeypress="chekckey( this.keypressed? )">

[André]

Je kunt de enterkey wel negeren:

code:

function Bla(e)
{
  if (e.keyCode == 13) { return false; }
  return true;
}

onkeyDown = Bla(evt);

[JayVee]

Alleen hoe moet ik Bla dan aanroepen? Ik wil uiteraard het event meesturen, maar hoe krijg ik die? In de Mozilla DOM manual staat hoe ik de 'event handling code' kan krijgen. And theen?

[André]

Zo:

JavaScript:

function Bla(e)
{
  if (e.keyCode == "13") { alert("enter"); return false; }
  return true;
}

<body onkeypress="Bla(event)">

[ Voor 18% gewijzigd door André op 18-06-2004 09:25 ]

[JayVee]

Yes! Ik heb het:

JavaScript:

function stopsubmit ( evt ) {
  if ( evt.which == 13 ) {                  // bij enter
    var add = document.getElementById('add'); //pak de 'add' input
    add.click();                              // simuleer een click !
    return false;
  }
  return true;
}

HTML:

<input type="text" value="" onkeypress="return stopsubmit( event );" />
<input id="add" type="image" src="pix/icon_add.gif" />

[slm]

Beetje rare workaround. Eerst typen en dan je muis gebruiken om ergens op een button te klikken is erg onhandig (zie bv in sommige slechtgemaakte Flash forms).

Dat de browser de del functie eerst pakt is logisch. Die image-type input dingen zijn ook submit buttons. Enter = submit. Eerste submit = del --> del.

Maak van je input type=image gewoon img src=blah onclick=del of iets dergelijks en dan ben je klaar.

[JayVee]

add.click simuleert een click op die button. Je hoeft het niet zelf te doen of zo!
Check http://www.w3schools.com/htmldom/dom_obj_submit.asp

[crisp]

JayVee schreef op 18 juni 2004 @ 14:18:
add.click simuleert een click op die button. Je hoeft het niet zelf te doen of zo!
Check http://www.w3schools.com/htmldom/dom_obj_submit.asp

Niet elke browser ondersteund dat.
Wat ik me afvraag is of je niet allemaal losse forms kan maken, of dat je wellicht met een hidden form weg kan komen en wat javascript voor die rijen met zo'n delete kruisje.
Het lijkt me dat er vast wel mooie alternatieven zijn te vinden zonder dat je met javascript de enterkey hoeft af te vangen, maar daarvoor moeten we wel precies weten wat je wil bereiken.