尝试从表单获取值时，jQuery Val无法正常工作

Question

我试图在woocommerce产品页面中插入一个表单。 我已经在产品页面中插入了表格。 提交表单后，我正在尝试获取电子邮件（表单输入值）并进行相应的验证。

问题是我无法使用jQuery获得某些主题的价值。 我在萤火虫中看到了表单及其元素。 但是jQuery甚至不适用于可变产品（woocommerce产品页面）中的click事件。 此处的表单位于其表单内部（其enctype为multipart / form-data），这可能是一个原因，或者如果我将表单放在变量产品表单jQuery上方，则可以工作，但返回空字符串。

即使表单输入字段中有一些文本，它也会返回空字符串。

这是表格

这是jQuery在提交时单击

 jQuery(document).ready(function() {
   jQuery('.mailsub').click(function() {
     var subaddress = jQuery('.subemail').val();
     console.log(subaddress);
     if ( jQuery('.subemail').length > 0 ){
       console.log('the element with element_id exists in the DOM');
     }
     //ajax goes here followed by validation for the email
     return false;
   });
});

我试图检查它是否在DOM中，所以我使用了代码，它说the element with element_id exists in the DOM 。

我能够使该表格完全适用于twentyeleven和默认主题。 它适用于Wordpress默认主题，但不适用于某些其他第三方主题。

可能是什么问题？ 任何建议都会很有帮助。

Answer 1

给出的HTML和代码应该可以正常工作。 我猜测文档前面的子subemail类中还有另一个元素。 当您执行jQuery(".subemail").val() ，jQuery会找到所有匹配的元素，但仅返回其中第一个的值（如果有）。

---

附注：如果您通过内置到浏览器的调试器单步执行代码，而不是做console.log语句，你可以检查的代码运行，这是显着更多的教育，通常变量。

---

旁注2：某些浏览器在用户在文本字段中按Enter时提交表单。 在这种情况下，提交按钮上的click事件可能不会触发（因为未单击该按钮）。 为了可靠地参与表单提交过程，请使用表单上的submit事件，而不是按钮上的click事件。

---

旁注3：您说过您正在使用ajax来验证电子邮件地址。 默认情况下，ajax调用是异步的 ，这意味着您不能使用服务器的结果来决定是否提交表单，因为直到提交事件处理程序返回并且（可能）表单已经获得后，您才可以获取结果已提交。 您可以使ajax调用同步，但这会在调用进行时锁定大多数浏览器的UI，从而导致糟糕的用户体验。 我建议在字段更改时通过ajax验证电子邮件地址，然后在收到表单时再次在服务器上进行验证（您永远不能依赖客户端验证）。 这样，您就可以在提交表单时向用户提供主动反馈（变更确认），而无需尝试通过ajax对其进行验证。