Ошибка при заполнении формы текстового поля, не показывает значение с использованием элемента фильтра array.from, иначе - PullRequest
Новая
       2

Ошибка при заполнении формы текстового поля, не показывает значение с использованием элемента фильтра array.from, иначе

0 голосов
/ 16 ноября 2018

Я хочу создать инструмент для сбора медицинской истории, который создает сводку в текстовом поле, используя - jquery array.from checkboxes filter element.checked и другие; 

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 checkbox checked
 let inPresenceOf = Array.from($$("input[type='checkbox'][id^='element_1_']")).filter(element => element.checked);
  if(inPresenceOf.length === 1) {
  output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
  } else { output.push($("#element_1_5").value);
  }
  
  // set second field if value not empty
  if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
const outputString = output.join("\n");
  console.log(outputString)
  document.getElementById("demo").innerHTML = outputString;

})
		<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pediatrics Medical History</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>Pediatrics</a></h1>
		<form id="form_25714" class="appnitro"  method="post" action="">
					<div class="form_description">
			<h2>Pediatrics medical history</h2>
			<p></p>
		</div>						
			<ul >
			
					<li id="li_1" >
		<label class="description" for="element_1">Visit in presence of </label>
		<span>
			<input id="element_1_1" name="element_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element checkbox" type="checkbox" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element checkbox" type="checkbox" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element checkbox" type="checkbox" value="4" />
<label class="choice" for="element_1_4"><input id="element_1_5" name="element_1_5" class="element text large" type="text" value=""/> </label>
		</span> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Chronic diesases </label>
		<div>
			<textarea id="element_2" name="element_2" class="element textarea small">none</textarea>
		</div> 
    					<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>	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
 const outputString = output.join("\n");
  console.log(outputString)
  document.getElementById("demo").innerHTML = outputString;
</script>
<textarea id=demo cols="100" rows="10"> </textarea>

	</body>
</html>

Проблема с 

let inPresenceOf = Array.from($$("input[type='checkbox'][id^='element_1_']")).filter(element => element.checked);
      if(inPresenceOf.length === 1) {
      output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
      } else { output.push($("#element_1_5").value);
      }

он не показывает значение element_1_5, вывод выглядит так 

Visit in presence of  <input id="element_1_5" name="element_1_5" class="element text large" type="text" value=""> 
    Chronic diesases: none

Почему я получаю эту ошибку и как ее исправить? Я хочу показать набранный текст.

Это то, что я использовал раньше, и это работало, но это довольно длинный код 

const $ = (s) => document.querySelector(s);
const $$ = (s) => document.querySelectorAll(s);

$("#saveForm").addEventListener("click", function (evt) {
  evt.preventDefault(); // don't submit the form
  let output = [];
  
 let inPresenceOf = Array.from($$("input[type='checkbox'][id^='element_1_']")).filter(element => element.checked);
	 if ($("#element_1_1").checked) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
	  if ($("#element_1_2").checked) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
	   if ($("#element_1_3").checked) output.push($("label[for='element_1']").innerHTML + " " + $("label[for='"+inPresenceOf[0].id+"']").innerHTML);
		if ($("#element_1_4").checked) output.push($("label[for='element_1']").innerHTML + $("#element_1_5").value);   
		
		
		// set second field if value not empty
  if($("#element_2").value.trim()) output.push("Chronic diesases: " + $("#element_2").value.trim());
const outputString = output.join("\n");
  console.log(outputString)
  document.getElementById("demo").innerHTML = outputString;

})
	<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pediatrics</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>Pediatrics</a></h1>
		<form id="form_25714" class="appnitro"  method="post" action="">
					<div class="form_description">
			<h2>Pediatrics medical history</h2>
			<p></p>
		</div>						
			<ul >
			
					<li id="li_1" >
		<label class="description" for="element_1">Visit in presence of </label>
		<span>
			<input id="element_1_1" name="element_1" class="element checkbox" type="checkbox" value="1" />
<label class="choice" for="element_1_1">parents</label>
<input id="element_1_2" name="element_1" class="element checkbox" type="checkbox" value="2" />
<label class="choice" for="element_1_2">mother</label>
<input id="element_1_3" name="element_1" class="element checkbox" type="checkbox" value="3" />
<label class="choice" for="element_1_3">father</label>
<input id="element_1_4" name="element_1" class="element checkbox" type="checkbox" value="4" />
<label class="choice" for="element_1_4"><input id="element_1_5" name="element_1_5" class="element text large" type="text" value=""/> </label>
		</span> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Chronic diesases </label>
		<div>
			<textarea id="element_2" name="element_2" class="element textarea small">none</textarea>
		</div> 
    					<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>	
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
 const outputString = output.join("\n");
  console.log(outputString)
  document.getElementById("demo").innerHTML = outputString;
</script>
<textarea id=demo cols="100" rows="10"> </textarea>

	</body>
</html>

Вывод будет выглядеть так, если я проверю и наберу «asasas» в текстовом поле под заголовком «Посещение при наличии» 

    Visit in presence of asasas
Chronic diesases: none
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...