Question

我想为html创建可填写的表单并将其保存到文本文件，或者只是在网站上有一个框，使选中的所有内容都可以复制为纯文本。

<img id="top" src="top.png" alt="">
<div id="form_container">

  <h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
  <form id="form_25714" class="appnitro" method="post" action="">
    <div class="form_description">
      <h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
      <p></p>
    </div>
    <ul>

      <li id="li_1">
        <label class="description" for="element_1">Visit in the presence of </label>
        <span>
    			<input id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
    <label class="choice" for="element_1_1">parents</label>
    <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_1_2">mother</label>
    <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
    <label class="choice" for="element_1_3">father</label>
    <input id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
    <label class="choice" for="element_1_4">grandmother</label>
    <input id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
    <label class="choice" for="element_1_5">grandfather</label>
    <input id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
    <label class="choice" for="element_1_6">grandparents</label>
    
    		</span>
      </li>
      <li id="li_2">
        <label class="description" for="element_2">Chronic diesases </label>
        <div>
          <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
        </div>
      </li>
      <li id="li_3">
        <label class="description" for="element_3">Allergies </label>
        <div>
          <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
        </div>
      </li>
      <li id="li_4">
        <label class="description" for="element_4">Medical history </label>
        <div>
          <textarea id="element_4" name="element_4" class="element textarea medium"></textarea>
        </div>
      </li>
      <li id="li_5">
        <label class="description" for="element_5">Meningism </label>
        <span>
    			<input id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
    <label class="choice" for="element_5_1">negative</label>
    <input id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_5_2">positive</label>
    
    		</span>
      </li>
      <li id="li_7">
        <label class="description" for="element_7">Skin </label>
        <span>
    			<input id="element_7_1" name="element_7" class="element radio" type="radio" value="1" />
    <label class="choice" for="element_7_1">Normal, without purpura</label>
    <input id="element_7_2" name="element_7" class="element radio" type="radio" value="2" />
    <label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>
    
    		</span>
      </li>
      <li id="li_6">
        <label class="description" for="element_6">Temperature </label>
        <div>
          <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
        </div>
      </li>

      <li class="buttons">
        <input type="hidden" name="form_id" value="25714" />

        <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
      </li>
    </ul>
  </form>

</div>
<img id="bottom" src="bottom.png" alt="">

例如，我填写了这样的表格 form filled example

因此示例输出为：

Chronic diesases none
Allergies none
Medical history
since 3 days diahrerra vomiting, temp 38,5 C
Skin rash on legs
Temperature 38,1

因此，我将忽略未检查的值以将其省略并检查是否已填充怎么做？我想让身体检查更容易，我讨厌总是输入Everythig

Answer 1

您熟悉Javascript / jQuery吗？

您需要使用某种形式的逻辑来确定该字段是否为空或是否选中了该框

<form>
<input type="checkbox" data-val="Has Hemorrhoids"/>Hemmorhoids<br/>
<input type="checkbox" data-val="Has Severe Anal Fissures"/>Anal Fissures<br/>

<button id="create_final_summary">Make Summary</button>

</form>

<script>

$('#create_final_summary').on('click', function(){

var allFields = $(this).parents('form').find('input');

console.log(allFields);

   allFields.each(function(){

    if($(this).prop('checked' == true)){

   $("#final_summary").append($(this).attr('data-val'));

   }

   });

});

Answer 2

在这里，您可以继续使用String进行操作

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 1.3, window.innerWidth/window.innerHeight, 0.1, 1000 );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
camera.position.z = 50;



var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
// left side Color of Shirt
var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 0.5);
keyLight.position.set(-100, 0, 100);
// Right sideColor of Shirt
var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(120, 100%, 80%)'), 0.75);
fillLight.position.set(100, 0, 100);
// Back Color of Shirt
var backLight = new THREE.DirectionalLight(0xff0000, 0.5);
backLight.position.set(100, 0, -100).normalize();

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);


var mtlLoader = new THREE.MTLLoader();
mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');
mtlLoader.setPath('/examples/3d-obj-loader/assets/');
mtlLoader.load('nonunified.mtl', function (materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('/examples/3d-obj-loader/assets/');
    objLoader.load('nonunified.obj', function (object) {

        scene.add(object);
        object.position.y -= 1.3;



    });

});

var animate = function () {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render(scene, camera);
};

animate();

const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);

$("#saveForm").addEventListener("click", function (evt) {
  evt.preventDefault(); // don't submit the form
  let output = [];
  
  // set first field if radio checked
  let inPresenceOf = Array.from($$("input[type='radio'][id^='element_1_']")).filter(element => element.checked);
  if(inPresenceOf.length === 1) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
  
  // set second field if value not empty
  if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
  
  // set third field if value not empty
  if($("#element_3").value.trim()) output.push("Allergies: " + $("#element_3").value.trim());
  
  // set fourth field if value not empty
  if($("#element_4").value.trim()) output.push("Medical History: " + $("#element_3").value.trim());
  
  // set fifth field if radio checked
  let meningism = Array.from($$("input[type='radio'][id^='element_5_']")).filter(element => element.checked);
  if(meningism.length === 1) output.push("Meningism " + $("label[for='"+meningism[0].id+"']").innerHTML);
  
  // set sixth field if radio checked
  let skin = Array.from($$("input[type='radio'][id^='element_7_']")).filter(element => element.checked);
  if(skin.length === 1) {
    if($("label[for='"+skin[0].id+"']").innerHTML === "Normal, without purpura")
      output.push("Skin: Normal, without purpura");
    else output.push("Skin: " + $("#element_7_2").value);
  }
  
  // set seventh field if value not empty
  if($("#element_6").value.trim()) output.push("Temperature: " + $("#element_6").value.trim());
  
  const outputString = output.join("\n");
  console.log(outputString)
})

