web-dev-qa-db-fra.com

Comment insérer un formulaire HTML/JavaScript dans une page WordPress?

J'essaie d'insérer un petit formulaire dans une page WordPress qui effectue un calcul mineur basé sur les entrées de l'utilisateur et renvoie une réponse. Au départ, j'ai essayé de copier le tout (HTML et JS (dans une balise <script>) dans l'éditeur de texte), ce qui permettait d'afficher correctement le formulaire HTML, mais essayer d'exécuter le JS n'a pas fonctionné.

Le JS ressemble à ceci:

function calculateX(){
    var inputA, inputB, total;
    inputA = document.form.inputA.value;
    inputB = document.form.inputB.value;
    total = inputA + inputB * 10;
    document.getElementById("result").innerHTML = parseInt(total);
}

Le formulaire HTML ressemble à ceci:

<form name="form">
    InputA: <input type="text" name="inputA" /><br />
    InputB: <input type="text" name="inputB" /><br />
    <input type="button" value="Calculate" onclick="calculateX()" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

Par la suite, j'ai essayé de créer un plug-in qui exécuterait le JS en insérant uniquement le code HTML ci-dessus dans l'éditeur de texte de page, tout en ajoutant le JS au fichier calculate.js. Cela ressemblait à ceci:

 <?php
 /*
 Plugin Name: Calculate
 */
 function calculate() {
      wp_register_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__);
 }
 add_action('wp_enqueue_scripts', 'calculate');
 ?>

Cependant, aucune solution ne fonctionne. Je suis assez nouveau en JavaScript et c'est la première fois que je tente d'implémenter moi-même un formulaire de ce type dans WordPress. Je ne suis donc pas tout à fait sûr de ce qui ne va pas.

Le formulaire est parfaitement affiché, mais lorsque vous cliquez sur le bouton "Calculer", il ne fait rien.

EDIT: Voir les commentaires de @RRikesh ci-dessous sur le processus de résolution de ce problème. Le code tel qu'il se trouve ci-dessus fonctionne pour moi maintenant.

pluginsphpjavascriptformshtml
1
rpbtz

Vous avez un tas de problèmes:

1. partie WordPress:

Votre fonction est liée à wp_enqueue_scripts et devrait ressembler à ceci:

function wpse238953_calculate() {
      wp_enqueue_script('calculate', plugins_url('/js/calculate.js'), __FILE__), array('jquery'), false);
 }
 add_action('wp_enqueue_scripts', 'wpse238953_calculate');

Notez les différentes orthographes entre wp_enqueue_scripts et wp_enqueue_script

2. La partie HTML/JS:

Ajoutons un id aux deux champs d’entrée pour qu’il soit plus facile de les cibler

<form name="form">
    InputA: <input type="text" id="inputA" name="inputA" /><br />
    InputB: <input type="text" id="inputB" name="inputB" /><br />
    <input type="button" id="calculate" value="Calculate" /><br />
    Your result is: <b><span id="result"></span></b>
</form>

Puis réécrivez votre JS et utilisez un certain jQuery (puisque vous l'avez ajouté en tant que dépendance):

jQuery(document).ready(function($){
    'use strict';
  $('#calculate').mousedown(function(){
    var valueA = parseFloat( $('#inputA').val(), 10 ),
        valueB = parseFloat( $('#inputB').val(), 10 ),
        total = ( valueA + valueB ) * 10;

    $('#result').text( total );
  });
});

Lire à propos de:

1
RRikesh