英文:
email Input field not recognising value in html form
问题
I have the same code for 2 fields, so I'm asking for a user to enter their email address into a form. It works for one but not the other. So when I select 'Headteacher' from the drop down and fill out the details as normal it works; but when I select 'Primary school teacher' from the drop down, and enter the details as normal - the email field comes up with an error "please enter a value"
code specific to the email input for Primary school:
<!-- primary school -->
<div id="conditional-fields-primary-teacher" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
code specific to the email input for headteacher:
<!-- Headteacher -->
<div id="ht-conditional-fields" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
This is the whole code for the file:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css;">
<style type="text/css">
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="x" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-ROLE">Choose your role? <span class="asterisk">*</span></label>
<select name="ROLE" class="required" id="mce-ROLE" required>
<option value="">Select...</option>
<option value="Primary school teacher">Primary school teacher</option>
<option value="Headteacher">Headteacher</option>
<option value="Parent / Guardian / Home Educator">Parent / Guardian / Home Educator</option>
<option value="Other">Other</option>
</select>
</div>
<!-- primary school -->
<div id="conditional-fields-primary-teacher" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First name <span class="asterisk">*</span></label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last name <span class="asterisk">*</span></label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-JOB_TITLE">Job title <span class="asterisk">*</span></label>
<input type="text" value="" name="JOB_TITLE" class="required" id="mce-JOB_TITLE" required>
</div>
<div class="mc-field-group">
<label for="mce-REGION">Region <span class="asterisk">*</span></label>
<select name="REGION" class="required" id="mce-REGION" required>
<option value="">Select...</option>
<!-- List of regions -->
</select>
</div>
<div class="mc-field-group">
<label>Year/Group (Tick all that apply):</label>
<div>
<input type="checkbox" name="year-group" value="Reception" id="mce-reception">
<label for="mce-reception">Reception</label>
</div>
<!-- Other year/group checkboxes -->
</div>
</div>
<!-- Headteacher -->
<div id="ht-conditional-fields" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<details>
<summary>英文:</summary>
I have the same code for 2 fields, so I'm asking for a user to enter their email address into a form. It works for one but not the other. So when I select 'Headteacher' from the drop down and fill out the details as normal it works; but when I select 'Primary school teacher' from the drop down, and enter the details as normal - the email field comes up with an error "please enter a value"
[the error when a value is added - Primary school teacher selected](https://i.stack.imgur.com/1N1DQ.png)
code specific to the email input for Primary school:
<!-- primary school -->
<div id="conditional-fields-primary-teacher" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
code specific to the email input for headteacher:
<!-- Headteacher -->
<div id="ht-conditional-fields" style="display: none;">
<div class="indicates-required"><span class="asterisk"></span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk"></span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
This is the whole code for the file:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="x" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe</h2>
<div class="indicates-required"><span class="asterisk"></span> indicates required</div>
<div class="mc-field-group">
<label for="mce-ROLE">Choose your role? <span class="asterisk">*</span></label>
<select name="ROLE" class="required" id="mce-ROLE" required>
<option value="">Select...</option>
<option value="Primary school teacher">Primary school teacher</option>
<option value="Headteacher">Headteacher</option>
<option value="Parent / Guardian / Home Educator">Parent / Guardian / Home Educator</option>
<option value="Other">Other</option>
</select>
</div>
<!-- primary school -->
<div id="conditional-fields-primary-teacher" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First name <span class="asterisk">*</span></label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last name <span class="asterisk">*</span></label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-JOB_TITLE">Job title <span class="asterisk">*</span></label>
<input type="text" value="" name="JOB_TITLE" class="required" id="mce-JOB_TITLE" required>
</div>
<div class="mc-field-group">
<label for="mce-REGION">Region <span class="asterisk">*</span></label>
<select name="REGION" class="required" id="mce-REGION" required>
<option value="">Select...</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cornwall">Cornwall</option>
<option value="Cumbria">Cumbria</option>
<option value="Derbyshire">Derbyshire</option>
<option value="Devon">Devon</option>
<option value="Dorset">Dorset</option>
<option value="Durham">Durham</option>
<option value="East Sussex">East Sussex</option>
<option value="Essex">Essex</option>
<option value="Gloucestershire">Gloucestershire</option>
<option value="Greater London">Greater London</option>
<option value="Greater Manchester">Greater Manchester</option>
<option value="Hampshire">Hampshire</option>
<option value="Herefordshire">Herefordshire</option>
<option value="Isle of Wight">Isle of Wight</option>
<option value="Kent">Kent</option>
<option value="Lancashire">Lancashire</option>
<option value="Leicestershire">Leicestershire</option>
<option value="Lincolnshire">Lincolnshire</option>
<option value="Merseyside">Merseyside</option>
<option value="Norfolk">Norfolk</option>
<option value="North Yorkshire">North Yorkshire</option>
<option value="Northamptonshire">Northamptonshire</option>
<option value="Northumberland">Northumberland</option>
<option value="Nottinghamshire">Nottinghamshire</option>
<option value="Oxfordshire">Oxfordshire</option>
<option value="Rutland">Rutland</option>
<option value="Shropshire">Shropshire</option>
<option value="Somerset">Somerset</option>
<option value="South Yorkshire">South Yorkshire</option>
<option value="Staffordshire">Staffordshire</option>
<option value="Suffolk">Suffolk</option>
<option value="Surrey">Surrey</option>
<option value="Tyne and Wear">Tyne and Wear</option>
<option value="Warwickshire">Warwickshire</option>
<option value="West Midlands">West Midlands</option>
<option value="West Sussex">West Sussex</option>
<option value="West Yorkshire">West Yorkshire</option>
<option value="Wiltshire">Wiltshire</option>
<option value="Worcestershire">Worcestershire</option>
</select>
</div>
<div class="mc-field-group">
<label>Year/Group (Tick all that apply):</label>
<div>
<input type="checkbox" name="year-group" value="Reception" id="mce-reception">
<label for="mce-reception">Reception</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 1" id="mce-year1">
<label for="mce-year1">Year 1</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 2" id="mce-year2">
<label for="mce-year2">Year 2</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 3" id="mce-year3">
<label for="mce-year3">Year 3</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 4" id="mce-year4">
<label for="mce-year4">Year 4</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 5" id="mce-year5">
<label for="mce-year5">Year 5</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 6" id="mce-year6">
<label for="mce-year6">Year 6</label>
</div>
</div>
</div>
<!-- Headteacher -->
<div id="ht-conditional-fields" style="display: none;">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First name <span class="asterisk">*</span></label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last name <span class="asterisk">*</span></label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME" required>
</div>
<div class="mc-field-group">
<label for="mce-JOB_TITLE">Job title <span class="asterisk">*</span></label>
<input type="text" value="" name="JOB_TITLE" class="required" id="mce-JOB_TITLE" required>
</div>
<div class="mc-field-group">
<label for="mce-REGION">Region <span class="asterisk">*</span></label>
<select name="REGION" class="required" id="mce-REGION" required>
<option value="">Select...</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cornwall">Cornwall</option>
<option value="Cumbria">Cumbria</option>
<option value="Derbyshire">Derbyshire</option>
<option value="Devon">Devon</option>
<option value="Dorset">Dorset</option>
<option value="Durham">Durham</option>
<option value="East Sussex">East Sussex</option>
<option value="Essex">Essex</option>
<option value="Gloucestershire">Gloucestershire</option>
<option value="Greater London">Greater London</option>
<option value="Greater Manchester">Greater Manchester</option>
<option value="Hampshire">Hampshire</option>
<option value="Herefordshire">Herefordshire</option>
<option value="Isle of Wight">Isle of Wight</option>
<option value="Kent">Kent</option>
<option value="Lancashire">Lancashire</option>
<option value="Leicestershire">Leicestershire</option>
<option value="Lincolnshire">Lincolnshire</option>
<option value="Merseyside">Merseyside</option>
<option value="Norfolk">Norfolk</option>
<option value="North Yorkshire">North Yorkshire</option>
<option value="Northamptonshire">Northamptonshire</option>
<option value="Northumberland">Northumberland</option>
<option value="Nottinghamshire">Nottinghamshire</option>
<option value="Oxfordshire">Oxfordshire</option>
<option value="Rutland">Rutland</option>
<option value="Shropshire">Shropshire</option>
<option value="Somerset">Somerset</option>
<option value="South Yorkshire">South Yorkshire</option>
<option value="Staffordshire">Staffordshire</option>
<option value="Suffolk">Suffolk</option>
<option value="Surrey">Surrey</option>
<option value="Tyne and Wear">Tyne and Wear</option>
<option value="Warwickshire">Warwickshire</option>
<option value="West Midlands">West Midlands</option>
<option value="West Sussex">West Sussex</option>
<option value="West Yorkshire">West Yorkshire</option>
<option value="Wiltshire">Wiltshire</option>
<option value="Worcestershire">Worcestershire</option>
</select>
</div>
<div class="mc-field-group">
<label>Year/Group (Tick all that apply):</label>
<div>
<input type="checkbox" name="year-group" value="Reception" id="mce-reception">
<label for="mce-reception">Reception</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 1" id="mce-year1">
<label for="mce-year1">Year 1</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 2" id="mce-year2">
<label for="mce-year2">Year 2</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 3" id="mce-year3">
<label for="mce-year3">Year 3</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 4" id="mce-year4">
<label for="mce-year4">Year 4</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 5" id="mce-year5">
<label for="mce-year5">Year 5</label>
</div>
<div>
<input type="checkbox" name="year-group" value="Year 6" id="mce-year6">
<label for="mce-year6">Year 6</label>
</div>
</div>
</div>
<!-- dont change -->
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ad6ea66c62b50396e776ca853_9731af2b4a" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='EMAIL';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='JOB_TITLE';ftypes[3]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<script type="text/javascript">
document.getElementById('mce-ROLE').addEventListener('change', function() {
var conditionalFields = document.getElementById('conditional-fields-primary-teacher');
var htConditionalFields = document.getElementById('ht-conditional-fields');
var pgheConditionalFields = document.getElementById('pghe-conditional-fields');
var otherConditionalFields = document.getElementById('other-conditional-fields');
if (this.value === 'Primary school teacher') {
conditionalFields.style.display = 'block';
htConditionalFields.style.display = 'none';
pgheConditionalFields.style.display = 'none';
otherConditionalFields.style.display = 'none';
} else if (this.value === 'Headteacher') {
conditionalFields.style.display = 'none';
htConditionalFields.style.display = 'block';
pgheConditionalFields.style.display = 'none';
otherConditionalFields.style.display = 'none';
} else if (this.value === 'Parent / Guardian / Home Educator') {
conditionalFields.style.display = 'none';
htConditionalFields.style.display = 'none';
pgheConditionalFields.style.display = 'block';
otherConditionalFields.style.display = 'none';
} else if (this.value === 'Other') {
conditionalFields.style.display = 'none';
htConditionalFields.style.display = 'none';
pgheConditionalFields.style.display = 'none';
otherConditionalFields.style.display = 'block';
} else {
conditionalFields.style.display = 'none';
htConditionalFields.style.display = 'none';
pgheConditionalFields.style.display = 'none';
otherConditionalFields.style.display = 'none';
}
});
</script>
<!--End mc_embed_signup-->
link to website https://careermapforprimary.co.uk/#register
I've tried changing fields and duplicating code but I can't find the error
</details>
# 答案1
**得分**: 1
在HTML中，属性id必须是唯一的。
如果您的表单验证基于
`
document.getElementById('mce-EMAIL').value
`
它会获取具有id "mce-EMAIL" 的第一个元素的值，通常是在小学里的那个。
您必须使用不同的id。
<details>
<summary>英文:</summary>
in HTML the attribut id must be unique.
if verification of your form is based on
`
document.getElementById('mce-EMAIL').value
`
it takes the value of the first element with the id "mce-EMAIL" found, so the one in primary school.
You must have distinct id
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论