2010-05-07 8 views
7

Ich möchte, dass mein Submit-Button irgendwo außerhalb meines Formularelements positioniert wird? Habe ich irgendwelche Optionen? Mit Ausnahme von Jquery.muss der Senden-Button im Formular enthalten sein

Danke, rodchar

+0

Wenn Sie jQuery sagen, meinst du auch Javascript? –

+0

Wenn Sie das tun könnten, was wäre das Verhalten von Seiten mit mehreren Formularen? –

+0

Da Ihre '

' die ganze Seite aufnehmen kann, fragen Sie, weil Sie mehrere Formulare auf der Seite haben? – egrunin

Antwort

1

Dies ist eine häufige Situation. Ich denke, das wird es tun (habe es nicht getestet):

<form id="form1" action="someAction.cgi" method="GET"> 
    <!-- other fields go here --> 
</form> 
<form id="form2" action="someOtherAction.cgi" method="GET"> 
    <!-- other fields go here --> 
</form> 

<form> 
    <input value="Form One" type="button" 
     onclick="document.getElementById('form1').submit();"/> 
    <input value="Form Two" type="button" 
     onclick="document.getElementById('form2').submit();"/> 
</form> 

Ich bin nicht sicher, wenn Sie die letzten <form> benötigen. Ich scheine mich zu erinnern, dass Browser Ereignisse ignorieren, wenn die Schaltfläche nicht in einem form war.

4

auf diese Ein weiterer Ansatz ist lediglich die form attribute auf die Schaltfläche setzen:

<form id="first"> 
    <input type="submit" form="second" value="Submit Second" /> 
</form> 
<form id="second"> 
    <input type="submit" form="first" value="Submit First" /> 
</form> 

Fiddle: http://jsfiddle.net/52wgc2ym/


Original-Antwort

Das natürliche Verhalten einer Übergabeschaltfläche besteht darin, das nächstgelegene Formular in seine Hierarchie einzuordnen. Die einzige andere Möglichkeit, eine Schaltfläche zum Senden eines Formulars zu erhalten, in dem sie nicht gespeichert ist, ist die Verwendung von JavaScript (was jQuery im Grunde ist).

Bei Bedarf könnten Sie die Schaltfläche zum Senden so verschieben, dass erscheint, als ob es visuell nicht in der Form ist, wenn die Seite gerendert wird. Sie würden dies mit CSS tun, was zu dem gewünschten Ergebnis führen könnte.

+0

+1 für die CSS, habe ich nicht daran gedacht. –

+0

"Javascript (was jQuery ist, im Grunde)" ...hmmm –

+0

jQuery .... IS ...... JavaScript :) – user1360809

4

Der Submit-Button muss innerhalb des Formulars sein, ja.

Es scheint mir seltsam, es irgendwie anders zu wollen. Was wäre der Punkt, wenn die Eingabesteuerelemente an einer Stelle auf der Seite wären und die Übergabeschaltfläche waaay drüben irgendwo anders wäre?

2

Eingänge des Typs submit sind nur als Kinder von <form> Elemente sinnvoll. Aber mit CSS können Sie es sicher positionieren, wo Sie möchten. Denken Sie daran, dass Formularelemente "unsichtbar" sind. Erweitern Sie einfach die Tags um weitere Inhalte und Sie sind abgedeckt. Hier ist the documentation on forms for HTML4, es ist immer noch angemessen.

2

Ja, strukturell muss der Submit-Button innerhalb eines Formularelements sein, damit das Dokument X/HTML gültig ist. Aber visuell können Sie den Submit Button mit CSS an beliebiger Stelle positionieren (float, absolute/relative Positionierung, etc). Sie können auch JavaScript schreiben, das die Formularübermittlung auslöst und an ein anderes Element bindet.

0

Dies ist die eine andere Art von Antwort mehr freie Sicht von egrunin Antwort zu bekommen

<form id="form1" name="form1" action="someAction.cgi" method="GET"> 
     <!-- other fields go here --> 
    </form> 
    <form id="form2" name="form2" action="someOtherAction.cgi" method="GET"> 
     <!-- other fields go here --> 
    </form> 

    Calling by form id: 
    <form> 
     <input value="Form One" type="button" 
      onclick="document.getElementById('form1').submit();"/> 
     <input value="Form Two" type="button" 
      onclick="document.getElementById('form2').submit();"/> 
    </form> 

or Calling by form name: 

    <form> 
     <input value="Form One" type="button" 
      onclick="document.form1.submit();"/> 
     <input value="Form Two" type="button" 
      onclick="document.form2.submit();"/> 
    </form> 
Verwandte Themen