Automatically generate paragraph based on the elements on the web form

Automatically generate paragraph based on the elements on the web form - javascript

I'm trying to create a real time preview of a paragraph based on the selections of a form both on the same page. I have been working with this code.
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}
</script>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' id='yes' name='yes'><br>
When? <input type='text' id='acc' name='acc'>
</div>
The result I'm wising is that there will be a pre-prepared paragraph and that will appear at the bottom of the form and will be changed based on the selection of the above options. Like, if 'Yes' is selected then this will appear:
Mr. X will be present in 'London' at '8am'
and if 'No' is selected, then this will appear:
Mr. X will be absent
Thanks in advance for helping.

Try the following:
<html>
<head>
</head>
<body>
Yes <input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' onchange="onLocationChange();" id='yes' name='yes'><br>
When? <input type='text' id='acc' onchange="onTimeChange();" name='acc'>
<div>
Mr. X will be present
<span id="location" style="display: none;"></span>
<span id="time" style="display: none;"></span>
</div>
</div>
<div id="ifNo" style="display:none">
Mr. X will be absent
</div>
<script>
function onLocationChange(){
var value = document.getElementById('yes').value;
if (value) {
document.getElementById('location').style.display = 'inline';
document.getElementById('location').innerHTML = ' in ' + value;
}
else {
document.getElementById('location').style.display = 'none';
}
}
function onTimeChange(){
var value = document.getElementById('acc').value;
if (value) {
document.getElementById('time').style.display = 'inline';
document.getElementById('time').innerHTML = ' at ' + value;
}
else {
document.getElementById('time').style.display = 'none';
}
}
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
document.getElementById('ifNo').style.display = 'none';
}
else {
document.getElementById('ifYes').style.display = 'none';
document.getElementById('ifNo').style.display = 'block';
}
}
</script>
</body>
</html>

I hope this this is your requirement
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('ifYes').style.display = 'block';
document.getElementById('targetDiv').innerHTML=""
}
else {
document.getElementById('targetDiv').innerHTML="Mr. X will be absent";
document.getElementById('ifYes').style.display = 'none';
document.getElementById('yes').value=""
document.getElementById('acc').value=""
}
}
function showResult(){
var yes=document.getElementById('yes').value
var acc=document.getElementById('acc').value
if(yes!="" && acc!="" ){
document.getElementById('targetDiv').innerHTML="Mr. X will be present in '"+yes+"' at '"+acc+"'"
}
else{
alert("Input are blank")
}
}
<!DOCTYPE html>
<html>
<body>
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"><br>
<div id="ifYes" style="display:none">
If yes, where: <input type='text' id='yes' name='yes'><br>
When? <input type='text' id='acc' name='acc'>
<button type="button" onclick="showResult()">Show Result</button>
</div>
<div id="targetDiv"></div>
</body>
</html>

Related

Can't get button to change color based on information in the next page

