Difference de soumission entre un submit et un evenement javascript [Résolu]

Signaler
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
Bonjour à tous,
J'ai un petit problème que je n'arrive pas à résoudre.
En utilisant les librairies de google, j'essayer de creer une petite application qui donne la distance séparant deux villes.
Vous pourrez trouver le même code plus bas ou à l'adresse suivante :
http://age3.info/test_distance.html

L'uilisateur choisit deux villes et clique sur le bouton submit pour commencer le traitement de la requete.
Jusque là tout fonctionne bien.

Or maintenant j'aimerai effectuer un evenement javascript qui, lorsque qu'on fait un onChange sur l'un des deux select, cela provoque la

soumissions du formulaire.
Pour cela j'ai essayé
 - onchange="submit();"
 - onchange="document.nomDuFormulaire.submit();"
 - plein d'autres syntaxes trouvées sur des forums
, mais bizarement ca ne fonctionne pas

Auriez vous une piste pour que je puisse supprimer le bouton submit et faire fonctionner l'application uniquement avec les onchange.

11 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,




Attention :


lorsque l'on soumet un formulaire par la méthode submit, le
gestionnaire d'évènement du formulaire onsubmit n'est pas pris en compte!



...



;O)
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

<html xmlns= "http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src=" http://maps.google.com/?file=api&amp;amp;v=2.x&amp;amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<style type="text/css">
body {
    font-family: Verdana, Arial, sans serif;
    font-size: 11px;
    margin: 2px;
}
table {
    font-family: Verdana, Arial, sans serif;
    font-size: 11px;
    margin: 2px;
}
table.directions th {
    background-color:#EEEEEE;
}
img {
    color: #000000;
}
</style>
<script type="text/javascript">
var map;
var gdir;
var geocoder = null;
var addressMarker;

function initialize() {
    if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "load", onGDirectionsLoad); <!-- Charge la partie pour les distances -->
        GEvent.addListener(gdir, "error", handleErrors); <!-- Charge la partie pour les messages d erreurs -->
        setDirections("Cardiff", "London", "fr");
    }
}
    
function setDirections(fromAddress, toAddress, locale) {
    gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale });
}

function handleErrors(){
    if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
    alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
    else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
    alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
    
    else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
    alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
             
    else if (gdir.getStatus().code == G_GEO_BAD_KEY)
    alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
    
    else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
    alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
            
    else alert("An unknown error occurred.");
}

function onGDirectionsLoad(){ 
    document.getElementById("km").value =gdir.getDistance().html.substring(0,4);
} 
</script>

</head>

<form id="monFormulaire" method="post" action="#" onSubmit="setDirections(this.from.value, this.to.value, 'fr'); return false">
  ----

     Choose the cities  |
    Formatted Directions |
    Map |
 
  ----

    From :,
    <select id ="fromAddress" name="from" onChange="submit();" >
        <option value="Cardiff" selected>Cardiff</option>
      <option value="Pontypridd">Pontypridd</option>
      <option value="Dijon">Dijon</option>
      <option value="Marseille">Marseille</option>
      <option value="Nantes">Nantes</option>
      <option value="Québec">Quebec</option>
    </select>,
                

            ,
    ,
 
  ----

    To :,
    <select id="toAddress" name="to" onChange="submit();" >
      <option value="Paris">Paris</option>
      <option value="Lyon">Lyon</option>
      <option value="London" selected>London</option>
      <option value="Marseille">Marseille</option>
      <option value="Nantes">Nantes</option>
      <option value="Montréal">Montréal</option>
    </select>,
 
  ----

    Kilometres :,
    ,
 
  ----

    
   

    ,
   

&amp;nbsp;

</form>

</html>
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
35
salut,

tu a essayé : onChange="me.submit()"

Si t'a besoin d'aide, MP !!!
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
Bonjour,

    document.getElementById("monFormulaire").submit();

             peut-être ?

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
enfin....
    ...onChange="document.getElementById('monFormulaire').submit();" ... pour être précis !

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

J'ai essayé toutes vos propositions, le submit se fait bel et bien, mais les données ne transitent pas.
Alors que si je clique sur le bouton submit, les données transittent.
Etrange non ?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
36
étrange ? non, non... bizarre, certes.
    qu'entends-tu par "les données ne transitent pas" ?
( pas testé, si ça se trouve, un contrôle du 3ème type avec google ? )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

Non je ne pense pas.
En faite, clairement le problème, c'est quand on n'utilise pas le bouton sumbit, j'ai la fonction de mon onSubmit

<form id="monFormulaire" method="post" action="#" onSubmit="setDirections(this.from.value, this.to.value, 'fr');">

qui ne s'execute pas.
Est ce normal selon vous ?

Merc pour toutes vos réponses.
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

Le plus simple c'est que vous voyez par vous même.

Executez le code, et essayé avec le bouton "button" et le bouton "submit". Vous verrez le problème.

Merci encore pour votre aide.
Messages postés
35
Date d'inscription
lundi 13 février 2006
Statut
Membre
Dernière intervention
15 avril 2014

Effectivement !
Merci beaucoup pour votre aide à tous.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
Bonjour,
il n'empêche que tu peux quand même submiter avec un bouton en créant une fonction de transfert...
exemple :
<html>
<head>
<script type="text/javascript">
//-------------------------
function Fct_Submit( this_){
  alert( this_.name);
  return( true);
}
//-------------------------
function Fct_Envoi( this_){
  if( Fct_Submit( this_))
    this_.submit();
}
</script>
</head>

<form name="F_FORM" onsubmit="return( Fct_Submit(this));">

</form>

</html>
A toi d'adapter...
;O)