HTML form with JavaScript Function - javascript

I have a script
<html>
<head>
<title> FORM REGISTRASI </title>
<link rel="stylesheet" type="text/css" href="css/coba.css">
</head>
<body>
<script type="text/javascript" src="js/default.js"></script>
<!--Input-->
<form name="fform" class="daftar">
<h1>REGISTRASI AKUN</h1>
<fieldset class="row1">
<legend>Emal</legend>
<p>
<label>Email</label><input type="text" placeholder="Email" name="email">
<label>Password</label><input type="password" placeholder="Password">
</p>
<p>
<label>Konfirmasi Email</label><input type="text" placeholder="Konfirmasi Email">
<label>Konfirmasi Password</label><input type="password" placeholder="Konfirmasi Password">
</p>
</fieldset>
<fieldset class="row2">
<legend>Biodata Pengguna</legend>
<p>
<label>Nama Lengkap</label><input type="text" class="panjang" placeholder="Nama Lengkap" name="nama">
</p>
<p>
<label>Nomor Telepon</label><input type="text" maxlength="12" name="telepon">
</p>
<p>
<label> Alamat </label>
<textarea cols="32" rows="5" placeholder="Alamat" name="alamat"></textarea>
</p>
</fieldset>
<fieldset class="row3">
<legend>Biodata Lain</legend>
<p>
<label>Jenis Kelamin</label>
<input type="radio" value="Pria" name="Pria">
<label class="JK">Pria</label>
<input type="radio" value="Wanita" name="Wanita">
<label class="JK">Wanita</label>
</p>
<p>
<label>Tempat Lahir</label>
<input class="panjangkota" type="text" maxlength="20" name="tempatlahir" />
</p>
<p>
<label>Tanggal Lahir</label>
<input type="date" size="2" maxlength="2" name="tanggal" />
</p>
<p>
<label>Hobby</label>
<input type="checkbox" value="Browsing" name="Browsing">
<label class="hobby">Browsing</label>
<input type="checkbox" value="Membaca" name="Membaca">
<label class="hobby">Membaca</label>
</p>
<p>
<label> </label>
<input type="checkbox" value="Sepakbola" name="Sepakbola">
<label class="hobby">Sepakbola</label>
<input type="checkbox" value="Galau" name="Galau">
<label class="hobby">Galau</label>
</p>
</fieldset>
<div><input type="button" value="kirim" onclick="daftar()"></div>
<tr>
<div><input type="reset" value="ulang"></div>
</form>
<!--Output-->
<hr>
<form class="daftar2">
<h1>OUTPUT</h1>
<fieldset class="row4">
<legend>Pendaftaran Akun</legend>
<p>
<label>Nama Depan :</label><input type="text" name="znama">
</p>
<p>
<label>Nomor Telepon :</label><input type="text" name="ztelepon">
</p>
<p>
<label>Email :</label><input type="text" name="zemail">
</p>
<p>
<label>Jenis Kelamin :</label><input type="text" name="zJK">
</p>
<p>
<label>Tempat Lahir :</label><input type="text" name="ztempatlahir">
</p>
<p>
<label>Tanggal Lahir :</label><input type="text">
</p>
<p>
<label>Hobby :</label><input type="text" name="zHobby">
</p>
<p>
<label>Alamat :</label><textarea cols="32" rows="5" zalamat></textarea>
</p>
</fieldset>
</form>
</body>
</html>
and I have a JavaScript code link this:
function daftar()
{
var emailstr = (document.fform.email.value);
var namastr = (document.fform.nama.value);
var teleponstr = (document.fform.telepon.value);
var alamatstr = (document.fform.alamat.value);
var tempatlahirstr = (document.fform.tempatlahir.value);
//obejek teks
(document.fform.zemail.value) = emailstr;
(document.fform.znama.value) = namastr;
(document.fform.ztelepon.value) = teleponstr;
(document.fform.ztempatlahir.value) = tempatlahirstr;
//textarea
(document.fform.zalamat.value) = alamatstr;
//radio button
if (fform.Pria.checked)
{
Pria = (document.fform.Pria.value);
(document.fform.zJK.value) = Pria;
} else
if (fform.Wanita.checked)
{
Wanita = (document.fform.Wanita.value);
(document.fform.zJK.value) = Wanita;
}
//checkbox
if (fform.Browsing.checked)
{
Browsing = (document.fform.Browsing.value);
(document.fform.zHobby.value) = Browsing;
} else
if (fform.Membaca.checked)
{
Membaca = (document.fform.Membaca.value);
(document.fform.zHobby.value) = Membaca;
} else
if (fform.Sepakbola.checked)
{
Sepakbola = (document.fform.Sepakbola.value);
(document.fform.zHobby.value) = Sepakbola;
} else
if (fform.Galau.checked)
{
Galau = (document.fform.Galau.value);
(document.fform.zHobby.value) = Galau;
}
I want to print all item (specially for text and radio/checkbox object, don't see date object) in the input form to output form with one javascript function, when i try to submit all item, it didn't shown on output form. What wrong with that code and how to print all of them to the output form? Please help me, this is my collage assignment. (If you want, you can copy and paste that code to test that code).

For this pupose why dont you use angular js?
its simple and easy bro.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
Name:<input type="text" name="name" ng-model="name"><br>
<p>Gender: <input type="radio" ng-model="gen" value="male" name="gen">Male
<input type="radio" ng-model="gen" value="female" name="gen">Female</p>
<p ng-bind="name"></p>
<p ng-bind="gen"></p>
</div>
</body>
</html>
Learn more Angularjs from W3schools :)

Related

How to validate checkbox and if validated copy one textbox into another

Hi i have a form containing postal address and billing information. I want to copy postal address to billing information if information is same. I don't understand how i validate if checkbox is checked then copy postal address to billing information textbox.
My code is as follows:
!DOCTYPE html>
<title>My Example</title>
</head>
<body>
<form class="Form1" method="post">
<fieldset>
<legend>Personal Information</legend>
<label>Name
<input type="text" name="customer_name" required>
</label>
<label>Postal Adress
<input type="text" name="PostalAdress">
</label>
<label>Age
<input type="text" name="Age">
</label>
</fieldset>
</form>
<form class="Form2" method="get">
<fieldset>
<legend>Billing Information</legend>
<p>
<label>Billing Information is Same as the Postal Adress?</label></br>
<input type="checkbox" name="choice1">
<p>
<input type="submit" name="submit" value="Submit" onclick="validate()">
</p>
</p>
<p>
<label>Billing Information</label>
<input type="text" name="BillingInformation">
</p>
</fieldset>
</form>
<form class="Form3">
<fieldset>
<legend>Newsletter Subscription</legend>
<input type="radio" name="yes"><label>Yes</label>
<input type="radio" name="No"><label>No</label>
</fieldset>
</form>
<script>
function validate() {
var remember = document.getElementById("choice1");
if (choice1.checked) {
var src = document.getElementById("PostalAdress"),
dst = document.getElementById("BillingInformation");
src.addEventListener('input', function() {
dst.value = src.value;
});
};
</script>
</body>
</html>
Kindly help me what is wrong with my script and how do i do it.
The same with correct HTML syntax and proper JS
const myForm = document.getElementById('my-Form');
myForm.oninput = () =>
{
if (myForm.choice1.checked)
{
myForm.BillingInformation.value = myForm.PostalAdress.value
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // to test the form without real submit
// get response
Array.from(new FormData(myForm),elm=>console.log(elm[0],'->',elm[1]))
}
label {white-space: nowrap;}
.as-console-wrapper {
max-height: 100% !important;
width: 50% !important;
top: 0; left: 50% !important;
}
<form id="my-Form" method="post" >
<fieldset>
<legend>Personal Information</legend>
<label>
Name
<input type="text" name="customer_name" required>
</label>
<label>
Postal Adress
<input type="text" name="PostalAdress">
</label>
<label>
Age
<input type="text" name="Age">
</label>
</fieldset>
<fieldset>
<legend>Billing Information</legend>
<p>
<label>
Billing Information is Same as the Postal Adress?
<input type="checkbox" name="choice1">
</label>
</p>
<p>
<label>Billing Information</label>
<input type="text" name="BillingInformation" />
</p>
</fieldset>
<fieldset>
<legend>Newsletter Subscription</legend>
<label><input type="radio" name="newsLetter" value="yes" checked > Yes </label>
<label><input type="radio" name="newsLetter" value="No" > No </label>
</fieldset>
<p>
<button type="submit" >Submit</button>
<button type="reset" >reset</button>
</p>
</form>
You can do it like this
$(document).ready(function(){
$(("input[name='choice1']").click(function(){
if($(this).is(":checked")){
var postal_address = $("input[name='PostalAdress']")
$("input[name='BillingInformation']").val(postal_address)
}
})
});
jQuery cdn
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Add new created label and input-text to form using dom Javascript?

I have three fields that will be filled by the user.
one for the question, and the two others for the proposed answers. I want to give the user the possibility to add the third or as much as he wants propositions whenever he clicks at add proposition. I started coding the function but it's still missed
<head>
<script>
function myFunction(){
var x = document.createElement("LABEL");
var t = document.createTextNode("Titre");
x.appendChild(t);
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button onclick="myFunction()">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
If I'm getting your question right, you need to add inputs to get more answers from user as he wants. If so, see the following -
var addButton = $('#add_button');
var wrapper = $('#more_answers');
$(addButton).click(function(e) {
e.preventDefault();
var lastID = $("#myForm input[type=text]:last").attr("id");
var nextId = parseInt(lastID.replace( /^\D+/g, '')) + 1;
$(wrapper).append(`<div><input type="checkbox" name="ans${nextId}" id="ans${nextId}" values="" /> <input type="text" name="ans${nextId}" id="ans${nextId}" value=""/>Delete<div>`);
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<div id="more_answers"></div>
<br>
<button id="add_button">Add proposition</button> <br><br><br>
<input type="submit" value="submit">
</form>
</body>
In your function, you have to append your label as well in its parent. Like below -
function myFunction() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
form.appendChild(input)
}
<form id="myForm" method="POST" action="./exam_coordinates">
<label for="question"> Question </label> <br>
<input class="champ" type="textarea" name="question" id="question" value=""><br><br>
<label for="ans"> Answers </label> <br>
<input type="checkbox" name="ans1" id="ans1" values="" />
<input type="text" name="ans1" id="ans1" value=""><br>
<input type="checkbox" name="ans2" id="ans2" />
<input type="text" name="ans2" id="ans2" value=""><br>
<br>
<button type="button" onclick="myFunction()">Add proposition</button> <br><br>
<input type="submit" value="submit">
</form>
If you want to put your elements at any specific place, you should create a wrapper in your form element just like below -
function myFunction() {
let wrapper = document.getElementById("dynamic-fields");
var input = document.createElement("input");
wrapper.appendChild(input)
}
<form>
<!-- ...input fields... -->
<div id="dynamic-fields"></div> <br>
<!-- ...buttons.... -->
<button type="button" onclick="myFunction()">Add proposition</button>
</form>
This way it will put those dynamically generated elements on specific place in your form page.
Try this - https://jsitor.com/IO08f-WBx

DOM changes with javascript aren't working

I'm trying to make a simple drop down menu which will have two elements: "male" and "female". I'm using a button to have these elements become visible. The problem is that they become visible but only for a fraction of a second and go back to being hidden.
Here's my code:
<html>
<head>
<title>
Validation Form
</title>
</head>
<body>
<h1>
Validation Form
</h1>
<form id="contactForm" action="" >
<fieldset>
<legend>Validation</legend>
<p>
<label for="firstname">First Name</label>
<input id="firstname" name="firstname" type="text"/>
</p>
<p>
<label for="lastname">Last Name</label>
<input id="lastname" name="lastname" type="text" />
</p>
<p>
<label for="gender">Gender</label>
<input id="gender" name="gender" type="text" />
</p>
<div class="dropdown">
<button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" style="display: none">
<p id="drop_male">Male</p>
<p id="drop_female">Female</p>
</div>
</div>
<p>
<label for="website">Website</label>
<input id="website" name="website" type="text" />
</p>
<p>
<input type="button" id="submit" name="submit" value="Submit" />
<input type="reset" value="clear" />
</p>
</fieldset>
</form>
<script>
var dropBtn = document.getElementById("btn_drop");
dropBtn.onclick = function () {
// show all elements on clicking submit!
var drop = document.getElementById("myDropdown");
drop.style.display = 'block';
}
</script>
</body>
</html>
Look at you browser console. I assume you have an error because you didn't declare myFunction.
Please read this URL: http://www.w3schools.com/jsref/event_onclick.asp and use one of described approaches.
you can make this without javascript live fiddle with css
<p>
<label for="gender">Gender</label>
<select id="gender" name="gender" type='select' >
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</p>

form validation in JS for checkboxes

I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>

How to toggle in Javascript / jQuery

I have this HtML and java script code below. Its suppose to do this: when i click on yes, the textarea box that says why i like cs is suppose to show up and when i click on no, vice versa. but its not doing it, any help?
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>forms.html</title>
<h1> Welcome </h1>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui.
css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#show").hide();
$("#hide").hide();
$("#show").click(function(){
$("#hide").hide()
});
$("#hide").click(function(){
$("#show").show()
});
});
</script>
</head>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</P>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>
your answer is ..........
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#hide").hide();
$(".yes").click(function(){
$("#hide").show();
});
$(".no").click(function(){
$("#hide").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</P>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes" class="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No" class="no"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>
This should work, the text box should show up for you!
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#hide").hide();
$(".yes").click(function(){
$("#hide").show();
});
$(".no").click(function(){
$("#hide").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</P>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes" class="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No" class="no"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>
You can use ternary operator for this purpose:
JS:
$(document).ready(function () {
$("input:radio[name=list]").click(function () {
$(this).val() == 'yes' ? $("#hide").show() : $("#hide").hide();
});
});
or
as suggested in the comments below:
$("#hide").toggle(this.id=="yes");
Demo:
http://jsfiddle.net/lotusgodkk/wg6zx2wj/1/
demo - http://jsfiddle.net/victor_007/wg6zx2wj/
$("input:radio[name=list]").click(function () {
var value = $(this).val();
if (value == 'yes') {
$("#hide").show()
} else {
$("#hide").hide()
}
});
First of all, I should change input type radio values to true or false.
Also, I think you are not writing the code that you want. For example, at first both divs are hidden and nothing make them appear (because radios are hidden too).
I think this is definitely a better approach to that:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title>forms.html</title>
<h1> Welcome </h1>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jqueryui.
css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("img") .mouseover(function() {
$(this).attr("src", "pika2.jpg");
});
$("img").mouseout(function() {
$(this).attr("src", "pika1.jpg");
});
$("#whyNot").hide();
$(':radio[name="list"]').change(function() {
var like = $(this).filter(':checked').val();
if (!JSON.parse(like)) {
$("#whyNot").show();
} else {
$("#whyNot").hide();
}
});
});
</script>
</head>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</P>
<div>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</div>
<div>
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="true"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="false"/>
<label for="No">No</label>
</P>
</div>
<div id="whyNot">
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
<div>
<input type="submit" value="Submit your answers"/>
</div>
</form>
</body>
Try This: Initially check the value of radio button and use show(); and hide(); method of jQuery for toggle the div element
$(document).ready(function () {
$("input:radio[name=list]").click(function () {
var value = $(this).val();
if (value == 'yes') {
$("#hide").show();
}
else
{
$("#hide").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img src="pika1.jpg" alt="piakchu"/>
<p> Please tell me who you are: </P>
<form action="sumbit.html">
<p>
<label for="First Name">First name:</label>
<input type = "text" name="First Name" id="First Name" autofocus>
</p>
<p>
<label for="Last Name">Last Name:</label>
<input type = "text" name="Last Name" id="Last Name" required >
</p>
<div id="show">
<p> Do you like computer science: </p>
<p><input type="radio" name="list" value="yes" id="yes"/>
<label for="yes">Yes</label>
<input type="radio" name="list" value="No" id="No"/>
<label for="No">No</label>
</P>
</div>
<div id="hide">
<p>
<input type="submit" value="Submit your answers"/>
</p>
<p> Why don't you like computer science?: </p>
<textarea name="textarea" rows="5" cols="30" placeholder="Enter your text here (optional)">
</textarea>
</div>
</form>
</body>

Categories

Resources