I'm trying to get the background color of the button to change based on if a sessionStorage item is marked true. On the next page, the Kitchen page, when all the buttons are checked, the sessionStorage item becomes true so when you go back to the "home page",the kitchen is now marked green instead of red. This is the show completion. I think you can use jQuery but I don't really know how to use it.
Home
function loader(){
var form = document.getElementById("myForm");
//error somewhere in here
for(var i=0;i<form.length;i++){
if(sessionStorage.getItem(form.elements[i].value) == "true"){
document.getElementById(form.elements[i].value).style.backgroundColor = "green";
return true;
}else{
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
return false;
}
}
}
function initial(){
if (localStorage.getItem("hasCodeRunBefore") === null) {
var form = document.forms[0];
var tot = document.forms[0].length;
var i;
for(var i = 0; i < tot ; ++i){
document.getElementById(form.elements[i].value).style.backgroundColor = "red";
}
localStorage.setItem("hasCodeRunBefore", true);
}
}
function start(){
initial();
loader();
}
Home HTML
<body onload="start()">
<header align=center>Home Screen</header>
<p align=center id="result"></p>
<script>
document.getElementById("result").innerHTML = sessionStorage.getItem("currentAddress");
</script>
<ul align=center>
<form id="myForm">
<li>
<input type="button" name="area" id="livingroom" value="Living Room" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("livingroom","false");
document.getElementById("livingroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="kitchen" value="Kitchen"><br><br>
<script type="text/javascript">
sessionStorage.setItem("kitchen","false");
document.getElementById("kitchen").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bathroom" value="Bathroom" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bathroom","false");
document.getElementById("bathroom").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="dining" value="Dining" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("dining","false");
document.getElementById("dining").onclick = function () {
location.href = "url";
};
</script>
</li>
<li>
<input type="button" name="area" id="bedroom1" value="Bedroom 1" ><br><br>
<script type="text/javascript">
sessionStorage.setItem("bedroom1","false");
document.getElementById("bedroom1").onclick = function () {
location.href = "url";
};
</script>
</li>
</form>
</ul>
Kitchen
function checkTasks(form){
var count = 0;
for(var i=0;i<form.task.length;i++){
if(form.task[i].checked){
count++;
}
}
if(count == form.task.length){
sessionStorage.setItem("kitchen","true");
window.open("url");
}else{
alert("You have not completed all the tasks! Please check all the boxes to indicate you have completed the tasks. If there is an issue, write it in the other box.");
}
}
Kitchen HTML
<body>
<header align=center>Kitchen To Do List</header>
<form name="todolist" >
<div id="button">
<label>
<input type="checkbox" name="task" value="1" ><p>Microwave</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Coffee Maker</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Oven</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Dishwasher</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Stove Top</p>
</label>
</div>
<div id="button">
<label>
<input type="checkbox" name="task" value="1"><p>Other</p>
</label>
</div>
<textarea id="other"></textarea><br><br>
<p align=center>
<input type="submit" name="box" id="box" value="Complete" onclick="checkTasks(this.form)">
</p>
</form>
<div class="close">
<form align=center action="url" target="_self">
<input type="submit" name="back" value="Back">
</form>
</div>

Every time you load the home page you are setting the value to false with those inline scripts. Remove the sessionStorage.setItem("livingroom","false"); calls in home.html and it looks like everything will work.

Show text on a radio button selection

I have created a radio button which says "no" and "yes". By default, nothing is selected.
So what I'm looking to do here is, if someone select no, nothing happens, but if someone select "Yes" It should print a text below saying hello world.
Can someone help?
<input type="radio" value="no-charge">
No
<input type="radio" value="charge">
Yes

