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

问题描述 投票：1回答：3

我想创建可填写的表单到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

所以我想将未经检查的值省略并检查以填充如何做到这一点？我想让身体检查更容易，我总是输入所有东西

javascript jquery html forms text
3个回答
0
投票

在这里，您可以继续使用String现在做些什么

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)
})
<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>
0
投票

你熟悉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'));

   }

   });

});
0
投票

您可以使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.