为什么 jQuery 代码在 Magento 中不起作用答案

【问题标题】：Why jQuery Code is not working in Magento为什么 jQuery 代码在 Magento 中不起作用
【发布时间】：2019-12-11 10:01:19
【问题描述】：

代码运行良好，但问题是当我将此代码添加到 Magento 时，Javascript 不起作用。

让我稍微解释一下代码。有一个简单的form，它只有一个input 字段，用于输入电话号码。还有另一个名为form.php 的文件包含所有PHP 代码。每当有人在输入字段中输入电话号码时，PHP 都会将该号码保存在 CSV 文件中，该文件是在后台创建的。我不想将表单重定向到另一个页面，我只想在同一页面中显示一条小消息，而无需重新加载或重定向页面。

为此，我添加了一个 jQuery 代码，它工作正常，但创建代码是为了将它添加到 Magento，但是当我将此代码添加到 Magento 时，唯一的 Javascript 代码不起作用。有人对此有解决方案吗？

$(function() {
  $("#myform").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      type: 'POST',
      data: $(this).serialize(),
      beforeSend: function() {
        $("#message").html("sending...");
      },
      success: function(data) {
        $("#message").hide();
        $("#response").html(data);
      }
    });
  });
});

<form id="myform" action="https://www.tawakkalfabric.com/form.php" method="post">
  <div class="block-content">
    <div class="form-subscribe-header">
      <label for="newsletter">Sign Up for Our Newsletter:</label>
    </div>
    <div class="input-box">
      <input type="tel" name="name" placeholder="Sign Up for Our WHATSAPP" />
    </div>
    <div class="actions">
      <button type="submit" class="button"><span><span>Subscribe</span></span></button>
    </div>
    <div id="message"></div>
    <div id="response"></div>
  </div>
</form>

下面的代码在form.php:

<?php   
  $email = $_POST['email'];
  $name = $_POST['name'];
  $data = $name.",".$email;   
  $file = "sample.csv";
  file_put_contents($file, $data . PHP_EOL, FILE_APPEND);
  print "<h1 align=center>Thank you for submitting your email address!</h1>";
?>
<html>
<head>
  <title>ThankYou Page</title>
</head>
<body>
  <h1><a href="form.html">GO BACK</a></h1>
</body>

【问题讨论】：

您检查控制台是否有错误？ Java也是一种与Javascript非常不同的语言。我已经为你重新标记了你的问题
为什么问题被标记为java？
检查控制台日志
我没有标记java可能是错的对不起。

标签： javascript jquery magento

【解决方案1】：

试试下面的代码

<script>
    $(document).on("submit", "#myform", function(e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr("action"),
            type: 'POST',
            data: $(this).serialize(),
            beforeSend: function() {
                $("#message").html("sending...");
            },
            success: function(data) {
                $("#message").hide();
                $("#response").html(data);
            }
        });
    });
</script>

【讨论】：

你能解释一下为什么它不能只在 magento 中工作吗？

【解决方案2】：

Magento（类似于 WordPress）不会自动允许使用 $ 别名，因此您需要将代码包含在 jQuery 依赖项中，然后创建别名或将 $ 更改为 jQuery。

见https://magento.stackexchange.com/questions/97184/how-to-use-jquery-library-in-magento-2

【讨论】：