You need to set up event listeners for clicks on the radio buttons. When either is clicked, you need to check the value of the checked button. When it's "yes", set your message to "hello world", and blank when it's "no":
var radioY = document.getElementById("radioY");
var msg = document.getElementById("msg");
var radioQuery = document.getElementsByName("query");
function start() {
radioQuery[0].addEventListener("click", checkClicked);
radioQuery[1].addEventListener("click", checkClicked);
}
//
function checkClicked() {
for (var x = 0; x < radioQuery.length; x++) {
if (radioQuery[x].checked && radioQuery[x].value == "yes") {
msg.innerHTML = "Hello World";
return;
} else {
msg.innerHTML = "";
}
}
}
//
window.load = start();
<input name="query" value="no" type="radio"> No
<input name="query" value="yes" id="radioY" type="radio"> Yes
<div id="msg"></div>
Here's a jQuery solution you might prefer:
$(document).ready(function() {
$("#radioY").click(function() {
$("#msg").text("Hello World!");
});
$("#radioN").click(function() {
$("#msg").text("");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='radioN' name='query' value='no' /> No
<input type='radio' id='radioY' name='query' value='yes' /> Yes
<div id="msg"></div>

Just add an event listener for click to the related element:
Javascript solution:
document.querySelector('input[value="charge"]').addEventListener("click", function()
{
document.getElementById("someId").innerHTML += "HELLO WORLD!<br>";
});
<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>
JQuery solution:
$('input[value="charge"]').click(function()
{
$("#someId").html($("#someId").html() + "HELLO WORLD!<br>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>

Add an event listener like so:
document.getElementById("yes").addEventListener("click", () => console.log("Hello world!"));
<form>
<input type="radio" value="no-charge"> No
<input type="radio" value="charge" id="yes"> Yes
</form>

1.Way
let radio_1 = document.getElementById("radio_1")
radio_1.addEventListener("click",function(){
alert("hello world")
})
<input type="radio" value="no-charge" id="radio_1">
<input type="radio" value="charge" id="radio_2">
2.Way
function myAlert(){
alert("hello world")
}
<input type="radio" value="no-charge" onclick=myAlert()>
<input type="radio" value="charge" id="radio_2">
3.Way
$("#radio_1").click(function(){
alert("hello world")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="no-charge" id=radio_1>
<input type="radio" value="charge" id="radio_2">

function onChange(event) {
var x = document.getElementById("hello-world");
console.log(event.target.value);
if(event.target.value === "yes"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<input type="radio" name="group" value="no" onchange="onChange(event);">
No
<input type="radio" name="group" value="yes" onchange="onChange(event);">
Yes
<div id="hello-world" style="display:none">Hello World</div>

<input name="query" value="yes" id="radioY" type="checkbox"> Yes
<div id="msg"></div>
<script>
var radioY = document.getElementById("radioY");
var msg = document.getElementById("msg");
var radioQuery = document.getElementsByName("query");
function start() {
radioQuery[0].addEventListener("click", checkClicked);
radioQuery[1].addEventListener("click", checkClicked);
}
//
function checkClicked() {
for (var x = 0; x < radioQuery.length; x++) {
if (radioQuery[x].checked && radioQuery[x].value == "yes") {
msg.innerHTML = "Hello World";
return;
} else {
msg.innerHTML = "";
}
}
}
//
window.load = start();
</script>

change redirect location onClick.

I'm trying to change a redirect link using check boxes that append to the URL and a button that uses the changed URL. Im still a beginner to JavaScript and am a little lost as to where i'm going wrong.
My code:
<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var new=original.concat(addition)
//for testing
window.alert(new)
document.getElementById("test1").innerHTML= new;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>

<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>
Currently in your code change the below, new to newurl - new is a reserved word.
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
var newurl =original.concat(addition)
//for testing
window.alert(newurl)
document.getElementById("test1").innerHTML= newurl;
//for the real redirecting not active for now
//window.location=new
}
I dont see a tag with id=test1, so you will get null exception in the console browser. Add a tag based on that and test.
I have added a snippet, please check.

<html>
<form>
<div class="element1">"
<input type="checkbox" name="name1" id="id1" value="val1" class="hidden" ></label></div>
<div class="element2">"
<input type="checkbox" name="name2" id="id2" value="val2" class="hidden" ></label></div>
<div class="element3">"
<input type="checkbox" name="name3" id="id3" value="val3" class="hidden" ></div>
<div class="element00">
<input type="button"onclick="myFunction(calculatedUrl());" name="button1" id="itemA" value="valA" ></label></div>
</form>
<script>
function calculatedUrl(){
var totalString=""
var link1="some text"
var link2="more text"
var link3="something else"
if(document.getElementById("id1").checked == true){
var totalString = totalString.concat(link1);
}
if(document.getElementById("id2").checked == true){
var totalString = totalString.concat(link2);
}
if(document.getElementById("id3").checked == true){
var totalString = totalString.concat(link3);
}
return totalString
}
function myFunction(id){
var original="http://myoriginalurl"
var addition=id
console.log(id);
var n =original.concat(addition)
//for testing
window.alert(n)
document.getElementById("test1").innerHTML= n;
//for the real redirecting not active for now
//window.location=new
}
</script>
</html>

Javascript - If/Else If result

I have these blocks:
function generateEmail(){
if
(document.getElementById('emailOpt1').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if
(document.getElementById('emailOpt2').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if
(document.getElementById('emailOpt3').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if
(document.getElementById('emailOpt4').checked = "true") {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
and this:
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick=generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea></td></tr>
when I hit the 'generate email' button after selecting one of the 'radios', the code seems to revert the selection back to the first option as I keep on getting the first option on the textarea.
any ideas and a possibly a simpler way to do this will be appreciated.
note: I had to go this route since the user wants the radios to be buttons.

I fix it :
Change :
.checked = "true"
to :
.checked == true
Final code :
<html>
<head>
</head>
<body>
<div class="radioEmailType" id="emailClass">
<input type="radio" id="emailOpt1" name=emailType value="email_c1">
<label for="emailOpt1">class-one</label>
<input type="radio" id="emailOpt2" name=emailType value="email_c2">
<label for="emailOpt2">class-two</label>
<input type="radio" id="emailOpt3" name=emailType value="email_c3">
<label for="emailOpt3">class-three</label>
<input type="radio" id="emailOpt4" name=emailType value="email_c4">
<label for="emailOpt4">class-four</label>
</div>
<button type="button" class="gButton" onclick="generateEmail()">GENERATE EMAIL</button>
<textarea id=generatedEmail></textarea>
<script>
function generateEmail(){
if (document.getElementById('emailOpt1').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt1.value
}
else if (document.getElementById('emailOpt2').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt2.value
}
else if (document.getElementById('emailOpt3').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt3.value
}
else if (document.getElementById('emailOpt4').checked == true) {
document.getElementById('generatedEmail').innerHTML = emailOpt4.value
}
}
</script>
</body>
</html>

Radio button clears text boxes

I have two radio buttons: Click the first radio button and a three textboxes appear if they start entering information and then change their mind and select the second radio button it does not clear the text they have entered. So what I am trying to figure out is if there is a way make it clear the text from those textboxes when a new radio button (of the same group) is chosen. Any help is greatly appreciated!
http://jsfiddle.net/k0paz2pj/
<input
type="radio"
value="Yes"
name="lien"
id="lien"
onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input
type="radio"
value="None"
name="lien"
id="nolien"
onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input
type="text"
name="lienlname"
id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input
type="text"
name="lienladdress"
id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input
type="text"
name="lienldate"
id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<br>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>

One approach, staying with the plain JavaScript from your question/JS Fiddle demo:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
// getting all the input elements within '#div1' (using a CSS selector):
var inputs = document.querySelectorAll('#div1 input');
// iterating over those elements, using Array.prototype.forEach,
// and setting the value to '' (clearing them):
[].forEach.call(inputs, function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
A marginally more concise form of the above (or, if not more concise, with less repetition):
function showhideForm(lien) {
var isYes = lien.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
JS Fiddle demo.
And, finally, a version that moves away from the obtrusive JavaScript of in-line event-handling (onclick, onchange, etc):
function showhideForm() {
// 'this' in the function is the radio-element to which
// the function is bound as an event-handler:
var isYes = this.value.trim().toLowerCase() === 'yes',
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2');
div1.style.display = isYes ? 'block' : 'none';
div2.style.display = isYes ? 'none' : 'block';
if (!isYes) {
[].forEach.call(div1.getElementsByTagName('input'), function (input) {
input.value = '';
});
}
}
// finding the elements with the name of 'lien':
var lienRadios = document.getElementsByName('lien');
// iterating over those elements, using forEach (again):
[].forEach.call(lienRadios, function (lien) {
// adding a listener for the 'change' event, when it
// occurs the showhideForm function is called:
lien.addEventListener('change', showhideForm);
});
JS Fiddle demo.
References:
Array.prototype.forEach().
document.getElementsByTagName().
document.getElementsByName().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
String.prototype.toLowerCase().
String.prototype.trim().

You can always use this when another radio is checked:
$("#div1 .clearfix input:text").val("");
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 .clearfix input:text").val("");//here use to clear inputs
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
After (hate) comments (kidding) a js approach:
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
} else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
//js
container = document.getElementById('div1');
inputs = container.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
inputs[index].value = "";
}
}
}
<input type="radio" value="Yes" name="lien" id="lien" onchange="showhideForm(this.value);" />
<label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);" />
<label for="nolien">No Lien</label>
<div id="div1" style="display:none">
<div class="clearfix">
<p>
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" id="lienlname">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" id="lienladdress">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2">
</p>
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>

Develop Reference

JavaScript is the programming language of the Web.

Automatically generate paragraph based on the elements on the web form - javascript

Related

Can't get button to change color based on information in the next page

Show text on a radio button selection

change redirect location onClick.

Javascript - If/Else If result

Radio button clears text boxes

Categories

Resources