Pour amp-fom quels événements pris en charge ?

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 9 Novembre 2016.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour

    Voili voilou.

    Je suis en train de terminer mon formulaire de notation à étoiles compatible AMP.

    J'ai le code suivant ( faut bien partager ;) ) :

    Code:
    
    <form method="post"
          id="votes"
          action-xhr="https://localhost"
          target="_top"
          custom-validation-reporting="as-you-go">
          <fieldset>
            <p>Votre vote :</p>
            <ul id="data"><li><label><input type="radio" name="param" value="7" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="6" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="5" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="4" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="3" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="2" on="change:votes.submit"></label></li><li><label><input type="radio" name="param" value="1" on="change:votes.submit"></label></li></ul>
    
            <ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
          </fieldset>
        <br/>
    </form>
    
    

    Je voudrais, que le fait de cliquer sur un input, déclenche la form.

    J'utilise l'event : "change".

    La form n'est pas déclenchée, je sais pas si cet event "change" est correct ou non.

    Comment faire pour déclencher le formulaire, seulement en cliquant sur un label/input ?

    Merci beaucoup de vos conseils

    Respectueusement.
     
  2. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Rebonjour

    Le problème, est que j'ai tiré ce code ci-dessus, de l'exemple ci-dessous :

    Code:
    
    <form method="post"
          id="poll1"
          action-xhr="/form/json/poll1"
          target="_blank"
          custom-validation-reporting="as-you-go">
        <fieldset>
            <p>What is your favorite flightless bird?</p>
            <ul>
                <li>
                    <label>
                        <input name="question1" value="Penguins" type="radio" on="change:poll1.submit">
                        Penguins
                    </label>
                </li>
                <li>
                    <label>
                        <input name="question1" value="Ostriches" type="radio" on="change:poll1.submit">
                        Ostriches
                    </label>
                </li>
                <li>
                    <label>
                        <input name="question1" value="Kiwis" type="radio" on="change:poll1.submit">
                        Kiwis
                    </label>
                </li>
                <li>
                    <label>
                        <input name="question1" value="Wekas" type="radio" on="change:poll1.submit">
                        Wekas
                    </label>
                </li>
            </ul>
        </fieldset>
    </form>
    
    
    J'ai omis de mettre le traitement d'erreur.

    D'où vient l'erreur dans mon message précédent ?

    Je peux fourniir le css.

    Merci beaucoup de vos réponses.

    Respectueusement.
     
  3. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    138
    J'aime reçus:
    0
  4. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour Monsieur

    J'ai AMP Validator 1.0.9, et Chrome 54 sous Linux Fedora 24 64 bits.

    Voici le code en entier :

    AMP Validator me donne la lumière verte ( aucune erreur), quand je lance le script, que ce soit en local ou sur mon site.

    Quelle que soit l'url : "https://localhost", ou : "https://www.pronostics-courses.fr".

    La direction de droite à gauche des étoiles fonctionne ( unicode-bidi: bidi-override; et direction: rtl; ), il semble que ce soit supporté par AMP.

    Du moins, la référence de AMP ne mentionne pas ces deux attributs css comme interdits.

    J'ajoute, que je n'ai pas ssl configuré en local sur mon ordinateur pour les accès web ( sous Nginx ).

    Par contre, mon site est bien en https. ( Nginx également ).

    Je remet de suite le script tmp.html sous : https://www.pronostics-courses.fr/tmp.html

    Merci beaucoup de ton aide.

    Respectueusement.




    Code:
    
    <!doctype html>
    <html amp>
    
    <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Nouvelles Courses</title>
    <link rel="canonical" href="https://www.pronostics-courses.fr/tmp.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
    <style amp-custom>
    html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
    box-sizing: border-box;
        margin: 0;
        border: none;
        padding: 0;
    }
    a {
    text-decoration: none;
    }
    ul,ol {
    list-style: none;
    }
    amp-img {
    width:1px;
    height:1px;
    outline: none;
    }
    body {
    font-family: Lora, sans-serif;
    font-size:20px;
    }
    @media screen and (max-width:640px){
    body, button.header-button, button.menu-button, li.menu-item {
    font-size:16px;
    }
    }
    #staring_form
    {
    display:inline-block;
    background-color:rgb(255, 255, 255);
    border-collapse:collapse;
    border-radius:6px;
    border:thin solid rgb(0, 0, 0);
    font-size:18px;
    margin-left:auto;
    margin-right:auto;
    padding: 0.7em 0.5em;
    text-align:center;
    max-width:90%;
    }
    #poll fieldset
    {
    border:thin solid rgb(0, 0, 0);
    border-radius:4px;
    padding:10px;
    margin:10px;
    border:0;
    }
    #row_votes
    {
    color:transparent;
    display:inline-block;
    text-align:center;
    unicode-bidi: bidi-override;
    direction: rtl;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:0;
    width: 140px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    /* color:transparent;  */
    background: url(/images/star_green.gif) top left repeat-x;
    padding:0;
    border:0;
    }
    #row_votes li
    {
    display:inline-block;
    width:20px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding:0;
    margin:0;
    border:none;
    }
    #row_votes input
    {
    position:absolute;
    left: -9999px;
    width:20px;
    height: 20px;
    line-height:20px;
    padding:0;
    margin:0;
    border:0;
    }
    #row_votes li label
    {
    display:inline-block;
    cursor:pointer;
    vertical-align:middle;
    width:20px;
    height: 20px;
    line-height:20px;
    padding:0;
    margin:0;
    border:0;
    }
    #row_votes li:hover,
    #row_votes li:hover ~ li
    {
    background: url(/images/star_yellow.gif) top center no-repeat;
    width:20px;
    height: 20px;
    vertical-align:middle;
    line-height:20px;
    padding: 0;
    margin:0;
    border:0;
    }
    ul#current-rating
    {
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:0;
    width: 140px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding:0;
    border:0;
    }
    ul#current-rating > li
    {
    display:inline-block;
    font-family: Verdana sans-serif;
    font-size:1em;
    font-weight:600;
    color:rgb(225,169,0);
    width:20px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding: 0;
    border:0;
    margin:0;
    }
    div.centered
    {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }
    </style>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    </head>
    <body>
    
    <p><br /></p>
    
    <div class="centered">
    
    <div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
    <br/>
    <div class="sous_titre" itemprop="votes">162</div>
    <div class="sous_titre">Votes</div>
    &nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
    <div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
    <form method="post"
          id="poll"
          action-xhr="https://www.pronostics-courses.fr/php/courses_nouvelles/mode_demploi_4.html"
          target="_top">
          <fieldset>
            <p>Votre vote :</p>
            <ul id="row_votes"><li><label for="form_7"></label><input id="form_7" type="radio" name="param" value="7" on="change:poll.submit"></li><li><label for="form_6"></label><input id="form_6" type="radio" name="param" value="6" on="change:poll.submit"></li><li><label for="form_5"></label><input id="form_5" type="radio" name="param" value="5" on="change:poll.submit"></li><li><label for="form_4"></label><input id="form_4" type="radio" name="param" value="4" on="change:poll.submit"></li><li><label for="form_3"></label><input id="form_3" type="radio" name="param" value="3" on="change:poll.submit"></li><li><label for="form_2"></label><input id="form_2" type="radio" name="param" value="2" on="change:poll.submit"></li><li><label for="form_1"></label><input id="form_1" type="radio" name="param" value="1" on="change:poll.submit"></li></ul>
    
            <ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
          </fieldset>
        <br/>
    </form>
    <meta itemprop="average" content="3.5"/>
    <meta itemprop="best" content="7"/>
    <meta itemprop="worst" content="1"/>
    </div>
    
    </div>
    </div>
    
    <p><br /></p>
    
    </body>
    </html>
    
    
     
  5. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    138
    J'aime reçus:
    0
    Je ne connais pas AMP, donc je peux qu'émettre des hypothèses.
    Par exemple en modifiant le type d'événement. tap à la place de change.
    Sinon en remplacant les boutons radio par des boutons de type submit puis en vérifiant côté serveur quel bouton à été appuyé.
     
  6. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour Monsieur

    Merci beaucoup pour l'indication de l'event : "tap" pour les "input type=radio".

    Cependant, l'exemple que j'ai cité dans mon deuxième message, provient du site Github, qui est quand même une référence ?

    Il utilise l'event "change" pour ces "input type=radio".

    Et... Avec l'event "tap" ( et des input ), çà ne marche pas non plus.

    Je penche plutôt soit pour un problème de localhost, ( qui n'est d'ailleurs pas accessible en https dans mon cas ), soit en externe sur mon site, à cause de la configuration anti xss de mon serveur Nginx.

    Je suis aussi obligé , d'accéder en mode POST et pas en mode GET, pour qu'il n'y ait pas de paramètre parasite dans les urls.

    Donc, avec des <button> ( mode GET ), j'aurais des problèmes insurmontables.

    Je vais me renseigner sur le net.

    Merci beaucoup pour ton aide. ;)

    Respectueusement.
     
  7. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    138
    J'aime reçus:
    0
    Oui justement, ça fonctionne avec $_POST.
    L'idée est la suivante (je le tape en HTML, tu convertira en AMP ;-) )
    Code:
    <form method="post" action="mon-fichier.php">
    <input type="submit" name="etoile1" value="1" />
    <input type="submit" name="etoile2" value="2" />
    </form>
    et dans le fichier php
    Code:
    if(isset($_POST['etoile1'])){
    // clic sur 1 étoile
    }elseif(isset($_POST['etoile2'])){
    // clic sur 2 étoile
    }
    etc
    Normalement ça devrait fonctionner.
     
  8. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour Monsieur

    Super, je vais voir demain matin. ;)

    Merci beaucoup.

    Très respectueusement.
     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour

    Possible, probable que mon problème vient du fait que mon serveur Nginx ( le local et le remote ), n'est pas configuré comme il faut.

    D'après l'url suivante :

    https://github.com/ampproject/amphtml/blob/master/spec/amp-cors-requests.md

    les serveurs recevant de requêtes AMP, doivent rendre des headers ( par mesure de sécurité ).

    Vais voir çà cette après-midi.

    Amicalement.
     
  10. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour

    Suivant les commendations de Github ( AMP Project ), j'ai mis dans le fichier : "cors.conf" le contenu ci-dessous, que j'ai inclus dans nginx.conf

    Est-il bien configuré, pour que mon site puisse recevoir des requêtes AMP ?

    Pour l'instant en local sur mon ordinateur.

    Respectueusement.


    Code:
    
    set $cors "false";
    
    if ($http_origin ~ (localhost|https://cdn\.ampproject\.org|https?://www\.pronostics\-courses\.fr)) {
    	set $cors "true";
    }
    if ($request_method = 'OPTIONS') {
    	set $cors "${cors}options";  
    }
    if ($request_method = 'GET') {
    	set $cors "${cors}get";  
    }
    if ($request_method = 'POST') {
    	set $cors "${cors}post";
    }
    
    if ($cors = "true") {
    	#Catch all incase there's a request method we're not dealing with properly
    	add_header 'Access-Control-Allow-Origin' "$http_origin";
    }
    
    if ($cors = "trueget") {
    	add_header 'Access-Control-Allow-Origin' "$http_origin";
    	add_header 'Access-Control-Allow-Credentials' 'true';
    	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    	add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
    
    if ($cors = "trueoptions") {
    	add_header 'Access-Control-Allow-Origin' "$http_origin";
    
            #Om nom nom cookies
    	add_header 'Access-Control-Allow-Credentials' 'true';
    	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    	#Custom headers and headers various browsers *should* be OK with but aren't
    	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    	#Tell client that this pre-flight info is valid for 20 days
    	add_header 'Access-Control-Max-Age' 1728000;
    	add_header 'Content-Type' 'text/plain charset=UTF-8';
    	add_header 'Content-Length' 0;
    	return 204;
    }
    
    if ($cors = "truepost") {
    	add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    	add_header 'Access-Control-Allow-Credentials' 'true' always;
    	add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    	add_header 'AMP-Access-Control-Allow-Source-Origin' "$http_origin" always;
    	add_header 'Access-Control-Expose-Headers' 'AMP-Access-Control-Allow-Source-Origin' always;
            # required to be able to read Authorization header in frontend
            add_header 'Access-Control-Expose-Headers' 'Authorization' always;
    	add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Accept,Authorization,Cache-Control,Content-Type,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    }
    
    
     
  11. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Rebond

    Voilà, j'ai configuré le serveur pour les CORPS ( sécurité des requêtes ) et mis le script https://www.pronostics-courses.fr/new_tmp.php à la racine.

    Cà marche pas.

    J'ai vu vaguement dans Firebug, que AMP permettait l'event : "click".

    Je ne sais pas s'il faut absolument des <label> autour de chaque ligne du formulaire ( autour des <input> ) ou non.

    Et puis... Mon <fieldset> encadre bien les lignes d'inputs, mais il y aussi la deuxième ligne dedans (comme dirait Obélix ), qui n'a rien a voir avec une<form>.

    Je crois aussi, que AMP n'accepte pas que l'on fasse de genre de style : { position: absolute; left: -9000px; } ( pour les inputs ).

    Je vais revoir ma copie demain, mais c'est stupide j'avoue de faire du "trial and error".

    Merci beaucoup de votre aide.

    Amicalement.
     
  12. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour

    Voilà :

    Code:
    
    <!doctype html>
    <html amp>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <title>Nouvelles Courses</title>
    <link rel="canonical" href="new_tmp.php">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
    <style amp-custom>
    html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
    box-sizing: border-box;
        margin: 0;
        border: none;
        padding: 0;
    }
    a {
    text-decoration: none;
    }
    ul,ol {
    list-style: none;
    }
    body {
    font-family: Lora, sans-serif;
    font-size:20px;
    }
    @media screen and (max-width:640px){
    body, button.header-button, button.menu-button, li.menu-item {
    font-size:16px;
    }
    }
    form.amp-form-submit-success [submit-success],
    form.amp-form-submit-error [submit-error]{
    margin-top: 16px;
    }
    form.amp-form-submit-success [submit-success] {
    color: green;
    }
    form.amp-form-submit-error [submit-error] {
    color: red;
    }
    form.amp-form-submit-success.hide-inputs > input {
    display: none
    }
    #staring_form
    {
    display:inline-block;
    background-color:rgb(255, 255, 255);
    border-collapse:collapse;
    border-radius:6px;
    border:thin solid rgb(0, 0, 0);
    font-size:18px;
    margin-left:auto;
    margin-right:auto;
    padding: 0.7em 0.5em;
    text-align:center;
    max-width:90%;
    }
    form.amp-form fieldset
    {
    border:thin solid rgb(0, 0, 0);
    border-radius:4px;
    padding:10px;
    margin:10px;
    }
    #row_votes
    {
    color:transparent;
    display:inline-block;
    text-align:center;
    unicode-bidi: bidi-override;
    direction: rtl;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:0;
    width: 140px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    background: url(/images/star_green.gif) top left repeat-x;
    padding:0;
    border:0;
    }
    #row_votes li
    {
    display:inline-block;
    cursor:pointer;
    width:20px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding:0;
    margin:0;
    border:0;
    }
    .other-input
    {
    /* appearance:none;  */
    color:transparent;
    visibility:hidden;
    
    width:20px;
    height: 20px;
    line-height:20px;
    padding:0;
    margin:0;
    border:0;
    }
    #row_votes li:hover,
    #row_votes li:hover ~ li
    {
    color:transparent;
    background: url(/images/star_yellow.gif) top center no-repeat;
    width:20px;
    height: 20px;
    vertical-align:middle;
    line-height:20px;
    padding: 0;
    margin:0;
    border:0;
    }
    ul#current-rating
    {
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    margin-bottom:0;
    width: 140px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding:0;
    border:0;
    }
    ul#current-rating > li
    {
    display:inline-block;
    font-family: Verdana sans-serif;
    font-size:1em;
    font-weight:600;
    color:rgb(225,169,0);
    width:20px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding: 0;
    border:0;
    margin:0;
    }
    div.centered
    {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    }
    </style>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    </head>
    <body>
    
    <p><br /></p>
    
    <div class="centered">
    
    <div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
    <div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
    <br/>
    <div class="sous_titre" itemprop="votes">162</div>
    <div class="sous_titre">Votes</div>
    &nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
    <div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
    <form method="post" action-xhr="https://localhost/new_tmp.php" target="_blank">
          <fieldset>
    	<p>Votre vote :</p>
    	<ul id="row_votes"><li><input type="submit" name="param" value="7" class="other-input"></li><li><input type="submit" name="param" value="6" class="other-input"></li><li><input type="submit" name="param" value="5" class="other-input"></li><li><input type="submit" name="param" value="4" class="other-input"></li><li><input type="submit" name="param" value="3" class="other-input"></li><li><input type="submit" name="param" value="2" class="other-input"></li><li><input type="submit" name="param" value="1" class="other-input"></li></ul>
    
    	<ul id="current-rating"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
          </fieldset>
    </form>
    <meta itemprop="average" content="3.5"/>
    <meta itemprop="best" content="7"/>
    <meta itemprop="worst" content="1"/>
    </div>
    
    </div>
    </div>
    
    <p><br /></p>
    
    </body>
    </html>
    
    


    Je crois avoir htmlisé mon formulaire POST AMP sans erreur, mais l'url dans action-xhr ne se lance pas.

    Pour l'instant, c'est le même script, mais je crois qu'il faut que le action-xhr soit un script json, et que action-xhr ne permet pas de recharger entièrement une page.

    Je n'arrive pas à obtenir des infos là-dessus sur le net.

    Déjà que je ne sais pas grand chose sur le json.

    Merci beaucoup de votre aide.

    Amicalement.
     
  13. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    138
    J'aime reçus:
    0
    Décidemment, ça semble bien compliqué les formulaires AMP.
    Donc en gros tu vas obligatoirement devoir utiliser un appel Ajax pour gérer ton formulaire ?
     
  14. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 022
    J'aime reçus:
    12
    Bonjour niap

    Je ne sais pas encore, mais celà semblerait logique, qu'une action de type Ajax ne puisse pas charger entièrement une page.

    J'ai à l'instant regardé des exemples ( bien fournis ) de l'utilisation de JSON avec la Fetch API ( recommandée ), ou un objet XMLHttpRequest ( devient obsolète progressivement ).

    Intéressant, mais je dois surtout tester en réel, après avoir trouvé si possible, le type de script qu'il est possible de lancer avec une action-xhr.

    J'ai eu de la chance ce soir; le site de David Walsh est super :

    https://davidwalsh.name/fetch

    Merci beaucoup pour ton aide. ;)

    Amicalement.
     
Chargement...
Similar Threads - fom événements pris Forum Date
Nom de domaine chez Infomaniak vers site 1and1 Noms de domaine et référencement 28 Novembre 2015
Migrer vers Infomaniak, comment procéder ? Administration d'un site Web 1 Août 2013
Problemes pour récupérer les fichiers en FTP d'infomaniak Administration d'un site Web 25 Février 2013
Serveur mutualisé infomaniak Vs serveur virtuel xl linux 1&1 Administration d'un site Web 31 Janvier 2013
Infomaniak et paiement CB ATOS Développement d'un site Web ou d'une appli mobile 5 Octobre 2012
Infomaniak ou Easy hébergement? Administration d'un site Web 8 Mars 2012
quand webmaster se trompe sur notre perfomance (vitesse) Crawl et indexation Google, sitemaps 23 Février 2011
Hébergement mutualisé performant (Infomaniak, Hostgator ou OVH?) Administration d'un site Web 8 Décembre 2010
Fomulaire contact champs rempli obligatoirement. Développement d'un site Web ou d'une appli mobile 24 Octobre 2010
Infomaniak out ? Administration d'un site Web 1 Juillet 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice