I was trying to create a form so when the user fills out the form, everything is stored into the browser storage.
However, I'm currently wonder how to get the values from the controls on the page and store them in session storage using the same key names as the response.html file..
The output I'm currently getting is undefined on every element.
"use strict";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
// submit form
$("reservation_form").submit();
};
window.onload = function() {
$("submit_request").onclick = saveReservation;
$("arrival_date").focus();
};
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type="radio"], input[type="checkbox"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date"><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation"><br>
</form>
</main>
</body>
</html>
<!DOCTYPE html>
<!--response-->
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br><br>");
</script>
</main>
</body>
</html>
The syntax seems wrong. Try these instead
To save data/initialize a sessionStorage:
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
To fetch a saved value from a sessionStorage
// Get saved data from sessionStorage
sessionStorage.getItem('key');
According to my knowledge, what you are looking is to accept user data and display it in another HTML
You can do this by creating a JSON with form data and storing it in local storage. You can bring back that form and populate it to another page. You can use readonly attributes if you want to disallow editing. (Or simply make the fields display in a label/span/paragraph etc..)
The code goes like this:
registration.html
HTML
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="post"
name="form" id="form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date"><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"><br>
</fieldset>
<input type="submit" value="SubmitReservation"><br>
</form>
</main>
</body>
jQuery (3.1.1)
You can use this in a script tag within your HTML
$.fn.serializeObject = function()
{
var jsonObj = {};
var jsonArr = this.serializeArray();
$.each(jsonArr, function() {
if (jsonObj[this.name] !== undefined) {
if (!jsonObj[this.name].push) {
jsonObj[this.name] = [jsonObj[this.name]];
}
jsonObj[this.name].push(this.value || "NA");
} else {
jsonObj[this.name] = this.value || "NA";
}
});
return jsonObj;
}
$(function() {
$('form').submit(function() {
console.log(jsonData);
var jsonData=$('form').serializeObject();
// Put the object into storage
localStorage.setItem('jsonData', JSON.stringify(jsonData));
existingEntries.push(jsonData);
return false;
});
});
response.html
HTML
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="post"
name="form" id="form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date"><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"><br>
</fieldset>
<input type="submit" value="SubmitReservation"><br>
</form>
</main>
</body>
jQuery (3.1.1)
You can use this in a script tag within your HTML
$(function() {
var jsonString = JSON.parse(localStorage.getItem("jsonData"));
$.each(jsonString, function(key, value) {
var ctrl = $('[name='+key+']');
switch(ctrl.prop("type")) {
case "radio": case "checkbox":
ctrl.each(function() {
if($(this).prop('value') == value) $(this).prop("checked",value);
});
break;
case "text":
ctrl.val(value);
break;
default:
ctrl.val(value);
}
});
});
NOTE : CSS remains the same as yours for both files(reservation.css)
You can have a look at the following jsFiddle to execute the above codes:
CLICK HERE FOR registration page
CLICK HERE FOR response page
You can check out the local storage content in Google chrome by pressing
F12 -> Application tab -> local storage on the left side navBar
Related
I want to create a function in javascript whereby I check whether is the radio is being checked if so I will display the cost that is I assign in javascript itself to HTML.
The following is my HTML and javascript:
function priceCalculator(){
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
var length = Object.keys(price_dict).length;
for(var i=0;i<length;i++){
var dis = document.getElementsByName('Size')[i].value;
if(document.getElementsByName('Size').checked){
document.getElementById("DisplayPrice").innerHTML = price_dict[dis];
}
}
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Pizza Order Form</title>
<style>
form {
font-family: Arial, Helvetica, sans-serif;
vertical-align: central;
border: 5px solid black;
margin:0px auto;
width:650px;
padding-left:0.5em;
}
fieldset{
width:600px;
box-sizing:border-box;
border-radius: 20px;
}
.deliver > p > label {
width: 70px;
display: inline-block;
}
.deliver > p > input {
width: 130px;
display: inline-block;
}
#DisplayPrice{
background-color: yellow;
}
</style>
</head>
<body >
<form>
<h1>Pizza order Form</h1>
<p>
<label for="Pizza Type">Pizza Type:</label>
<select name="pizza type">
<option value="Please select" selected>Please select...</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input name="quantity" type="number" min="1" max="4" />
</p>
<!--Size-->
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
<input type="radio" name="Size" value="Medium" onchange="priceCalculator()"/>Medium
<input type="radio" name="Size" value="Large" onload="priceCalculator()"/>Large
</fieldset>
<!--Crust-->
<fieldset>
<legend>Crust:</legend>
<input type="radio" name="Crust"value="Thin" />Thin
<input type="radio" name="Crust" value="Thick" />Thick
<input type="radio" name="Crust" value="Deep Dish" />Deep Dish
</fieldset>
<!--Toppings-->
<fieldset>
<legend>Toppings:</legend>
<input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
<input type="radio" name="Toppings" value="Sausage" />Sausage
<input type="radio" name="Toppings" value="Olives" />Olives
</fieldset>
<!--Addons-->
<p>
<label for="Addons">Addons</label>
<select name="Addons" multiple>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
</p>
<div id="DisplayPrice"></div>
<!--Delivery section-->
<fieldset class="deliver">
<legend>Deliver to:</legend>
<p>
<label for="Name">Name:</label>
<input type="text" name="name" required/>
</p>
<p>
<label for="Address">Address:</label>
<textarea rows="2" cols="30" required></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" name="Postal Code" maxlength="6" required/>
</p>
<p>
<label for="Phone Number">Phone#: </label>
<input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" form="email" required />
</p>
<p>
<label for=" Date">Date:</label>
<input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
<label for="time">Time: </label>
<input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
</p>
</fieldset>
<p>
<input type="submit" value="submit">
<input type="reset" value="reset">
</p>
</form>
<script src="pizzaScript.js"></script>
</body>
</html>
Also, I would like to know is the use of onclick is correct?
Thx in advance m8s!
remember that getElementsByName returns a collection therefore it is not correct to do a getElementsByName('Size').checked it would be correct to access an element of a list getElementsByName('Size')[i].checked
Your event where you assign the function should change for all three, do not load as you have right now.
Also, if you declare values that will always be used price_dict and will not change in your program, you should declare it outside the function.
Your code can be greatly reduced if you pass the item from the html on the onchange
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
function priceCalculator(elm){
document.getElementById("DisplayPrice").innerHTML = price_dict[elm.value];
}
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onchange="priceCalculator(this)" />Small
<input type="radio" name="Size" value="Medium" onchange="priceCalculator(this)"/>Medium
<input type="radio" name="Size" value="Large" onchange="priceCalculator(this)"/>Large
</fieldset>
<div id="DisplayPrice"></div>
You can loop through the elements and find the correct price from the dictionary.
var sizeElements = Array.from(document.getElementsByName('Size'));
var value = sizeElements.length && sizeElements.find(r => r.checked).value;
Working example given below
For the onClick vs onChange: You should probably use onClick. You can read more about it at this question: What the difference between .click and .change on a checkbox
function priceCalculator(){
var price_dict = {
"Small":22, "Medium":28, "Large":35,
}
var sizeElements = Array.from(document.getElementsByName('Size'));
var value = sizeElements.length && sizeElements.find(r => r.checked).value;
return price_dict[value] // use returned price elsewhere
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Pizza Order Form</title>
<style>
form {
font-family: Arial, Helvetica, sans-serif;
vertical-align: central;
border: 5px solid black;
margin:0px auto;
width:650px;
padding-left:0.5em;
}
fieldset{
width:600px;
box-sizing:border-box;
border-radius: 20px;
}
.deliver > p > label {
width: 70px;
display: inline-block;
}
.deliver > p > input {
width: 130px;
display: inline-block;
}
#DisplayPrice{
background-color: yellow;
}
</style>
</head>
<body >
<form>
<h1>Pizza order Form</h1>
<p>
<label for="Pizza Type">Pizza Type:</label>
<select name="pizza type">
<option value="Please select" selected>Please select...</option>
<option value="Aloha Chicken">Aloha Chicken</option>
<option value="Beef Pepperoni">Beef Pepperoni</option>
<option value="Chicken Delight">Chicken Delight</option>
<option value="Deluxe Cheese">Deluxe Cheese</option>
</select>
<label for="Quantity">Quantity</label>
<input name="quantity" type="number" min="1" max="4" />
</p>
<!--Size-->
<fieldset >
<legend>Size:</legend>
<input type="radio" name="Size" value="Small" onclick="priceCalculator()" />Small
<input type="radio" name="Size" value="Medium" onclick="priceCalculator()"/>Medium
<input type="radio" name="Size" value="Large" onclick="priceCalculator()"/>Large
</fieldset>
<!--Crust-->
<fieldset>
<legend>Crust:</legend>
<input type="radio" name="Crust"value="Thin" />Thin
<input type="radio" name="Crust" value="Thick" />Thick
<input type="radio" name="Crust" value="Deep Dish" />Deep Dish
</fieldset>
<!--Toppings-->
<fieldset>
<legend>Toppings:</legend>
<input type="radio" name="Toppings" value="Mushrooms" />Mushrooms
<input type="radio" name="Toppings" value="Sausage" />Sausage
<input type="radio" name="Toppings" value="Olives" />Olives
</fieldset>
<!--Addons-->
<p>
<label for="Addons">Addons</label>
<select name="Addons" multiple>
<option value="Side of Buffalo Wings">Side of Buffalo Wings</option>
<option value="Garlic Bread">Garlic Bread</option>
</select>
</p>
<div id="DisplayPrice"></div>
<!--Delivery section-->
<fieldset class="deliver">
<legend>Deliver to:</legend>
<p>
<label for="Name">Name:</label>
<input type="text" name="name" required/>
</p>
<p>
<label for="Address">Address:</label>
<textarea rows="2" cols="30" required></textarea>
<label for="Postal Code">Postal Code:</label>
<input type="text" name="Postal Code" maxlength="6" required/>
</p>
<p>
<label for="Phone Number">Phone#: </label>
<input type="tel" name="Phone#" maxlength="8" pattern="^[896]\d{7}" required/>
</p>
<p>
<label for="email">Email:</label>
<input type="email" form="email" required />
</p>
<p>
<label for=" Date">Date:</label>
<input type="date" name="Date" min="1 November 2017" max="31 December 2017" required/>
<label for="time">Time: </label>
<input type="time" value="10:00" name="Time" min="10:00" max="22:00" step="15" required/>
</p>
</fieldset>
<p>
<input type="submit" value="submit">
<input type="reset" value="reset">
</p>
</form>
<script src="pizzaScript.js"></script>
</body>
</html>
in this program I'm trying to create a from for people to fill out. However, everything is supposed to be stored into the browser storage.
The problem I keep running into is the arrival date keeps printing out "undefined" and the if "smoking" out keeps printing yes.. even if you dont check the box.
"use strict";
var $ = function(id) { return document.getElementById(id); };
var saveReservation = function() {
var name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
var phone = document.getElementById("phone").value;
sessionStorage.setItem("phone", phone);
var email = document.getElementById("email").value;
sessionStorage.setItem("email", email);
var arrival_date = document.getElementById("arrival_date").value;
sessionStorage.setItem("arrival_date", arrival_date);
var nights = document.getElementById("nights").value;
sessionStorage.setItem("nights", nights);
var adults = document.getElementById("adults").value;
sessionStorage.setItem("adults", adults);
var children = document.getElementById("children").value;
sessionStorage.setItem("children", children);
var standard = document.getElementById("standard").value;
sessionStorage.setItem("roomType", standard);
var king = document.getElementById("king").value;
sessionStorage.setItem("bedType", king);
var smoking = document.getElementById("smoking").value;
sessionStorage.setItem("smoking", smoking);
// submit form
$("reservation_form").submit();
};
window.onload = function() {
$("submit_request").onclick = saveReservation;
$("arrival_date").focus();
};
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type="radio"], input[type="checkbox"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date"><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone"><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation"><br>
</form>
</main>
</body>
</html>
<!DOCTYPE html>
<!-- response -->
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br><br>");
</script>
</main>
</body>
</html>
Problem:
I have created a webform in Business Catalyst which I have customized so that I have multiple instances of it on a static page.
First I created several divs that will contain parts of the form:
<form name="catwebformform23079" method="post" onsubmit="return checkWholeForm23079(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=446040&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}"> <span class="req">*</span> Required
{module_ccsecurity}
<div class="web1"><label for="CAT_Custom_1433316">ARRIVAL <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433316');return false;" />
<label for="CAT_Custom_1433317">DEPARTURE <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433317');return false;" />
<label for="CAT_Custom_1433318">Bedrooms: <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433318" id="CAT_Custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label for="CAT_Custom_1433319">Adults <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433319" id="CAT_Custom_1433319" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div>
<div class="web2"> <label for="CAT_Custom_1433320">Children <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433320" id="CAT_Custom_1433320" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433321">Pets <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433321" id="CAT_Custom_1433321" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433324">Parking <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433324" id="CAT_Custom_1433324" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</div>
<div class="web3"><label for="CAT_Custom_1433322">Name <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433322" id="CAT_Custom_1433322" class="cat_textbox" />
<label for="CAT_Custom_1433323">Surname <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433323" id="CAT_Custom_1433323" class="cat_textbox" />
<label for="WorkPhone">Work Phone Number <span class="req">*</span>
</label>
<br />
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
<label for="EmailAddress">Email Address <span class="req">*</span>
</label>
<br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" />
<input class="cat_button" type="submit" value="Submit" id="catwebformbutton" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount23079 = 0;
function checkWholeForm23079(theForm) {
var why = "";
if (theForm.WorkPhone) why += isEmpty(theForm.WorkPhone.value, "Work Phone Number");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.CAT_Custom_1433316) why += checkDate(theForm.CAT_Custom_1433316.value, "ARRIVAL");
if (theForm.CAT_Custom_1433317) why += checkDate(theForm.CAT_Custom_1433317.value, "DEPARTURE");
if (theForm.CAT_Custom_1433318) why += checkDropdown(theForm.CAT_Custom_1433318.value, "Bedrooms:");
if (theForm.CAT_Custom_1433319) why += checkDropdown(theForm.CAT_Custom_1433319.value, "Adults");
if (theForm.CAT_Custom_1433320) why += checkDropdown(theForm.CAT_Custom_1433320.value, "Children");
if (theForm.CAT_Custom_1433321) why += checkDropdown(theForm.CAT_Custom_1433321.value, "Pets");
if (theForm.CAT_Custom_1433324) why += checkDropdown(theForm.CAT_Custom_1433324.value, "Parking");
if (theForm.CAT_Custom_1433322) why += isEmpty(theForm.CAT_Custom_1433322.value, "Name");
if (theForm.CAT_Custom_1433323) why += isEmpty(theForm.CAT_Custom_1433323.value, "Surname");
if (why != "") {
alert(why);
return false;
}
if (submitcount23079 == 0) {
submitcount23079++;
theForm.submit();
return false;
} else {orm.CAT_Custom_1433321) why
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
As you can see the website is broken down into 3 parts: .web1 .web2 .web3
I also have buttons #hide1 #hide2 that hide and replace .web1 and .web2
// JavaScript Document
$('#hide').click(function(){
if($.trim($('.web1 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web1").hide();
$(".web2").show();
$("#hide").hide();
$("#hide2").show();
}
}
);
// JavaScript Document
$('#hide2').click(function(){
if($.trim($('.web2 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web2").hide();
$(".web3").show();
$("#hide2").hide();
}
}
);
$('.web2').hide();
$('.web3').hide();
$('#hide2').hide();
As you can tell with the code when you click the buttons they are suppose to validate the input values within the div before they proceed to the next div.
I tried this but it seems not validate all of the form inputs. Any help on how I can solve this problem?
I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14 /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>
UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;
function selectAdMeal(value){
//alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='am_' + value;
// alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
function selectChMeal(value){
alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='ch_' + value;
alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
</script>
</head>
<body>
<div ng-app="">
<form name="oitrsvp">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
</div>
<div id="am_1" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
</div>
<div id="am_2" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 2:<br>
<input type="radio" ng-model="ad2meal" value="p">
Pork<br>
<input type="radio" ng-model="ad2meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad2meal" value="v">
Vegetarian
<br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
</div>
<div id="ch_2" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Child 2:<br>
<input type="radio" ng-model="ch2meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch2meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch2meal" value="v">
Vegetarian
<br><br>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</div>
</body>
</html>
In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:
<body ng-app="myApp">
<div ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="am_0" ng-show="numad=='0'">am_0</div>
<div id="am_1" ng-show="numad=='1'">am_1</div>
<div id="am_2" ng-show="numad=='2'">am_2</div>
<select ng-model="numch" id='numch' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="ch_0" ng-show="numch=='0'">
ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});
I have a problem, i have two radio buttons which if you select on the Doctor radio button it will display all the next fields which are needed to show for the doctors and the same we want to happen if you select the patient radio button , i did it to work fine if I have the code for the patient for example but if i write the code also for the doctor it destroy the result of the both options
HERE IS THE CODE...
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<!--DOCTOR OPTIONS
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label style="display:none;" id="Specialty">Specialty:</label>
<select style="display:none;" id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="ID">Doctor ID:</label>
<input style="display:none;" type="text" name="Doctor_ID" id="Doctor_ID" />
-->
<!--PATIENT OPTIONS -->
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="SPID">SPID:</label>
<input style="display:none;" type="text" name="PatientSPID" id="PatientSPID" />
</fieldset>
</body>
<script>
$("input[type='radio'][name='answer']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorGM").show();
$("#DoctorGF").show();
$("#DoctorAge").show();
$("#SelectSpecialty").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#ID").show();
$("#Doctor_ID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#ID").hide();
$("#Doctor_ID").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#SPID").show();
$("#PatientSPID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#SPID").hide();
$("#PatientSPID").hide();
}
});</script>
</html>
PS 1: I COMMENTED THE CODE FOR THE DOCTOR IN ORDER TO WORK PROPERLY FOR THE PATIENT
PS 2: http://jsfiddle.net/niklakis/qp7s409a/24/ HERE IS A LINK TO SEE WHAT HAPPENS IF A HAVE BOTH OF THE CODE
Assuming you can edit the HTML of this form, you should put the extra fields inside separate divs and hide just those divs. Then, your jQuery becomes much simpler, too.
Now in this jQuery, what we're doing is hiding both of the "expansion" sections by default. That's the line $("[id^=expand]").hide(). What this does is select all elements whose id starts with expand and hides them.
Then, we select the expansion section associated with the clicked radio and show that.
$("input[type='radio'][name='answer']").change(function() {
$("[id^=expand]").hide();
$("#expand" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
User Type:
<br/>Doctor
<input type="radio" name="answer" value="Doctor" />
Patient
<input type="radio" name="answer" value="Patient" />
<!--DOCTOR OPTIONS -->
<div id="expandDoctor" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<label id="Female">Female</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label id="Specialty">Specialty:</label>
<select id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="ID">Doctor ID:</label>
<input type="text" name="Doctor_ID" id="Doctor_ID" />
</div>
<!--PATIENT OPTIONS -->
<div id="expandPatient" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="PatientG" value="male" id="PatientGM">
<label id="Female">Female</label>
<input type="radio" name="PatientG" value="male" id="PatientGF">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label id="Disease">Disease:</label>
<select id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="SPID">SPID:</label>
<input type="text" name="PatientSPID" id="PatientSPID" />
</div>
</fieldset>
However, you were having your problem because you were trying to show and hide elements that weren't actually there. For example, you were trying to show/hide #DoctorGM, which doesn't exist, you only have #DoctorG. You should change those ids, too, because it's invalid to have any elements sharing the same id in HTML.