Html blank entry - html

Question

I have a survey that requires the takers to complete all the fields but somehow I have blank entries in the output file for the columns "title2" and "dept2". I believe when they provide no answer in the blank spaces, it is shown as "{}". But these entries are completely blank which I cannot understand how. I was wondering if there is any general mistake that could give rise to this issue. The whole code is provided below. Thank you.
<p> </p>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" integrity="sha384- IS73LIqjtYesmURkDE9MXKbXqYA8rvKEp/ghicjem7Vc3mGRdQRptJSz60tvrB6+" rel="stylesheet" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<p> </p>
<section class="container" id="TranscriptionFromAnImage"><!-- Instructions -- >
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="panel panel-primary"><a class="panel-heading"><strong>Table transcription instructions</strong> </a>
<p> </p>
<p><span style="font-family:arial,helvetica,sans-serif;">F</span><span style="font-family: arial, helvetica, sans-serif;">or each job (up to two) that this person has had since he/she received his/her </span><span style="font- family: arial, helvetica, sans-serif;">Ph.D.</span><span style="font-family: arial, helvetica, sans-serif;">, please copy and paste the related sections from this CV whenever possible:</span></p>
<ol style="font-size: 14px;">
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The institution for which he/she has worked</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">His/her department in the institution</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The title of his/her job</span></p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">Start year</span> </p>
</li>
<li>
<p><span style="font-family:arial,helvetica,sans-serif;">The year in which he/she left the job </span></p>
</li>
</ol>
<p>When some of this information is not present in the C.V. leave the related sections blank..</p>
<p>// AND if "Other" is an option, select "Other" and type "NA" in the blank space provided. If "Other" is not an option, only type "NA" in the blank space provided. <span style="font-family: arial, helvetica, sans-serif;">If the person has had only one job since getting his/her Ph.D., follow this procedure for the questions related to the second job. //</span></p>
<p>As a rule of thumb, if the start year of a job is specified but the end year is not, select "Ongoing" for the end year.</p>
<p>Please check the two links below as a reference.</p>
<div align="left"><font color="red">Link to the first example:link</font></div>
<div align="left"><font color="red">Link to the second example: link</font></div>
<div align="left"> </div>
</div>
</div>
</div>
<iframe height="1000" src="${pdf_url}" width="700"></iframe>
<div class="col-xs-12 col-sm-4 fields">
<div class="form-group"> </div>
<div class="form-group"><strong><font color="red">Questions related to the FIRST job after receiving Ph.D.</font></strong></div>
<div class="form-group"><label for="TranscriptionTexts">1. Copy and paste the name of the institution for which this person worked for</label><textarea class="form-control" cols="250" id="1st_inst" name="1st_inst" required="" rows="1"></textarea></div>
<p> </p>
<div class="form-group"><label for="TranscriptionTexts">2. Select the option "Economics department" if his/her job is at an economics department. Otherwise, select "Other" and copy and paste his department or division in the institution</label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="dept1" required="" type="radio" value="econdept" /> Economics department</label></div>
<div class="radio"><label><input autocomplete="off" id="option2" name="dept1" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="1st_dept_other" name="1st_dept_other" rows="1"> </textarea></div>
<div class="form-group"> </div>
<div class="form-group"><label for="TranscriptionTexts">3. Select the title of this person's first job. If the title is neither "Assistant Professor" nor "Post-doc", select "Other" and copy and paste the title from the CV</label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="title1" required="" type="radio" value="ap" /> Assistant professor </label> </div>
<div class="radio-inline"><label><input autocomplete="off" id="option2" name="title1" required="" type="radio" value="postdoc" />Post-doc</label></div>
<div class="radio"><label><input autocomplete="off" id="option3" name="title1" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="1st_title_other" name="1st_title_other" rows="1"></textarea></div>
<div class="form-group">
<p> </p>
<p><label class="group-label">4. Select the start year of this job from the drop-down menu below</label></p>
<input list="startyr1" name="startyr1" placeholder="Choose start year" /> <datalist id="startyr1"><option value="2017"></option><option value="2018"> </option><option value="NA"></option></datalist></div>
<div class="form-group">
<p> </p>
<p><label class="group-label">5. Select the end year of this job from the drop-down menu below. If still holding the position, select "Ongoing" from the menu.</label></p>
<input list="endyr1" name="endyr1" placeholder="Choose end year" /> <datalist id="endyr1"><option value="2017"></option><option value="2018"></option><option value="Ongoing"></option><option value="NA"></option></datalist></div>
<div class="form-group"> </div>
<div class="form-group"><strong><font color="red">Questions related to the SECOND job after receiving Ph.D.</font></strong></div>
<div class="form-group"><label for="TranscriptionTexts">6. </label><span style="font-weight: 700;">Copy and paste the name of the institution for which this person worked for</span><textarea class="form-control" cols="250" id="2nd_inst" name="2nd_inst" required="" rows="1"></textarea></div>
<div class="form-group"><label for="TranscriptionTexts">7. </label><span style="font-weight: 700;">Select the option "Economics department" if his/her job is at an economics department. Otherwise, select "Other" and copy and paste his department or division in the institution</span> </div>
**<div class="radio-inline"><label><input autocomplete="off" id="option1" name="dept2" required="" type="radio" value="econdept" /> Economics department </label></div>
<div class="radio"><label><input autocomplete="off" id="option2" name="dept2" required="" type="radio" value="other" />Other</label><textarea class="form- control" cols="250" id="2nd_dept_other" name="2nd_dept_other" rows="1"> </textarea></div>
<div class="form-group"> </div>
<div class="form-group"><label for="TranscriptionTexts">8. </label><span style="font-weight: 700;">Select the title of this person's first job. If the title is neither "Assistant Professor" nor "Post-doc", select "Other" and copy and paste the title from the CV</span></div>
<div class="radio-inline"><label><input autocomplete="off" id="option1" name="title2" required="" type="radio" value="ap" /> Assistant professor </label></div>
<div class="radio-inline"><label><input autocomplete="off" id="option2" name="title2" required="" type="radio" value="postdoc" />Post-doc</label></div>
<div class="radio"><label><input autocomplete="off" id="option3" name="title2" required="" type="radio" value="other" />Other</label><textarea class="form-control" cols="250" id="2nd_title_other" name="2nd_title_other" rows="1"></textarea></div>**
<div class="form-group">
<p> </p>
<p><label class="group-label">9. Choose the start year from the drop-down menu below</label></p>
<input list="startyr2" name="startyr2" placeholder="Choose start year" /> <datalist id="startyr2"><option value="2017"></option><option value="2018"></option><option value="NA"></option></datalist></div>
<div class="form-group">
<p><label class="group-label">10. Select the end year of this job from the drop-down menu below. If still holding the position, select "Ongoing" from the drop-down menu.</label></p>
<input list="endyr2" name="endyr2" placeholder="Choose end year" /> <datalist id="endyr2"><option value="2017"></option><option value="2018"></option><option value="NA"></option><option value="Ongoing"></option></datalist></div>
<!-- End Image Transcription Layout --><!-- Open internal style sheet -->
<style type="text/css">#collapseTrigger{ color:#fff; display: block; text-decoration: none; } #submitButton{ white-space: normal; } .image{ margin-bottom: 15px; } .group-label{ display: block; } .radio-inline>label{ font-weight: normal; }
</style>
<!-- Close internal style sheet --><!-- Please note that Bootstrap CSS/JS and JQuery are 3rd party libraries that may update their url/code at any time. Amazon Mechanical Turk (MTurk) is including these libraries as a default option for you, but is not responsible for any changes to the external libraries --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" integrity="sha384-s1ITto93iSMDxlp/79qhWHi+LsIi9Gx6yL+cOKDuymvihkfol83TYbLbOw+W/wv4" crossorigin="anonymous"></script><script>
$(document).ready(function() {
// Instructions expand/collapse
var content = $('#instructionBody');
var trigger = $('#collapseTrigger');
content.hide();
$('.collapse-text').text('(Click to expand)');
trigger.click(function(){
content.toggle();
var isVisible = content.is(':visible');
if(isVisible){
$('.collapse-text').text('(Click to collapse)');
}else{
$('.collapse-text').text('(Click to expand)');
}
});
// end expand/collapse
});
</script></div>
</section>
<p> </p>

