11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
hypothétiquement j'aimerais arriver à
D'un coté un objet json exemple :

"identification": 
    { "prenom": "Amandine", 
      "nom": "Dupont", 
      "DDN": "10/10/1985",
      "ville": 3,
      "sexe": 2,
      "newsletter":1
    } 


De l'autre un html qui contient :


<input type="text" name="prenom" id="prenom"></input>
<input type="text" name="nom" id="nom"></input>
<input type="text" name="ddn" id="ddn"></input>
<select name="ville" id="ville">
     <option value="1">Agen</option>
     <option value="2">Lyon</option>
     <option value="3">Paris</option>
</select>
<input type="radio" name="sexe" id="sexe1"></input>Homme
<input type="radio" name="sexe" id="sexe2"></input>Femme
<input type="checkbox" name="newsletter" id="newsletter"></input>Voulez vous recevoir la newsletter ?


Hum voyez ce qui me manque c'est la fonction js qui fait le lien entre les 2... je précise que j'utilise jquery...
J'ai aucune idée de quel direction prendre je n'arrive même pas à savoir si cela est possible ... Help!!!!
Modifié par Su4p (21 Jan 2011 - 17:05)
Bonjour,
Su4p a écrit :
ce qui me manque c'est la fonction js qui fait le lien entre les 2..

Et ce qui nous manque, c'est la signification de «faire le lien entre les deux».
- Tu veux générer des éléments HTML à partir de ton objet JavaScript?
- Tu veux parcourir des éléments du DOM pour générer un objet JavaScript qui reprend les informations essentielles?
- Autre chose?
autre chose : Remplir le formulaire avec les valeurs en base
Il s'agit là du formulaire de modification des données donc le but est de remplir les input avec les valeurs déjà présentes dans la bases de donnée.
Modifié par Su4p (21 Jan 2011 - 14:54)
Du coup j'ai avancé un petit peu :
mon json est maintenant comme ça :


{
				"nom":{
					"id":"nom",
					"type":"text",
					"valeur":"'.$this->m_nom.'"
				},
				"prenom":{
					"id":"prenom",
					"type":"text",
					"valeur":"'.$this->m_prenom.'"
				},
				"sexe":{
					"id":"sexe",
					"type":"radio",
					"valeur":"'.$this->m_sexe.'"
				},
				"DDN":{
					"id":"DDN",
					"type":"text",
					"valeur":"'.$this->m_DDN.'"
				},
				"medNom":{
					"id":"medNom",
					"type":"text",
					"valeur":"'.$this->m_medNom.'"
				},
				"medVille":{
					"id":"medVille",
					"type":"text",
					"valeur":"'.$this->m_medVille.'"
				},
				"medCP":{
					"id":"medCP",
					"type":"text",
					"valeur":"'.$this->m_medCp.'"
				},
				"tel":{
					"id":"tel",
					"type":"text",
					"valeur":"'.$this->m_tel.'"
				},
				"secu":{
					"id":"secu",
					"type":"text",
					"valeur":"'.$this->m_secu.'"
				},
			}


Mon html :

<tr>
	<td colspan="3"><h3> Identification du patient </h3></td>
</tr>
<tr>
	<td class="labelTab"> Nom : </td> 
	<td class="champsTab"><input class="mask-alpha obligatoire" id="nom" name="nom" type="text"></input></td>
	<td class="champsTab"><div class="msgErreur" id="nomMsgErreur"> Vous n'avez pas renseigné le nom.</div></td>
</tr>
<tr>
	<td class="labelTab"> Prenom : </td> 
	<td class="champsTab"><input class="mask-alpha obligatoire" id="prenom" name="prenom" type="text"></input></td>
	<td class="champsTab">
		<div class="msgErreur" id="prenomMsgErreur"> Vous n'avez pas renseigné le prenom.</div>
	</td>
</tr>
<tr>
	<td class="labelTab"> Sexe : </td>
	<td>
		<input id="sexe2" class="obligatoire" name="sexe" type="radio" value="2"></input>F
		<input id="sexe1" class="obligatoire" name="sexe" type="radio" value="1"></input>M
	</td>
	<td class="champsTab">
		<div class="msgErreur" id="sexeMsgErreur"> Vous n'avez pas renseigné le sexe.</div>
	</td>
</tr>
<tr>
	<td class="labelTab"> Date de naissance : </td>
	<td class="champsTab"><input class="obligatoire" id="DDN" name="DDN" type="text" ><input type="button" id="f_btn2"></input></td> 
	<td class="champsTab">
		<div class="msgErreur" id="DDNMsgErreur"> Vous n'avez pas renseigné la date de naissance.</div>
	</td>
</tr>
<tr>
	<td colspan="3"><h4>Medecin traitant : </h4></td>
</tr>
<tr>
	<td class="labelTab"> Nom : </td>
	<td class="champsTab"><input class="mask-alpha"  id="medNom" name="medNom" type="text"></input></td>
	<td class="champsTab"></td>
</tr>
<tr>
	<td class="labelTab">Ville : 
	<td class="champsTab"><input class="mask-alpha"  id="medVille" name="medVille" type="text"></input></td>
	<td class="champsTab"></td>
</tr>
<tr>
	<td class="labelTab">CP : 
	<td class="champsTab"><input class="mask-alphanum" id="medCp" name="medCp" type="text"></input></td>
	<td class="champsTab"></td>
</tr>
<tr>
	<td class="labelTab"> Téléphone : </td>
	<td class="champsTab"><input class="mask-num" id="tel" name="tel" type="text"></input></td>
	<td class="champsTab"></td>
</tr>
<tr>
	<td class="labelTab"> Numéro de sécurité social : </td>
	<td class="champsTab"><input class="obligatoire mask-num" id="secu" name="secu" type="text"></input></td>
	<td class="champsTab">
		<div class="msgErreur" id="secuMsgErreur"> Vous n'avez pas renseigné le numéro de sécurité social.</div>
	</td>
</tr>


et enfin et surtout ma petite fonction qui fait le lien :

var obj = jQuery.parseJSON('<?=$maVisiteDeScreening->m_monIdentification?>');
for(key in obj){
	 
	 switch(obj[key].type){
		case 'radio' :
			$('#'+obj[key].id+obj[key].valeur).attr('checked', true);
		case 'text' :
			$('#'+obj[key].id).val(obj[key].valeur);
		case 'select' : 
		
	}
}

Voila !
Dit(es) moi ce que tu (vous) en penses (pensez)
a écrit :
edit :ou pas...

Modifié par Su4p (25 Jan 2011 - 22:56)