Sujet Précédent Sujet Suivant

<form action=page.php> en javascript

frou28 - Modifié par kazma le 21/01/2015 à 12:45
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 23 janv. 2015 à 12:02
Bonjour à tous,

Je suis en train de mettre en place un formulaire qui demande adresse aux visiteurs.

Je me base sur le script de Google pour empêcher les erreurs de saisie : lien

Le script fonctionne bien, j'arrive à passer les données dans l'URL via un GET mais je n'arrive pas à changer la page via le action="page.php". Auriez vous des idées sur ce qui bloque ? J'ai vu pas mal de script pour faire ça dans des forum mais des que j'ajoute des scripts le script de gmaps ne fonctionne plus

Merci pour vos réponses,

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
21 janv. 2015 à 13:09
Bonjour,

L'attribut ACTION d'une FORM est prise en compte lors d'un SUBMIT .
Tu peux, en javascript, soit faire une redirection en utlisant window.location
soit faire le SUBMIT de ton form via la méthode submit() http://www.w3schools.com/jsref/met_form_submit.asp .... tout dépend de tes besoins.

PS : il est d'usage ici de poster le code qui pose problème (et non de mettre un lien) ... en utilisant la coloration syntaxique:
Explications disponibles ici :
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
0
Réponse 2 / 2
frou28
21 janv. 2015 à 17:11
Bonjour Jordane54, merci pour ton aide.

Ci-joint le code, permettant de récupérer l'adresse, j'ai testé avec ta solution, cela ne semble pas fonctionner.

Merci, 



<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script>

    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
  </head>

  <body onload="initialize()">
    <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
             type="text"></input>
    </div>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>
  </body>
</html>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344
21 janv. 2015 à 17:41

j'ai testé avec ta solution, cela ne semble pas fonctionner.

Et tu as testé laquelle (parmis les deux proposées) ?

Surtout que dans le code que tu nous donnes.. je ne vois nul par une référence à ACTION .. ni même à une URL de type : page.php.......
0
frou28 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
23 janv. 2015 à 11:34
Bonjour, Oui désolé je ne voulais pas mettre mon code (qui ne fonctionne pas) à la suite du code de google qui fonctionne.

Donc j'ai ajouté à la fin du code : 


<form method="post" action="page.php">
  <input id="street_number" name="street_number" disabled>
  <input id="route"         name="route"         disabled>
  <input id="locality"      name="locality"      disabled>
  <input id="country"       name="country"       disabled>
<INPUT TYPE="submit" NAME="adresse" VALUE=" Envoyer ">
</form>
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 344 > frou28
23 janv. 2015 à 12:02
Bon.. ça amène d'autres questions... ^^

Tu mets des INPUT ... ok ... mais de quel type ? TEXT ? (il est préférable de le spécifier) 
<input type=text" id="street_number" name="street_number" disabled>


Ensuite... tu les mets en DISABLED ... donc non modifiables ... mais où récupères tu les données ?

Après... tu nous parles de VARIABLES GET dans ta question... hors je vois que ton FORM est en POST ..... encore une anomalie....

Et enfin .... Il nous manque ta page page.php .... et surtout .. il faudrait que tu nous expliques CLAIREMENT et en DETAIL ce que tu cherches à faire et/ou à obtenir... car là ce n'est pas très compréhensible....
0

Discussions similaires

Action Script 2.0
Li Lian Ji -
Li Lian Ji -

6 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
faire reapparaitre un form en mode design sous VB NET
thierrydelepine -
thierrydelepine -

5 réponses
Passer d'une form à une autre.
Marakima -
Whismeril -

12 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
Rejoignez-nous