Answer 3

您可以使用JavaScript将文本数据提取为对象并查看该对象的属性（在控制台中查看）：

var relatives = document.body.querySelectorAll("#relativesChoices .radio");
var chronicInput = document.body.querySelector("#element_2");
var allergyInput = document.body.querySelector("#element_3");
var historyInput = document.body.querySelector("#element_4");
var meninigsm = document.body.querySelectorAll("#meninigsm .radio");
var skin = document.body.querySelectorAll("#skin .radio");
var temp = document.body.querySelector("#element_6");

 var finalResult = {
  relatives:"",
  chronic: "",
  allergies: "",
  medicalHistory: "",
  meningism :"",
  skin:"",
  temparture:""
}
 
function displayResults(){

for (var choice of relatives){
  if(choice.checked === true){
    finalResult.relatives = choice.value;
  }
}

for (var choice of meninigsm){
  if(choice.checked === true){
    finalResult.meningism = choice.value;
  }
}

for (var choice of skin){
  if(choice.checked === true){
    finalResult.skin = choice.value;
  }
}
  finalResult.chronic = chronicInput.value;
  finalResult.allergies = allergyInput.value;
  finalResult.medicalHistory = historyInput.value;
  finalResult.temparture = temp.value;
   console.log(finalResult);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MEDICAL HISTORY QUESTIONNAIRE</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>

</head>
<body id="main_body" >

    <img id="top" src="top.png" alt="">
    <div id="form_container">

        <h1><a>MEDICAL HISTORY QUESTIONNAIRE</a></h1>
        <form id="form_25714" class="appnitro"  method="post" action="">
                    <div class="form_description">
            <h2>MEDICAL HISTORY QUESTIONNAIRE</h2>
            <p></p>
        </div>                      
            <ul >

                    <li id="li_1" >
        <label class="description" for="element_1">Visit in the presence of </label>
        <span id="relativesChoices">
            <input value="parents" id="element_1_1" name="element_1" class="element radio" type="radio" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input value="mother" id="element_1_2" name="element_1" class="element radio" type="radio" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input value="father" id="element_1_3" name="element_1" class="element radio" type="radio" value="3" />
<label class="choice" for="element_1_3">father</label>
<input value="grandmother" id="element_1_4" name="element_1" class="element radio" type="radio" value="4" />
<label class="choice" for="element_1_4">grandmother</label>
<input value="grandfather " id="element_1_5" name="element_1" class="element radio" type="radio" value="5" />
<label class="choice" for="element_1_5">grandfather</label>
<input value="grandparents" id="element_1_6" name="element_1" class="element radio" type="radio" value="6" />
<label class="choice" for="element_1_6">grandparents</label>

        </span> 
        </li>       <li id="li_2" >
        <label class="description" for="element_2">Chronic diesases </label>
        <div>
            <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_3" >
        <label class="description" for="element_3">Allergies </label>
        <div>
            <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>       <li id="li_4" >
        <label class="description" for="element_4">Medical history </label>
        <div>
            <textarea id="element_4" name="element_4" class="element textarea medium"></textarea> 
        </div> 
        </li>       <li id="li_5" >
        <label class="description" for="element_5">Meningism </label>
        <span id="meninigsm">
            <input value="negative" id="element_5_1" name="element_5" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">negative</label>
<input value="positive" id="element_5_2" name="element_5" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">positive</label>

        </span> 
        </li>       <li id="li_7" >
        <label class="description" for="element_7">Skin </label>
        <span id="skin">
            <input id="element_7_1" name="element_7" class="element radio" type="radio" value="normal" />
<label class="choice" for="element_7_1">Normal, without purpura</label>
<input id="element_7_2" name="element_7" class="element radio" type="radio" value="abnormal" />
<label class="choice" for="element_7_2"><input id="element_7_2" name="element_7_2" class="element text medium" type="text" maxlength="800" value=""/> </label>

        </span> 
        </li>       <li id="li_6" >
        <label class="description" for="element_6">Temperature </label>
        <div>
            <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/> 
        </div> 
        </li>
              <button onclick="displayResults()">displayResults<button>
                    <li class="buttons">
                <input type="hidden" name="form_id" value="25714" />

                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
        </li>
            </ul>
        </form> 

    </div>
    <img id="bottom" src="bottom.png" alt="">
    </body>
</html>

HTML表单-多种选择形式的纯文本

3 个答案: