Discussion :

[chlock62]

Bonjour les amis,

M'intéressant à ce jour a la librairie Prototype de javascript et plus précisément l'une de ces nombreuse fonction, je me pose à un petit souci

M'inspirant de la fonction suivante "submit_to_remote" de prototype:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function submit_to_remote($name, $value, $options = array(), $options_html = array()){
    $options = _parse_attributes($options);
    $options_html = _parse_attributes($options_html);
 
    if (!isset($options['with'])){
      $options['with'] = 'Form.serialize(this.form)';
    }
 
    $options_html['type'] = 'button';
    $options_html['onclick'] = remote_function($options).' return false;';
    $options_html['name'] = $name;
    $options_html['value'] = $value;
 
    return tag('input', $options_html, false);
  }

pour exécuter une action AJAX sur l'événement onClick d'un bouton:

la fonction suivante renvoie un input button, donc au click sur le bouton enlèvement onClick sur ce bouton actionne l'action ajax, nous somme d'accord.
Mais ma question est la suivante

Ou est désactiver la soumission du formulaire lors de l'événement à la touche entrée?

Car m'étant servi de la fonction ci-dessus pour m'en créer une personnelle, quand je clique sur le bouton mon action ajax fonctionne merveilleusement bien, mais quand je clique sur la touche entrée j'ai toujours une soumission du formulaire avec un rechargement de page et non en ajax.

Voila mon input perso qui fonctionne:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<input type="button" onclick="$.ajax({url: '/resetting/send-email',
  cache: false,
  type: 'POST',data: $(this.form).serialize(),success: function(data){$('#reset_password').html(data);},error: function() { alert('Impossible de charger la requête Ajax'); }
});
return false;" value="Réinitialiser le mot de passe" class="">

Une idée les amis

Merci à tous

[sekaijin]

normal tu gère le click sur le bouton et non le submit du formulaire

http://www.w3schools.com/js/js_form_validation.asp
http://www.w3resource.com/html/attri...-attribute.php

A+JYT

[chlock62]

Oui merci sekaijin pour tes différentes informations, mais je voudrais savoir ou et comment prototype gère le submit.

Pour ma part j'ai ajouter onSubmit="return false;" dans la balise form, mais dans ce cas la touche entrée n'est plus permise et elle doit t'elle toujours fonctionnel car certain utilisateurs préfére les commandes clavier

[sekaijin]

non ce qu'il faut faire c'est ne pas mettre ta fonction sur le onclick mais sur le onsubmit

A+JYT

[chlock62]

Oui mais pourquoi une soumission de formulaire par un l'événement onClick avec l'utilisation de la librairie prototype cher ami.

prototype utilise bien un événement onClick pour soumettre des formulaires par un click sur un input bouton.

Un rappel de la fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function submit_to_remote($name, $value, $options = array(), $options_html = array())
  {
    $options = _parse_attributes($options);
    $options_html = _parse_attributes($options_html);
 
    if (!isset($options['with']))
    {
      $options['with'] = 'Form.serialize(this.form)';
    }
 
    $options_html['type'] = 'button';
    $options_html['onclick'] = remote_function($options).' return false;';
    $options_html['name'] = $name;
    $options_html['value'] = $value;
 
    return tag('input', $options_html, false);
  }

Tu me suis l'ami

[sekaijin]

non prototype utilise ce que tu lui dit d'utiliser

un clic et un clic une soumission une soumission
c'est à toi de choisir ce que tu veux faire

A+JYT

[kaari kosaku]

Et pourquoi ne pas utiliser un champ :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" value="Reinitialiser MdP"/>

Dans ton formulaire tu utiliser un évènement onSubmit pour repérer la validation du formulaire.

Le click sur le bouton déclenchera l'évènement onSubmit, toute autre forme de soumission aussi (ex: appui sur entrée).

[NoSmoking]

Bonjour,
le fait de faire [Entrée] sur un élément INPUT type="text" dans un formulaire à pour effet de soumettre celui ci, c'est le comportement par défaut.
Si tu veux que ce comportement soit inhibé il te faut le faire toi même

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('la_forme').on('submit', function(event){
  Event.stop(event);
});

[chlock62]

Merci les amis, le mieu est de gérer la soumission avec des onSubmit alors.

Mais je vais encore embéter le monde avec la librairie prototype:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function submit_to_remote($name, $value, $options = array(), $options_html = array())
  {
    $options = _parse_attributes($options);
    $options_html = _parse_attributes($options_html);
 
    if (!isset($options['with']))
    {
      $options['with'] = 'Form.serialize(this.form)';
    }
 
    $options_html['type'] = 'button';
    $options_html['onclick'] = remote_function($options).' return false;';
    $options_html['name'] = $name;
    $options_html['value'] = $value;
 
    return tag('input', $options_html, false);
  }

la fonction renvoie bien un input avec un évenement onClick et une soumission du formulaire par le click, donc comment gère t'il toute autre forme de soumission aussi (ex: appui sur entrée).

[chlock62]

Oui kaari kosaku mais si je veux utilisé un type="button" ou un type="image", haha

<form id="form_password" onSubmit="return false;" class="fos_user_resetting_request">

<input type="text" id="username" name="username" required="required" />


<input type="button" onClick="tout mon processus ajax au click">

NoSmoking est ce bon de mettre onSubmit="return false;" dans la balise form, je pense que ce doit être l'equivalent à Event.stop(event); de Prototype

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form id="form_password"    onSubmit="return false;" class="fos_user_resetting_request">

[kaari kosaku]

Oui kaari kosaku mais si je veux utilisé un type="button" ou un type="image", haha[/CODE]

ben type="submit" c'est un bouton...
Si tu veux soumettre un formulaire depuis une image, tu met dans ton image : onClick="form.submit()" (form étant un pointeur vers ton formulaire)...

[SpaceFrog]

Si tu veux soumettre un formulaire depuis une image, tu met dans ton image : onClick="form.submit()" (form étant un pointeur vers ton formulaire)...

Non non, un input type image fera l'affaire, pas besoin de rajouter un onclick sur une balise image.