问题描述
在我的网站上，http://enzo.iotschool.eu/Mixologiststeps/contact-a-mixologist/有一个表格。
我正在尝试将事件侦听器放在Submit事件上以记录某些内容，但它不起作用。你能告诉我怎么了吗？这是我的尝试：
document.querySelector('form').addEventListener('submit',postGift);
function postGift(e) {
/* add this to prevent submit */
e.preventDefault();
console.log('Helloooo there!!!');
}
解决方法
querySelector()返回提供了选择器的第一个元素。使用form之类的通用标记名作为选择器时，如果文档具有多种形式，则会冒无法获取预期元素的风险。
请尝试给表单提供一个ID，然后使用ID选择器（#formid）对其进行查询。
很多问题。
-
document.querySelector("form")正在访问页面上的第一个表单。这不是您想要的形式。 - 页面上的SECOND表单不是标准表单。它是由Ninjaforms插件 产生的
- 您的表单没有提交事件，因为“提交”按钮不是type =“ submit”
- 表单是在加载后生成的，因此您需要委托
这是尝试使用页面中的RENDERED HTML，但是如果您解释了要执行的操作，这将更加有用，因为目前您遇到了X / Y问题-以下代码是黑客。您需要调查Ninjaforms Submit event
window.addEventListener("load",function() {
document.getElementById("nf-form-3-cont").addEventListener('click',function(e) {
const tgt = e.target;
if (tgt.id === "nf-field-18") {
e.preventDefault();
console.log('Helloooo there!!!');
}
});
});<div id="nf-form-3-cont" class="nf-form-cont" aria-live="polite" aria-labelledby="nf-form-title-3" aria-describedby="nf-form-errors-3" role="form">
<span id="nf-form-title-3" class="nf-form-title">
</span>
<div class="nf-form-wrap ninja-forms-form-wrap">
<div class="nf-response-msg"></div>
<div class="nf-debug-msg"></div>
<div class="nf-before-form">
<nf-section>
</nf-section>
</div>
<div class="nf-form-layout">
<form>
<div>
<div class="nf-before-form-content">
<nf-section>
<div class="nf-form-fields-required">Fields marked with an <span class="ninja-forms-req-symbol">*</span> are required</div>
</nf-section>
</div>
<div class="nf-form-content ">
<nf-fields-wrap>
<nf-field>
<div id="nf-field-9-container" class="nf-field-container firstname-container label-above one-half first ">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-9-wrap" class="field-wrap firstname-wrap nf-fail nf-error" data-field-id="9">
<div class="nf-field-label"><label for="nf-field-9" id="nf-label-field-9" class="">First Name <span class="ninja-forms-req-symbol">*</span> </label></div>
<div class="nf-field-element">
<input type="text" value="" class="ninja-forms-field nf-element" id="nf-field-9" name="fname" autocomplete="given-name" aria-invalid="true" aria-describedby="nf-error-9" aria-labelledby="nf-label-field-9" required="" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-9" class="nf-error-wrap nf-error" role="alert">
<div class="nf-error-msg nf-error-required-error">This is a required field.</div>
</div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-10-container" class="nf-field-container lastname-container label-above one-half second ">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-10-wrap" class="field-wrap lastname-wrap" data-field-id="10">
<div class="nf-field-label"><label for="nf-field-10" id="nf-label-field-10" class="">Last Name <span class="ninja-forms-req-symbol">*</span> </label></div>
<div class="nf-field-element">
<input type="text" value="" class="ninja-forms-field nf-element" id="nf-field-10" name="lname" autocomplete="family-name" aria-invalid="false" aria-describedby="nf-error-10" aria-labelledby="nf-label-field-10" required="">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-10" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-11-container" class="nf-field-container email-container label-above ">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-11-wrap" class="field-wrap email-wrap" data-field-id="11">
<div class="nf-field-label"><label for="nf-field-11" id="nf-label-field-11" class="">Email </label></div>
<div class="nf-field-element">
<input type="email" value="" class="ninja-forms-field nf-element" id="nf-field-11" name="email" autocomplete="email" aria-invalid="false" aria-describedby="nf-error-11" aria-labelledby="nf-label-field-11">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-11" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-12-container" class="nf-field-container phone-container label-above textbox-container">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-12-wrap" class="field-wrap phone-wrap textbox-wrap" data-field-id="12">
<div class="nf-field-label"><label for="nf-field-12" id="nf-label-field-12" class="">Phone </label></div>
<div class="nf-field-element">
<input type="tel" value="" class="ninja-forms-field nf-element" id="nf-field-12" name="phone" autocomplete="tel" aria-invalid="false" aria-describedby="nf-error-12" aria-labelledby="nf-label-field-12">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-12" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-15-container" class="nf-field-container textarea-container label-above ">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-15-wrap" class="field-wrap textarea-wrap" data-field-id="15">
<div class="nf-field-label"><label for="nf-field-15" id="nf-label-field-15" class="">Details <span class="ninja-forms-req-symbol">*</span> </label></div>
<div class="nf-field-element">
<textarea id="nf-field-15" name="nf-field-15" aria-invalid="false" aria-describedby="nf-error-15" class="ninja-forms-field nf-element" aria-labelledby="nf-label-field-15" required=""></textarea>
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-15" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-16-container" class="nf-field-container checkbox-container label-right ">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-16-wrap" class="field-wrap checkbox-wrap" data-field-id="16">
<div class="nf-field-label"><label for="nf-field-16" id="nf-label-field-16" class="">May We Contact You? </label></div>
<div class="nf-field-element">
<input id="nf-field-16" name="nf-field-16" aria-describedby="nf-error-16" class="ninja-forms-field nf-element" type="checkbox" value="1" aria-labelledby="nf-label-field-16">
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-16" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-17-container" class="nf-field-container listselect-container label-above list-container">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-17-wrap" class="field-wrap listselect-wrap list-wrap list-select-wrap" data-field-id="17">
<div class="nf-field-label"><label for="nf-field-17" id="nf-label-field-17" class="">Best Time to Call </label></div>
<div class="nf-field-element">
<select id="nf-field-17" name="nf-field-17" aria-invalid="false" aria-describedby="nf-error-17" class="ninja-forms-field nf-element" aria-labelledby="nf-label-field-17">
<option value="morning" selected="selected">Morning</option>
<option value="afternoon">Afternoon</option>
<option value="evening">Evening</option>
</select>
<div for="nf-field-17"></div>
</div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-17" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
<nf-field>
<div id="nf-field-18-container" class="nf-field-container submit-container label-above textbox-container">
<div class="nf-before-field">
<nf-section>
</nf-section>
</div>
<div class="nf-field">
<div id="nf-field-18-wrap" class="field-wrap submit-wrap textbox-wrap" data-field-id="18">
<div class="nf-field-label"></div>
<div class="nf-field-element">
<input id="nf-field-18" class="ninja-forms-field nf-element " type="button" value="Submit">
</div>
<div class="nf-error-wrap"></div>
</div>
</div>
<div class="nf-after-field">
<nf-section>
<div class="nf-input-limit"></div>
<div id="nf-error-18" class="nf-error-wrap nf-error" role="alert"></div>
</nf-section>
</div>
</div>
</nf-field>
</nf-fields-wrap>
</div>
<div class="nf-after-form-content">
<nf-section>
<div id="nf-form-errors-3" class="nf-form-errors" role="alert">
<nf-errors>
<nf-section>
<div class="nf-error-msg nf-error-field-errors">Please correct errors before submitting this form.</div>
</nf-section>
</nf-errors>
</div>
<div class="nf-form-hp">
<nf-section>
<label for="nf-field-hp-3" aria-hidden="true">
If you are a human seeing this field,please leave it empty.
<input id="nf-field-hp-3" name="nf-field-hp" class="nf-element nf-field-hp" type="text" value="">
</label>
</nf-section>
</div>
</nf-section>
</div>
</div>
</form>
</div>
<div class="nf-after-form">
<nf-section>
</nf-section>
</div>
</div>
</div>