2010-10-26 10 views
10

Come si può fare un tag in IE7 inviare il modulo, mentre si esegue tutta la convalida del modulo impostata nel modulo?IE7 - <button> non invia il modulo

se faccio appena un document.forms[0].submit(); invia, ma ignora la convalida del modulo.

Edit: tutti piace che mi diceva di usare il tag input ... Che compila il modulo, ma non funzionerà nella mia situazione, che è il motivo per cui ho chiesto la modifica del tasto ...

<form action="my/script" onsubmit="return ValidateFunc();"> 
<button> <img src="image/do_this_with_input_tag.png"> Some Text </button> 
</form> 
+0

Si sta utilizzando un ''? –

+0

No, non inviare. – Justin808

+0

@Nick Craver: Se la memoria mi serve correttamente, è il tipo predefinito in IE, ma non gli altri browser. – some

risposta

1

Ho usato jquery per inviare il pulsante. Se utilizzo il javascript dritto, ignora l'impostazione di convalida. Il modulo di Jquery invia esegue la convalida prima dell'invio.

Dopo ulteriori ricerche, il tag, anche con type = "submit" non può inviare un modulo nella versione precedente di IE.

+3

Ho testato type = "submit" su ie7, sembra di inviare il modulo per me. – Geekfish

1

Immagino che la convalida riconosca solo un evento "invia" da un pulsante "invia".

È necessario utilizzare un input "submit" anziché un "pulsante". Quindi il meccanismo di validazione sarà in grado di intercettare l'evento di invio. puoi chiamare form.submit all'interno della funzione validation.submit.

Ecco il codice:

<form id="theForm"> 
    ... 
    <input type="submit" value="submitMe"/> 
</form> 

in Javascript:

$('#theForm').validate({ 
    ... 
    submitHandler: function() { 
     // do some trick here 
     ... 
     // submit the form 
     $('#theForm').submit(); 
    } 
}); 
9

primo dispone di un pulsante con il tipo di presentare quanto

<input type="submit" value="submit" /> 

nel tag modulo, includono l'onSubmit() evento come

<form 
    action="/path/to/server/side/script" 
    name="testform" 
    onsubmit="return validate()" 
    > 

La funzione validate() deve restituire true se la convalida del modulo passa o false se la convalida non riesce. ad es.

function validate(){ 
    if(...){//valid 
     return true;  
    }else{//not valid 
     return false; 
    }  
} 

EDIT: Specificare sempre il tipo di pulsante. Se non specificato, in IE il valore predefinito è "pulsante" mentre in Chrome e Firefox è impostato su "Invia".

<form action="my/script" onsubmit="return ValidateFunc();"> 
<button type="submit"> <img src="image/do_this_with_input_tag.png"> Some Text </button> 
</form> 

E in futuro, includere più dettagli nella domanda se si desidera risposte adeguate.

+0

Questo è esattamente il modo in cui funzionano le cose, con il tag INPUT, non tanto con il tag BUTTON. – Justin808

+0

Ho modificato la risposta, check it out –

+0

Cercherò il type = "submit" attributo ancora una volta che torno in ufficio. – Justin808

0

sto usando (fittizio/non visibile) campo di input forma all'interno posizionato assoluto con questo css:

<input class="dummy" type="submit" /> 

.dummy { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    font-size:0px; 
    line-height:0px; 
} 

Basta evitare di utilizzare display: none o visibility: hidden o larghezza: 0px ecc solo utilizzare questo css ho fornito.

2

Ho risolto questo semplicemente aggiungendo type="submit" al pulsante.

<button>Submit</button> non è stato presentato in IE7.

<button type="submit">Submit</button> vuol presentare in IE7.

0

Ho avuto lo stesso problema con IE11 con un pulsante di invio all'interno di un'altra forma:

<form id="form1"> 
    ... 
</form> 
<form id="form2"> 
    ... 
    <button type="submit" form="form1">OLA KE ASE</button> 
    ... 
</form> 

È possibile risolverlo usign javascript, l'ho fatto con jQuery in modo generico.

$(document).ready(function() { 
    $('button[type=submit]').on('click', function() { 
     if ($(this).attr('form') != '') { 
      document.getElementById($(this).attr('form')).submit(); 
     } 
    }); 
});