HTML空白条目

卡恩·约瑟弗

我有一项调查要求接受者完成所有字段，但不知何故，我在输出文件中的“title2”和“dept2”列中有空白条目。我相信当他们在空格中没有提供答案时，它会显示为“{}”。但是这些条目是完全空白的，我无法理解。我想知道是否有任何可能导致此问题的一般错误。下面提供了整个代码。谢谢你。

<p>&nbsp;</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>&nbsp;</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>&nbsp;</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&nbsp;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&nbsp;if &quot;Other&quot; is an option, select &quot;Other&quot; and type &quot;NA&quot; in the blank space provided. If &quot;Other&quot; is not an option, only&nbsp;type &quot;NA&quot; in the&nbsp;blank space provided.&nbsp;        <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&nbsp;second job. //</span></p>

<p>As a rule of thumb, if the start year of a job is specified but the end year&nbsp;is not, select &quot;Ongoing&quot; 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:<a href="https://image.ibb.co/fU2VxT/example_for_mturk.png">link</a></font></div>

<div align="left"><font color="red">Link to the second example: <a href="https://image.ibb.co/cVJg2T/example_mturk_with_department.png">link</a></font></div>

<div align="left">&nbsp;</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">&nbsp;</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>&nbsp;</p>

<div class="form-group"><label for="TranscriptionTexts">2. Select the option &quot;Economics department&quot; if his/her job is at an economics department. Otherwise, select &quot;Other&quot; and copy and paste his&nbsp;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">&nbsp;</div>

<div class="form-group"><label for="TranscriptionTexts">3. Select the title of this person&#39;s first job. If the title is neither &quot;Assistant Professor&quot; nor &quot;Post-doc&quot;, select &quot;Other&quot; and&nbsp;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>
&nbsp;

<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>&nbsp;</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>&nbsp;</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 &quot;Ongoing&quot; 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">&nbsp;</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.&nbsp;</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.&nbsp;</label><span style="font-weight: 700;">Select the option &quot;Economics department&quot; if his/her job is at an economics department. Otherwise, select &quot;Other&quot; and copy and paste his&nbsp;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">&nbsp;</div>

<div class="form-group"><label for="TranscriptionTexts">8.&nbsp;</label><span style="font-weight: 700;">Select the title of this person&#39;s first job. If the title is neither &quot;Assistant Professor&quot; nor &quot;Post-doc&quot;, select &quot;Other&quot; and&nbsp;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>&nbsp;</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 &quot;Ongoing&quot; 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>&nbsp;</p>

物联网

条目可能不止一个空格，不会是空的String。

您可以使用以下函数来检查 aString是否为空、空或只有空格：

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 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。