How to toggle in Javascript / jQuery - javascript

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>

Related

Check if box in form has information or not

I want to check if my last name element has information on it with an "If" statement but i dont know where to place it or if im going about this wrong. The purpose is to eventually check if all the boxes are filled before i can hit the submit button. So whats the best way to go about checking this?
function check() {
let lastName = document.findElementById('last-name').value;
addressForm = document.shippingAddressForm;
addressForm.addEventListener('submit', (event) => {
event.preventDefault();
});
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post">
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
Problem
You didn't call the function check(). You only defined it.
Suggested solution
Try this I deleted the content of function check(). This example only shows calling the function (but better is using required attribute in HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input required is on half of the page)
function check() {
alert("Please enter all fields ");
}
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link href="style.css" rel="stylesheet">
<script src="main.js" defer></script>
</head>
<body>
<form id="shipping-address-form" name="shippingAddressForm" action="#" method="post" onsubmit='check()'>
<h1>Shipping Address</h1>
<div class="flex-container">
<div>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="firstName" />
</div>
<div>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="lastName" />
</div>
</div>
<div class="flex-container">
<label for="address">Address:</label>
<input type="text" id="address" name="address" />
</div>
<div class="flex-container">
<div>
<label for="city">City:</label>
<input type="text" id="city" name="city" />
</div>
<div>
<label for="state">State:</label>
<input type="state" id="state" name="state" />
</div>
<div>
<label for="zip-code">Zip Code:</label>
<input type="text" id="zip-code" name="zipCode" />
</div>
</div>
<div class="flex-container">
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phoneNumber" />
</div>
<div>
<label for="email">Email:</label>
<input type="text" id="email" name="email" />
</div>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</body>
and also if you want display error message with FF
Error messages
If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:
<input type="email"
x-moz-errormessage="Please specify a valid email address.">

Submitting Form in a popup window

I know that this might seem like a duplicate, but i can't seem to figure this out. I am wanting to submit a form in HTML to a Popup window. when i hit the submit button, it returns a blank page. I want the pop up to display all of the input that one filled out one the form. I want to do it in JavaScript. This is my code here. I want it to output all of the information entered in the form, from the Personal Information fieldset and the personal choices fieldset. I want it to display as an unordered list.
Heres the Javascript that i have so far:
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
Heres the HTML:
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon">Amazon</label><br/>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics">BestBuy</label><br/>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics">Frys Electronics</label><br/>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
Have you prevented the default submit functionality?
Try:
function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}

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>

HTML form with JavaScript Function

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 :)

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>

Categories

Resources