it-swarm.com.de

Wie füge ich ein HTML/JavaScript-Formular in eine WordPress-Seite ein?

Ich versuche, ein kleines Formular in eine WordPress-Seite einzufügen, das eine kleine Berechnung basierend auf Benutzereingaben durchführt und eine Antwort zurückgibt. Anfänglich habe ich versucht, das gesamte Objekt (HTML und JS (in einem <script>-Tag) im Texteditor) zu kopieren, wodurch das HTML-Formular einwandfrei angezeigt wurde, aber der Versuch, das JS auszuführen, hat nicht funktioniert.

Das JS sieht so aus:

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);
}

Das HTML-Formular sieht folgendermaßen aus:

<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>

Ich habe später versucht, ein Plugin zu erstellen, mit dem die JS ausgeführt werden kann, während nur der obige HTML-Code in den Seitentext-Editor eingefügt wird, während die JS der calculate.js-Datei hinzugefügt wird. Es sah so aus:

 <?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');
 ?>

Keine der Lösungen funktioniert jedoch. Ich bin ziemlich neu in JavaScript und dies ist das erste Mal, dass ich selbst versucht habe, ein Formular wie dieses in WordPress zu implementieren. Daher bin ich mir nicht ganz sicher, wo es schief geht.

Das Formular wird einwandfrei angezeigt, aber wenn Sie auf die Schaltfläche "Berechnen" klicken, geschieht nichts.

BEARBEITEN: Siehe @RRikesh 'Kommentare unten zum Prozess der Behebung dieses Problems. Der Code, wie er oben steht, funktioniert jetzt für mich.

1
rpbtz

Sie haben eine Reihe von Problemen:

1. WordPress Teil:

Ihre Funktion ist mit wp_enqueue_scripts verknüpft und sollte folgendermaßen aussehen:

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

Beachten Sie die unterschiedlichen Schreibweisen zwischen wp_enqueue_scripts und wp_enqueue_script

2. Der HTML/JS-Teil:

Fügen wir den beiden Eingabefeldern einige id hinzu, damit es einfacher ist, sie als Ziel festzulegen

<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>

Schreiben Sie dann Ihren JS neu und verwenden Sie etwas jQuery (da Sie es als Abhängigkeit hinzugefügt haben):

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 );
  });
});

Lesen über:

1
RRikesh