2015-01-24 10 views
12

Ho il seguente modulo. Mi piacerebbe che fosse inviato automaticamente tramite jQuery quando l'utente effettua una selezione, senza dover premere il pulsante di invio. Come faccio a fare questo?Come inviare il modulo su Select Change

<form action="" method="post"> 
    <select name="id" id="cars"> 
     <option value="">Choose</option> 
     <option value="1">Toyota</option> 
     <option value="2">Nissan</option> 
     <option value="3">Dodge</option> 
    </select> 
    <input type="submit" name="submit" value="Submit"> 
</form> 

adeneo, ho provato il tuo suggerimento ma non funziona ancora. Ecco il codice completo, qualcosa di sbagliato?

<!doctype html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#cars').on('change', function() { 
       this.form.submit(); 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <form action="" method="post"> 
      <select name="id" id="cars"> 
       <option value="">Select...</option> 
       <option value="1">Toyota</option> 
       <option value="2">Nissan</option> 
       <option value="3">Dodge</option> 
      </select> 
      <input type="submit" name="submit" value="Submit"> 
     </form> 
    </body> 
</html> 

risposta

10

Nel modulo manca un valore di azione, che impedisce di inviare il modulo alla fine. Ma a metà del tempo si dovrebbe correggere questo codice:

$(document).ready(function() { 
    $('#cars').on('change', function() { 
    document.forms[myFormName].submit(); 
    }); 
}); 

È possibile anche inviare un modulo attivando pulsante di invio evento Click:

$(document).ready(function() { 
    $('#cars').on('change', function() { 
    var $form = $(this).closest('form'); 
    $form.find('input[type=submit]').click(); 
    }); 
}); 
+0

I cambiato in action = "page.php" che è il nome della pagina, e ancora non invia il modulo. –

+0

Ho elencato due soluzioni funzionanti, fammi sapere se è stato utile. – Sigismundus

2

addirittura si può fare questo:

<form action="" method="post"> 
<select name="id" id="cars"> 
    <option value="">Choose</option> 
    <option value="1">Toyota</option> 
    <option value="2">Nissan</option> 
    <option value="3">Dodge</option> 
</select> 
<input id='submit' type="submit" name="submit" value="Submit"> 

$(document).ready(function() { 
    $('#cars').on('change', function() { 
    $('#submit').click(); 

    }); 
}); 
5

Nel mio ca questo funziona perfettamente e funziona con o senza il pulsante di invio.

<form action="" method="post"> 
    <select name="id" id="cars"> 
     <option value="">Choose</option> 
     <option value="1">Toyota</option> 
     <option value="2">Nissan</option> 
     <option value="3">Dodge</option> 
    </select> 
</form> 

<script type="text/javascript"> 

    jQuery(function() { 
    jQuery('#car').change(function() { 
     this.form.submit(); 
    }); 
}); 
</script> 
+0

Questo non dovrebbe funzionare ... – Lee

+0

Funziona per me in CoffeeScript, ma sto usando '$ ('# car'). Cambia ->'. –

0

So che questo è un po 'vecchio (e già risposto), ma nessuna delle risposte era abbastanza flessibile come avrei voluto, così in basso è la soluzione che ho finito con:

$(document).ready(function() { 
    $('#cars').change(function() { 
    var parentForm = $(this).closest("form"); 
    if (parentForm && parentForm.length > 0) 
     parentForm.submit(); 
    }); 
}); 
Problemi correlati