javascript - 尝试从表单获取值时，Jquery val 不起作用

Question

我尝试在 woocommerce 产品页面中插入表单。我已将表格插入产品页面。提交表单后，我试图获取电子邮件(表单输入值)并相应地对其进行验证。

问题是我无法使用 jQuery 获取某些主题中的值。我在 firebug 中看到了表单及其元素。但是 jQuery 甚至不适用于变量产品(woocommerce 产品页面)中的点击事件。这里的表单位于其表单内部(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 中，所以我使用了代码，它说 具有 element_id 的元素存在于 DOM 中。

我能够让表单在 twentyeleven 和默认主题上完全工作。它可以在 WordPress 默认主题中运行，但不能在其他一些第三方主题中运行。

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

Answer 1

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

<小时/>

旁注:如果您使用浏览器内置的调试器单步调试代码，而不是执行 console.log 语句，您可以在代码运行时检查变量，即 通常， 更具教育意义。

<小时/>

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

<小时/>

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