Error while flling textbox form, doesn't show value using array.from filter element, else
0
I want to create form medical history taking tool that is making a summary in textbox using - jquery array.from checkboxes filter element.checked and else;
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>
There is a problem with
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);
}
it doesn't show element_1_5 value, output looks like this
Visit in presence of <input id="element_1_5" name="element_1_5" class="element text large" type="text" value="">
Chronic diesases: none
Why do I get this error and how to fix it? I want to show text typed.
This is what I've been using before and it worked, but it's quite a long code
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>Output would look like this if I check and type "asasas" in textbox under "Visit in presence of"
Visit in presence of asasas
Chronic diesases: none
javascript jquery arrays forms checkbox
asked Nov 16 '18 at 15:34
sylaasylaa
14
add a comment |
0
I want to create form medical history taking tool that is making a summary in textbox using - jquery array.from checkboxes filter element.checked and else;
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>
There is a problem with
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);
}
it doesn't show element_1_5 value, output looks like this
Visit in presence of <input id="element_1_5" name="element_1_5" class="element text large" type="text" value="">
Chronic diesases: none
Why do I get this error and how to fix it? I want to show text typed.
This is what I've been using before and it worked, but it's quite a long code
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>Output would look like this if I check and type "asasas" in textbox under "Visit in presence of"
Visit in presence of asasas
Chronic diesases: none
javascript jquery arrays forms checkbox
asked Nov 16 '18 at 15:34
sylaasylaa
14
add a comment |
0
0
0
I want to create form medical history taking tool that is making a summary in textbox using - jquery array.from checkboxes filter element.checked and else;
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>
There is a problem with
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);
}
it doesn't show element_1_5 value, output looks like this
Visit in presence of <input id="element_1_5" name="element_1_5" class="element text large" type="text" value="">
Chronic diesases: none
Why do I get this error and how to fix it? I want to show text typed.
This is what I've been using before and it worked, but it's quite a long code
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>Output would look like this if I check and type "asasas" in textbox under "Visit in presence of"
Visit in presence of asasas
Chronic diesases: none
javascript jquery arrays forms checkbox
asked Nov 16 '18 at 15:34
sylaasylaa
14
I want to create form medical history taking tool that is making a summary in textbox using - jquery array.from checkboxes filter element.checked and else;
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>
There is a problem with
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);
}
it doesn't show element_1_5 value, output looks like this
Visit in presence of <input id="element_1_5" name="element_1_5" class="element text large" type="text" value="">
Chronic diesases: none
Why do I get this error and how to fix it? I want to show text typed.
This is what I've been using before and it worked, but it's quite a long code
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>Output would look like this if I check and type "asasas" in textbox under "Visit in presence of"
Visit in presence of asasas
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 = ;
// 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>
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>
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>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>javascript jquery arrays forms checkbox
javascript jquery arrays forms checkbox
asked Nov 16 '18 at 15:34
sylaasylaa
14
asked Nov 16 '18 at 15:34
sylaasylaa
14
edited Nov 23 '18 at 9:59
sylaa
asked Nov 16 '18 at 15:34
sylaasylaa
14
asked Nov 16 '18 at 15:34
sylaasylaa
14
asked Nov 16 '18 at 15:34
sylaasylaa
14
14
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53340970%2ferror-while-flling-textbox-form-doesnt-show-value-using-array-from-filter-elem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53340970%2ferror-while-flling-textbox-form-doesnt-show-value-using-array-from-filter-elem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
