Sujet Précédent Sujet Suivant

Javascript dans html

Fermé
rim2004m - 28 mars 2014 à 11:06
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 28 mars 2014 à 15:32
bonjour
j'ai le code suivant:
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Progression du profil</title>
</head>

<script type="text/javascript">
function valider(){
var nbremplis=0;

if(form1.name.value !=='' ) {nbremplis=nbremplis+1; }
if(form1.firstname.value!==''){nbremplis=nbremplis+1;}
if(form1.email.value!==''){nbremplis=nbremplis+1;}
if(form1.adresse.value!==''){nbremplis=nbremplis+1;}
if(form1.ville.value!==''){nbremplis=nbremplis+1;}
if(form1.telephone.value!==''){nbremplis=nbremplis+1;}
if(form1.nationnalite.value!==''){nbremplis=nbremplis+1;}
if(form1.lieunaissance.value!==''){nbremplis=nbremplis+1;}
if(form1.mydescription.value!==''){nbremplis=nbremplis+1;}
if(form1.coordbancaire.value!==''){nbremplis=nbremplis+1;}
if(form1.profession.value!==''){nbremplis=nbremplis+1;}
if(form1.revenu.value!==''){nbremplis=nbremplis+1;}
if(nbremplis==0)
{
document.write("la progression de votre profile est: 0% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='0'>");
document.write ("</progress>");
}
if(nbremplis==1)
{
document.write("la progression de votre profile est: 6% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='6'>");
document.write ("</progress>");
}
if(nbremplis==2)
{
document.write("la progression de votre profile est: 12% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='12'>");
document.write ("</progress>");
}
if(nbremplis==3)
{
document.write("la progression de votre profile est: 19% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='19'>");
document.write ("</progress>");
}
if(nbremplis==4)
{
document.write("la progression de votre profile est: 25% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='25'>");
document.write ("</progress>");
}
if(nbremplis==5)
{
document.write("la progression de votre profile est: 31% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='31'>");
document.write ("</progress>");
}
if(nbremplis==6)
{
document.write("la progression de votre profile est: 38% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='38'>");
document.write ("</progress>");
}
if(nbremplis==7)
{
document.write("la progression de votre profile est: 44% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='44'>");
document.write ("</progress>");
}
if(nbremplis==8)
{
document.write("la progression de votre profile est: 50% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='50'>");
document.write ("</progress>");
}
if(nbremplis==9)
{
document.write("la progression de votre profile est: 56% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='56'>");
document.write ("</progress>");
}
if(nbremplis==10)
{
document.write("la progression de votre profile est: 63% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='63'>");
document.write ("</progress>");
}
if(nbremplis==11)
{
document.write("la progression de votre profile est: 0% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='69'>");
document.write ("</progress>");}
if(nbremplis==12)
{
document.write("la progression de votre profile est: 75% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='75'>");
document.write ("</progress>");}
if(nbremplis==13)
{
document.write("la progression de votre profile est: 81% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='81'>");
document.write ("</progress>");
}
if(nbremplis==14)
{
document.write("la progression de votre profile est: 87% </br> </br>");
document.write ("<progress id='progress-bar' min='0' max='100' value='87'>");
document.write ("</progress>");
}
return false;
}
// document.write ("<progress id='progress-bar' min='0' max='100' value='50'>");
//document.write ("</progress>");
</script>

{% endblock %}


<body>

<div id = "conteneur">




<form action="{{ path('sifastform_progression')}}" method="post" name="form1" >
<!--<form action="{{ path('sifastform_progression')}}" method="post" name="form1" onsubmit="return valider();" >-->
<fieldset>


<input type="text" id="name" name="nom" placeholder="NOM" data-trigger="change" data-required="true" />
<input type="text" id="firstname" name="prenom" placeholder="PRENOM" data-trigger="change" data-required="true"/>

<input type="text" id="email" name="email"placeholder="EMAIL" data-trigger="change" data-required="true"/>
<input type="text" id="adresse" name="adresse" placeholder="ADRESSE" data-trigger="change" data-required="true" />
<input type="text" id="ville" name="ville" placeholder="VILLE" data-trigger="change" data-required="true" />
<input type="text" id="telephone" name="telephone" placeholder="TELEPHONE" data-trigger="change" data-required="true" />
<label for="datenaissance"> DATE DE NAISSANCE</label>
<input name="date" type="date" max="2012-06-25" min="2011-08-13" value="2011-11-26" data-trigger="change" data-required="true">

<input type="text" id="nationnalite" name="nationalite" placeholder="NATIONALITE" data-trigger="change" data-required="true" />
<input type="text" id="lieunaissance" name="lieunaissance" placeholder="LIEU DE NAISSANCE" data-trigger="change" data-required="true" />
<input type="text" id="carteidentite" name="carteidentite" placeholder="CARTE D'IDENTITE" data-trigger="change" data-required="true" />
<input type="text" id="facebookconnect" name="facebookconnect" placeholder="FACEBOOK CONNECT" data-trigger="change" data-required="true" />
<input type="text" id="mydescription" name="mydescription" placeholder="MYDESCRIPTION" data-trigger="change" data-required="true" />
<input type="text" id="coordbancaire" name="coordbancaire" placeholder="COORDONEES BANCAIRES" data-trigger="change" data-required="true" />
<input type="text" id="profession" name="profession" placeholder="PROFESSION" data-trigger="change" data-required="true" />
<input type="text" id="revenu" name="revenu" placeholder="REVENU" data-trigger="change" data-required="true" />