Answer 1

The entries may be more than one space which would not be an empty String.
You can use the following function to check if a String is null, empty, or only spaces:
function isNullOrEmpty(str){
return !str.trim().length;
}
<input id="testinput" type="text" onkeyup="checkEmpty()"/>
<br/>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function isNullOrEmpty(str){
return !str.trim().length;
}
function checkEmpty(){
var input = document.getElementById("testinput").value;
if(isNullOrEmpty(input)){
result.innerHTML = "Empty string";
} else {
result.innerHTML = "Non-empty string";
}
}
</script>
Form with check to see if all fields are filled in:
<form id="thisForm">
<label for="username"><b>Username:</b></label><br/>
<input type="text" id="username">
<br/>
<label for="password"><b>Password:</b></label><br/>
<input type="password" id="password">
<br/>
<input type="button" value="Submit" onClick="validateForm()">
</form>
<span id="result"></span>
<script>
var result = document.getElementById("result");
function isNullOrEmpty(str){
return !str.trim().length;
}
function validateForm(){
result.innerHTML = "";
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var passed = true;
if(isNullOrEmpty(username)){
result.innerHTML += "<p/><b style='color: red;'>Username can not be empty!</b>";
passed = false;
}
if(isNullOrEmpty(password)){
result.innerHTML += "<p/><b style='color: red;'>Password can not be empty!</b>";
passed = false;
}
if(passed){
document.getElementById("thisForm").style.display = "none";
result.innerHTML = "<h1>Form submitted successfully!</h1>";
}
}
</script>