尝试提交AJAX表单时出现Webpack错误

Question

I'm trying to submit a contact form using AJAX. Done this hundreds of times so far but never used webpack before.

My index.js file

$document.on('click', '#btn-submit-modal'), function(event){
  event.preventDefault();
  $.post("mailtest.php", $("#contactform").serialize());
});

When I run webpack I get the following error message:

ERROR in ./src/js/index.js
Module parse failed:     
..../index.js Unexpected token (24:1) //changed path for readability
You may need an appropriate loader to handle this file type.
|
|   $.post("mailtest.php", $("#contactform").serialize());
| });
|
 @ ./src/app.js 2:16-40
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/app.js

I have no clue what's the problem. mailtest.php is in my src directory. I wonder why I can't just hardcode something like this and push the .php file to my server, really frustrating.

Any help appreciated!

Answer 1

It has nothing to do with file name or whether it's present. The problem is that the code you're using is not valid JavaScript. You don't even get to run it, it fails when it gets parsed by webpack.

$document.on('click', '#btn-submit-modal'), function(event){
  event.preventDefault();
  $.post("mailtest.php", $("#contactform").serialize());
});
 ^
Unexpected parenthesis

What you wanted to do is pass the function as another parameter to the .on function, but you closed the parenthesis after '#btn-submit-modal', so the parenthesis on the last line is unmatched and therefore invalid. The correct code would be:

$document.on('click', '#btn-submit-modal', function(event){
  event.preventDefault();
  $.post("mailtest.php", $("#contactform").serialize());
});