<input type="submit" value="VALIDER" onClick="return valider();"/>
<!--<progress id="progress-bar" min="1" max="100" value="document.getElementById('progress-bar').value = valider();"></progress> -->
<!--<<td pourcent=<?php include(javascrip);?>> -->
</fieldset>
</form>

</div>

</body>

</html>


/code


en cliquant sur mon bouton valider, la page actuelle disparaisse et une autre page s'affiche (la page de ma fonction javascript).
mais moi je veux que le contenu de ma ancienne page ne disparaisse pas et je veux afficher la fonction javascript sur ma page actuelle html.
s'il vous plait comment le faire??
merci d'avance
A voir également:

2 réponses

Réponse 1 / 2
Alko
Modifié par Alko le 28/03/2014 à 12:27
Bonjour,

Houla vous mélangez bien des choses qui n'ont rien à voir!

Si vous avez un formulaire celui ci sert à envoyer des informations.
Qui dit envoi dit réception ou traitement de celles ci, c'est là qu'intervient javascript ou PHP.
On peut le voir grâce aux attributs de votre balise FORM:

<form action="{{ path('sifastform_progression')}}" method="post" name="form1" >

L'attribut de balise action indique quelle page va recevoir les informations.
L'attribut method permet d'indiquer dans quelles variables de PHP celles ci sont envoyées(ici en POST donc prévu pour une autre page, la méthode GET est utilisé pour le traitement dans la même page -donc le PHP doit être dans la page du formulaire et ça pose un problème de sécurité: il ets facile en GET d'écrire des valeurs dans l'URL de la page et d'accéder à la base de données ; la méthode GET est donc moins recommandée).

Dans la création de site Internet on considère avant tout l'utilisateur. Ainsi si vous avez un formulaire une fois celui ci envoyé il faut avertir l'utilisateur et changer de page puisqu'une fois celui ci envoyé il ne va pas en renvoyer un autre. Or vous voulez faire l'inverse ce qui pose des problèmes de cohérences: Comment l'utilisateur ayant envoyé son formulaire va voir que celui ci est bien envoyé? Il y a des chances qu'il appuie une seconde fois (ou plus) sur le bouton d'envoi ce qui fera des doublons dans le traitement des informations envoyées. Même si l'utilisateur pense que le formulaire est bien envoyé il devra cliquer pour changer de page, l'ergonomie s'en trouve alourdie pour lui, tandis que le rediriger vers la page d'accueil ou une simple page indiquant que le formulaire est bien parti va plus l'inciter à continuer de naviguer sur le site.

Selon l'écriture de votre formulaire les données transmis par celui ci le sont dans la page indiqué par action de la balise form.
C'est donc un traitement en PHP et non en javascript, le javascript à ici d'autres utilités comme indiquer l'avancement du remplissage du formulaire.
En javascript il est pas possible de transférer des informations d'une page à l'autre directement, les variables(mise en mémoire d'information par l'ordinateur) sont internes à chaque page(sauf dans le cas des cookies mais c'est un autre sujet), il faut donc que vous vous tourniez vers le script PHP concernés et que vous le modifiez pour le mettre en GET si vous voulez l'utiliser sur la même page.
Compte tenu des explications que j'ai fournies il est peu probable que vous ayez intérêt à changer en GET, quell est le but?
Éventuellement vous pouvez utiliser la fonction PHP header(); pour rediriger vers une autre page(celle de votre choix donc le formulaire si vous y tenez)en indiquant celle ci (la fonction header de php) à la suite de votre traitement et avant tout affichage.

Je vous conseille de vous tourner vers :
des cours de PHP et javascript destiné à votre niveau et de consulter le manuel PHP(disponible en ligne) qui vous décrira comment utiliser la fonction header.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
28 mars 2014 à 15:30
Explication bien complète. Je me permet tout de même de te corriger sur un point : la méthode GET ou POST d'envoi des infos du formulaire ne définie pas la page sur laquelle sera effectuée le traitement (c'est le rôle de l'attribut action). On peut tout à fait effectuer le traitement sur la même page ou sur une autre page, peu importe la méthode GET ou POST.

Enfin il est également très facile de modifier les valeurs des paramètres POST. Celle-ci n'est donc absolument pas plus sécurisé que la méthode GET.
0
Réponse 2 / 2
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
28 mars 2014 à 15:32
Salut,

Si tu veux mettre à jour ta page sans recharger celle-ci, tu vas devoir te tourner vers le concept Ajax : https://developer.mozilla.org/fr/docs/Web/Guide/AJAX/Premiers_pas

Bonne journée
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses