Desidero inviare un modulo HTML per non fare nulla

Question

Desidero che un modulo HTML non faccia nulla dopo che è stato inviato.

action="" 

non va bene perché causa il ricaricamento della pagina.

Fondamentalmente voglio che venga chiamata una funzione Ajax ogni volta che viene premuto un pulsante o che qualcuno preme "Invio" dopo aver digitato i dati. Sì, potrei rilasciare il tag form e aggiungere solo chiamare la funzione dall'evento onclick del pulsante, ma voglio anche la funzionalità "colpire invio" senza ottenere tutto il hackish.

Answer 1

Utilizzando return false; nel javascript che si chiama dal pulsante di invio, è possibile interrompere il modulo dall'invio.

Fondamentalmente, è necessario il seguente codice HTML:

<form onsubmit="myFunction(); return false;"> 
<input type="submit" value="Submit"> 
</form> 

Poi il javascript di supporto:

<script language="javascript"><!-- 
function myFunction() { 
    //do stuff 
} 
//--></script> 

Se si desidera, si può anche avere determinate condizioni permettono lo script per inviare il modulo:

<form onSubmit="return myFunction();"> 
<input type="submit" value="Submit"> 
</form> 

Accoppiato con:

<script language="JavaScript"><!-- 
function myFunction() { 
    //do stuff 
    if (condition) 
     return true; 

    return false;  
} 
//--></script> 

Answer 2

Come parte dell'evento onclick del pulsante return false che interromperà l'invio del modulo.

cioè:

function doFormStuff() { 
    // ajax function body here 
    return false; 
} 

E basta chiamare quella funzione sul pulsante di invio click. Ci sono molti modi diversi.

Answer 3

Come su

<form id="my_form" onsubmit="the_ajax_call_function(); return false;"> 
...... 
</form> 

Answer 4

utilizzare jQuery. Forse metti un div attorno ai tuoi elementi dal modulo. Quindi utilizzare preventDefault() e quindi rendere il vostro chiamate AJAX

Answer 5

È possibile utilizzare il seguente codice HTML

<form onSubmit="myFunction(); return false;"> 
    <input type="submit" value="Submit"> 
</form> 

Answer 6

Funziona anche:

<form id='my_form' action="javascript:myFunction(); return false;"> 

Answer 7

<form action='javascript:functionWithAjax("search");'> 
    <input class="keyword" id="keyword" name="keyword" placeholder="input your keywords" type="search"> 
    <i class="iconfont icon-icon" onclick="functionWithAjax("search");"></i> 
</form> 

<script type="text/javascript"> 
function functionWithAjax(type) { 
    // ajax action 

    return false; 
} 
</script>