Develop Reference

HTML5 min-max validation not triggering on form submit

Tested in: Version 109.0.5414.120 (Official Build) (64-bit) Chrome
Stack: ASP.NET Core Razor Pages, HTML5, JavaScript
Problem: I currently have a form on my page within which form fields are dynamically rendered based on values from a drop-down list. Everything there works fine, but despite including some HTML5 client-side validation on fields (and checking that the tags seem to be rendering fine) the validation does not trigger on form submit. Or - more accurately - the 'required' tag works, but the min/max tag does not. Could someone assist?
HTML and JavaScript before rendering:
HTML
<form id="search_form" method="post" class="row g-3">
<div class="row g-3">
<div class="col-md-4">
<label for="document_select" class="form-label">Document Type</label>
</div>
<div class="col-md-8">
<select id="document_select" name="document_select" onchange="check(this);" class="form-control" asp-items="Model.Options" required>
<option value="">Select Document Type...</option>
</select>
</div>
</div>
<div id="data-container"></div>
<hr class="my-4">
<div class="row g-3">
<div class="col-md-4">
<button asp-page-handler="Submit" type="submit" id="submitButton" class="w-100 btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
JavaScript which turns the data-container into form fields:
function updatePage(data, form, op) {
console.log(op);
for (var i = 0; i < data[0].inputs.length; i++) {
var field = data[0].inputs[i];
var label = document.createElement("label");
var input = document.createElement("input");
label.classList.add("form-label");
input.classList.add("form-control");
label.innerHTML = field.label;
input.id = field.id;
input.required = field.isRequired;
input.type = field.type;
input.name = field.id;
input.value = field.value;
input.placeholder = field.placeHolder;
if (input.name == "custnum")
{
input.min = "5";
input.max = "5";
input.oninput = "this.setCustomValidity('')";
input.oninvalid = "this.setCustomValidity('" + field.error + "')";
}
form.appendChild(label);
form.appendChild(input);
}
}
Fully rendered form
<form id="search_form" method="post" class="row g-3">
<div class="row g-3">
<div class="col-md-4">
<label for="document_select" class="form-label">Document Type</label>
</div>
<div class="col-md-8">
<select id="document_select" name="document_select" onchange="check(this);" class="form-control" required="">
<option value="">Select Document Type...</option>
<option value="adjustment_note">Adjustment Note</option>
<option value="buyin_chargethrough">Buy-in Authorisation</option>
<option value="supplier_claim">Claim Note</option>
<option value="cold_chain">Cold Chain Compliance</option>
<option value="dd_confirmation">DD Confirmation</option>
<option value="supplier_eft_remittance">EFT Remittance</option>
<option value="invoice">Invoice</option>
<option value="knockout">Knockout Report</option>
<option value="order_summary">Order Summary</option>
<option value="supplier_rtv">RTV</option>
<option value="sra_authorisation_rejection">SRA</option>
<option value="statements">Statement</option>
<option value="statement_of_purchase">Statement of Purchase</option>
<option value="turn_over_summary">Turnover Summary</option>
<option value="packing_list">Packing List</option>
</select>
</div>
</div>
<div id="data-container">
<label class="form-label">Date From</label>
<input class="form-control" id="date_from" type="date" name="date_from" placeholder="YYYYMMDD">
<label class="form-label">Date To</label>
<input class="form-control" id="date_to" type="date" name="date_to" placeholder="YYYYMMDD"><label class="form-label">Customer Number</label>
<input class="form-control" id="custnum" required="" type="text" name="custnum" placeholder="5-digits (leading zeros if req)" min="5" max="5"></div>
<hr class="my-4">
<div class="row g-3">
<div class="col-md-4">
<button type="submit" id="submitButton" class="w-100 btn btn-primary btn-lg" formaction="/?handler=Submit">Submit</button>
</div>
</div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8ODOs5VF1fNCrt7BKIRwkQ-2pmNtFQGLUzRqCmgo5l-wRGYp4YrNASH3Fu7owYxQg3rCfuyZ_4Ri9Wp3wHyK7v-jSF8MiBU1bhbTTM4loSw8vdg4wr7ypCRZWnG9BE02pisy5vf6Xm67jVJQ-tLoNRgBnd_R8ezxFxHeSYET8NUKT-1pVe8WbWinQfD6e_HJDA">
</form>

