Utilizzare un collegamento normale per inviare un modulo

Voglio inviare un modulo Ma non sto andando nel modo base di utilizzare un pulsante di input con tipo di invio ma un collegamento.

L'immagine sotto mostra il perché. Sto usando i collegamenti alle immagini per salvare / inviare il modulo. Perché ho markup CSS standard per i collegamenti di immagini non voglio usare i pulsanti di invio input.

Ho provato ad applicare onClick = "document.formName.submit ()" sull'elemento a ma preferirei un metodo html.

Qualche idea?

Due strade. O crea un pulsante e lo stile in modo che appaia come un collegamento con CSS, o creare un collegamento e utilizzare onclick="this.closest('form').submit();return false;".

Non puoi davvero farlo senza una qualche forma di scripting al meglio delle mie conoscenze.

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

Esempio da qui .

Solo uno stile input type="submit"come questo ha funzionato per me:

.link-button { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="link-button" />

Testato su Chrome, IE 7-9, Firefox

Stai usando immagini per inviare ... quindi puoi semplicemente usare un type="image""pulsante" di input:

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

uso:

<input type="image" src=".."/>

o:

<button type="send"><img src=".."/> + any html code</button>

più alcuni CSS

Sicuramente, non esiste una soluzione con HTML puro per inviare un modulo con un link (a tag ). L'HTML standard accetta solo pulsanti o immagini. Come hanno affermato alcuni altri collaboratori, è possibile simulare l'aspetto di un collegamento utilizzando un pulsante, ma immagino che non sia lo scopo della domanda.

IMHO, credo che la soluzione proposta e accettata non funzioni.

L'ho provato su un modulo e il browser non ha trovato il riferimento al modulo.

Quindi è possibile risolverlo usando una singola riga di JavaScript, usando thisobject, che fa riferimento all'elemento su cui si fa clic, che è un nodo figlio del modulo, che deve essere inviato. Così this.parentNodeè il nodo del modulo. Dopo sta solo chiamando il submit()metodo in quel modulo. Non è necessaria alcuna ricerca dall'intero documento per trovare la forma giusta.

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

Supponi di inserire con il mio nome:

Ho usato l' getattributo del metodo del modulo perché è possibile visualizzare i parametri corretti nell'URL nella pagina caricata dopo l'invio.

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

Questa soluzione ovviamente si applica a qualsiasi tag che accetta l' onclickevento o qualche evento simile.

thisè una scelta eccellente per ripristinare il contesto insieme alla eventvariabile (disponibile in tutti i principali browser e IE9 in poi) che può essere utilizzata direttamente o passata come argomento a una funzione.

In questo caso, sostituire la riga con atag con la riga in basso, utilizzando la proprietà target, che indica l'elemento che ha avviato l'evento.

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

puoi utilizzare OnClick = "document.getElementById ('formID_NOT_NAME'). SUBMIT ()"