Magento Question posted in
The official documentation can be found here.

Why jQuery Code is not working in Magento

The code is working fine but the problem is that when I add this code to Magento it the Javascript doesn’t work.

Let me explain a little bit about code. There is a simple form that has only one input field which is intended to enter phone numbers. There is another file called form.php that has all the PHP code. Whenever someone enters a phone number in the input field the PHP saves that number in the CSV file which is created in the backed. I don’t want to redirect the form to another page, I just wanted a small message to appear in the same page without page reloading or redirecting.

For that, I added a jQuery code and it was working fine but the code was created to add it on Magento but when I add this code to Magento then the only the Javascript code doesn’t work. Does anyone have a solution for this?

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

The code below is in 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>
Tags:

2

Answers


  1. 0

    try following code

    <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>
    Login or Signup to reply.
  2. 0

    Magento (similar to WordPress) doesn’t automatically allow for the $ alias, so you will need to include the code with the jQuery dependencies and then either create the alias or change the $ to jQuery.

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search