The min and max attributes only work for numeric input types, e.g. number, range, date, etc. They check that the number is greater than / lesser than a given value, not that it has a certain character length.
If you want to stick with HTML5 validation, you could use a RegEx pattern to achieve what you want:
<form>
<input type="text" required pattern="^.{5}$" title="Must be 5 characters long">
<button>Submit</button>
</form>

Create border around dropdown

Problem: I would like to create a border surrounding a drop-down box if left blank when the user enters a zip code. Otherwise, leave it how it is.
Currently, how it works is if the user enters a zip code and selects the submit, an alert will pop up and results will not be displayed until user selects the miles. This only occurs if user selects to find a locations using a zip code. Otherwise, it will populate the results.
Here is the form along with the script:
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
var $miles = $('#miles');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$hospital.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$zip.one("change", function(){
$miles.val('').trigger('input');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if(zip && !distance){
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false; //Does not submit form
}
else
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group"><!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
</div>

Ok, this should work.
Modified you checkTextField() function to highlight miles field if it is empty
document.getElementById("miles").style.border = " solid #000000"
Plus your miles dropbox has oninput tag as so
oninput = "unHighlight()"
Which calls the un-Highlight function to remove the box in case the value of it anything other than "".
reference: http://www.w3schools.com/jsref/event_oninput.asp
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
$(document).ready(function() {
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
var $miles = $('#miles');
$zip.on("change", function() {
$('#city option[value=""]').prop('selected', true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change", function() {
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$hospital.on("change", function() {
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$zip.one("change", function() {
$miles.val('').trigger('input');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if (zip && !distance) {
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
document.getElementById("miles").style.border = " solid #000000"
alert(alertMessage);
return false; //Does not submit form
} else
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form">
<div class="form-group">
<input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" oninput = "unHighlight()">
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
<script>
function unHighlight() {
var miles = document.getElementById("miles").value;
try{
if(miles != ""){
document.getElementById("miles").style.border = "none"
}
}
catch(err)
{
document.getElementById("miles").style.border = "none"
}
}
</script>
</form>
</div>
</div>

Have a function fire once only at the beginning of the form?

Problem: I have the following form below:
var highlight = document.getElementById("miles").addEventListener("click", unHighlightMiles);
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $hospital = $('#hospital');
var $miles = $('#miles');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$hospital.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$miles.on("change", function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$hospital.val('').trigger('input');
});
});
function checkTextField() {
var distance = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if(zip && !distance){
document.getElementById("miles").style.border = "1px solid red";
var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
alert(alertMessage);
return false; //Does not submit form
}
else{
if(zip && distance)
return true;
}
}
function unHighlightMiles(){
document.getElementById("miles").style.border = "1px solid #cccccc";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form">
<div class="form-group">
<input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</div>
</div>
I am having trouble with having the alert to appear when the user enters a zip code. By default, miles have a default of 5 which is fine. But when the form first appears, the mile section is blank. So when I enter the zip code, rather then showing the alert, it shows the results.
I was using the following:
$zip.one("change", function(){
$miles.val('').trigger('input');
})
which works fine because it only triggers once, however if the user selects mileage and then enters a zip code, the mileage will disappear do the function above.
How would I figure the function above only once if the user first decides to enter a zip code at the beginning of the page?

Alert User field that is blank is required

Problem: I would like to be able to alert the user if a particular field is empty. Here is how the form looks:
When the user enters a zip code and selects search, I would like a pop up to display to alert the user to select a distance and not display the results. If the user enters hospital name and city drop down, I do not want the alert to appear. Only when the zip code is entered and when the search button is selected.
Here is the form:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
<option></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>
and here is the script that alerts when the miles is blank:
function validateForm() {
var x = document.forms["UrgentCareSearch"]["distance"].value;
if (x == "" || x=="null") {
alert("Please select distance");
return false;
}
UPDATE
I have done the following and it still does not work the way I want to (which is to show the alert when the search button is entered and when the user has entered a zip code. Meaning once the user has entered a zip code and click on the search button to populate the results, the alert will appear notifying to select the miles and the results will not show until user has entered how many miles and click search again):
function validateForm() {
var x = document.forms["UrgentCareSearch"]["miles"].value;
var $zip = $('#zip');
if ((x == "" && $zip != "") ||(x=="null" && $zip != "")) {
alert("Please select distance");
return false;
}
and this is what I when I used required:
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return checkTextField()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
<option value=""></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
</div>

adding required to each of the input or select elements would prevent the form from being submitted if they are left blank
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()">
<div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" required /></div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City" required>
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="HospCityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select></div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important"><strong>* OR Search by Zip code radius *</strong></div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" required>
<option></option><option >5</option><option>10</option><option>15</option><option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group"><input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
</div>
</div>
<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
</form>
Or there can jquery touch look at this
first give your form an id lets say myform
$(document).ready(function()
{
$('#myform').submit(function()
{
var name = $("#hospital").val();
var name = $("#city").val();
if(name == "" || name == " ")
{
alert("Please enter name");
return false;
}
if(city == "" || city== " ")
{
alert("Please enter city");
return false;
}
//Just like this and at the end when you are satisfied
$(this).submit();
});
});

From what I understand by your problem statement, you can do the following in your validation function.
function validateForm() {
var miles = document.forms["UrgentCareSearch"]["distance"].value;
var zip = document.forms["UrgentCareSearch"]["zip"].value;
if (zip && !miles) {
event.preventDefault(); // This will prevent the form submit
alert("Please enter the Miles.");
return false; // Does't submit the form (for IE)
}
}
Also, when calling the function, just call the function directly.
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="validateForm();">

textarea and selector option not being sent to email

I have searched as suggested but have not found why my version of the form does not work. I have a form that collects name, email, phone, a select option and a message in a textarea input. I change the textarea and action php based off the user option selected in the select input.
I use PHP to email the form contentse. I get ALL fields except for:
-Message/Comments
HTML
<!-- Career Form -->
<form id="careerContactForm" role="form" action="" method="post" enctype="multipart/form-data">
<!-- $name -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 required">
<label for="contact-name">Full Name</label>
<input type="text" name="name" class="form-control" id="contact-name" placeholder="Full Name" required>
</div>
</div>
<!-- $email -->
<div class="row form-group">
<div class="col-md-4 col-md-offset-2 required">
<label for="contact-email">Email</label>
<input type="text" name="email" class="form-control" id="contact-email" placeholder="Email" required>
</div>
<!-- $phone -->
<div class="col-md-4 required">
<label for="contact-phone">Phone Number</label><br />
<input type="text" class="form-control bfh-phone" data-country="US" id="contact-phone" name="phone" placeholder="Phone Number" required>
</div>
</div>
<!-- $who -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 required select-wrapper">
<!-- Contact -->
<label for="contact-who">Who are you trying to contact?</label>
<select class="selectorWho form-control" name="who" required>
<option value="None"><em>--Please Select One--</em></option>
<option value="general">General</option>
<option value="HR / Careers">HR / Careers</option>
<option value="sales">Sales</option>
<option value="td">TDXperts</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<!-- $interest -->
<div class="row form-group hidden uploadResume">
<div class="col-md-8 col-md-offset-2 required select-wrapper">
<!-- Career -->
<label>I'm looking for employment opportunities in…</label>
<select class="selector-career form-control" name="interest" required>
<option value="None"><em>--Please Select One--</em></option>
<option value="Accounting">Accounting</option>
<option value="Administration">Administration</option>
<option value="Finance">Finance</option>
<option value="general">General</option>
<option value="HR">HR</option>
<option value="IT">IT</option>
<option value="Logistics & Customs Affairs">Logistics & Customs Affairs</option>
<option value="Marketing">Marketing</option>
<option value="Purchasing">Purchasing</option>
<option value="Sales">Sales</option>
<option value="Supply Chain Planning">Supply Chain Planning</option>
<option value="Warehouse">Warehouse</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-md-8 col-md-offset-2 required">
<label for="uploadResume">Upload Your Resume</label>
<input type="file" name="resume" id="resume-upload">
<p class="help-block"><em>You must choose a valid file. We accept .doc, .docx, .pdf, .rtf and .txt files</em></p>
</div>
</div>
<!-- Career Submit: hide / show -->
<div class="row form-group">
<div class="col-md-8 col-md-offset-2 hidden careerContact">
<!-- Contact -->
<label for="contact-message">Questions or Comments</label>
<textarea name="message" cols="50" rows="6" id="contact-message" class="form-control" placeholder="Would you like to include any more information?" ></textarea>
</div>
<div class="col-md-8 col-md-offset-2 hidden contactMessage">
<!-- Career -->
<label for="career-message">Message</label>
<textarea name="comments" cols="50" rows="6" id="career-message" class="form-control" placeholder="Your message..." ></textarea>
</div>
</div>
<div class="row form-group">
<div class="col-md-8 col-md-offset-2">
<button type="submit" class="btn">Send message</button>
</div>
</div>
</form>
JS (that show/hide textareas and show/hide file upload dialog)
$(document).ready(function(e) {
$(".selectorWho").on('change', function(e) {
e.preventDefault();
var uploadResume = $('.uploadResume');
var comments = $('.contactMessage');
var careerComments = $('.careerContact');
if (this.value == "HR / Careers") {
uploadResume.slideDown().removeClass("hidden");
careerComments.removeClass("hidden");
comments.addClass("hidden");
var action = "do/careers-submit.php";
var submitButton = 'career-submit';
} else {
uploadResume.slideUp().addClass('hidden');
careerComments.addClass('hidden');
comments.removeClass("hidden");
var action = "do/contact-submit.php";
var submitButton = 'contact-submit';
}
$("#careerContactForm").attr("action", action);
});
});
PHP (for one of the actions)
<?php
require("../classes/class.phpmailer.php");
$mail = new PHPMailer();
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$who = $_POST['who'];
$interest = $_POST['interest'];
$comments = $_POST['comments'];
$mail->IsSMTP();
$mail->From = "$email";
$mail->FromName = "$name";
// $mail->AddAddress("hr#tireco.com","Tireco HR");
$mail->AddAddress("vs#tireco.com","Tireco HR");
$mail->Subject = "New Resume Submission";
$mail->Body = "Name:\n $name\n\n\nPhone:\n $phone\n\n\nEmail:\n $email\n\n\nContacting:\n $who\n\n\nInterested In:\n -$interest\n\n\nQuestions/Comments:\n $comments";
if (isset($_FILES['resume']) &&
$_FILES['resume']['error'] == UPLOAD_ERR_OK) {
$mail->AddAttachment($_FILES['resume']['tmp_name'],
$_FILES['resume']['name']);
}
$mail->WordWrap = 50;
if(!$mail->Send()) {
echo 'Message was not sent.';
echo 'Mailer error: ' . $mail->ErrorInfo;
} else {
header( 'Location: ../thankYou.html' ) ;
}
?>
So, I get all fields except for the message/comments textarea text.
If you would like to see what I get in the email click here
If you clicked, you saw what I get when I submit a HR/Careers > IT + Upload File + Message...The message is omitted.
Thank you in advance for your help.
VS

You need to give your select box a name, not the option.
You have
<select id="interest" class="selector-career form-control" required>
It needs to be
<select name="interest" id="interest" class="selector-career form-control" required>
With regards to the file attachment you should probably check the file uploaded ok
if (isset($_FILES['resume']) &&
$_FILES['resume']['error'] == UPLOAD_ERR_OK) {
$mail->AddAttachment($_FILES['resume']['tmp_name'],
$_FILES['resume']['name']);
}

This is what I use for my selectors, which I have inside a div / form wrapper. You need to select an index of the option, not the option container. This is for selecting States, of which I have removed most to save space. Look at it's structure and modify your code. Notice the square brackets that index the option your client selected. "state_sel" is the variable that contains the selected item. I left out my button for a function call.
<form id="state_opt" name="state_opt"> State
<select id="state_mgr" onChange="state_sel=document.state_opt.state_mgr.options[document.state_opt.state_mgr.selectedIndex].value;">
<option selected value="0">None</option>
<option value="AL">Alabama
<option value="MT">Montana
<option value="WI">Wisconsin
<option value="MO">Missouri
<option value="WY">Wyoming
</select>