AngularJS add selects based on dropdown value change - javascript

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(){
});

Related

Show or hide a div on selection of dropdown and radio buttion

I am trying to write a jQuery where a div is to be shown if a specific option is chosen from dropdown and a specific radio button is clicked. But I am unable to do so.
Html
<pre><code>
<html>
</body>
<select name="Location of positive event" id="dropdown">
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test">
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test1
</label>
</div>
</body>
</html>
</code></pre>

Can you please check the below code? Hope it will work for you. We are creating a jquery code for hiding and show a div which is having id = test, we are adding a class name div and hide it on default. It will be shown when the “AT Work” option is selected from the dropdown and also shown when you click the “Evening” radio button. You can adjust it according to your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xayb9h1p/
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
}
});
}).change();
});
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box2").not(targetBox).hide();
$(targetBox).show();
});
});
.box,
.box2 {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<pre><code>
<html>
<body>
<select name="Location of positive event" id="dropdown">
<option>Select</option>
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test" class="box work ">
<h2>for Dropdown</h2>
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test2
</label>
</div>
<div id="test1" class="box2 2">
<h2>for Radio Button</h2>
<label>
<input name="test3" value="test!" type="checkbox">
Test3
</label>
<label>
<input name="test4" value="test#" type="checkbox">
Test4
</label>
</div>
</body>
</html>

Page will blink when the button is clicked to execute function but expected result never happens

I am trying to make a website (just for fun and learning) that basically is a t-shirt online store
I have a basic form setup which gets various data from the user
then runs a function called calcTaxes() which supposedly right now is going to mulitply the cost of the shirt by the quantity and spit it right underneath the button
But when I click the button Calculate taxes , all it is doing is it blinks once and resets the form
Perhaps someone can give me a little pointer in my code as to where I can change or fix?
Thank you in advance
function calcTaxes() {
cost = 10;
var taxed = cost * document.getElementById("qty");
document.getElementById("tax").innerHTML = taxed;
}
<form>
Name: <input type="text" placeholder="Your name here" required><br><br>
Address: <textarea placeholder="Your Address" required></textarea><br><br>
Email: <input type="email" placeholder="Your email address" required><br><br>
<label for="size">Choose a size: (Same Price) </label>
<select id="size" name="size">
<option value="XS">XS -Extra Small</option>
<option value="S">S-Small</option>
<option value="M">M-Medium</option>
<option value="L">L-Large</option>
<option value="XL">XL-Extra Large</option>
<option value="XXL">XXL-Extra Extra Large</option>
</select><br><br>
Color: <input type="radio" value="Black" name="color">Black
<input type="radio" value="White" name="color">White
<input type="radio" value="Gun-Metal" name="color">Gun-Metal
<br><br>
Quantity: <input id="qty" type="number"><br><br>
Shipping: <input type="radio" value="Ground" name="shipping">Ground ($10)
<input type="radio" value="Overnight" name="shipping">Overnight ($20)
<input type="radio" value="Drone-Drop" name="shipping">Drone-Drop ($25)
<br><br>
<button class="taxes" onclick="calcTaxes()">Calculate Taxes</button><br>
</form>
<p id="tax"></p>

You are missing .value on document.getElementById("qty");
To get value of that input filed:
document.getElementById("qty").value;
Also remove your button out of the form, it was trying to submit it.
It is working now (I removed required fields, just add quantity and press button):
function calcTaxes() {
cost = 10;
var taxed = cost * document.getElementById("qty").value;
document.getElementById("tax").innerHTML = taxed;
}
<form>
Name: <input type="text" placeholder="Your name here" ><br><br>
Address: <textarea placeholder="Your Address"></textarea><br><br>
Email: <input type="email" placeholder="Your email address" ><br><br>
<label for="size">Choose a size: (Same Price) </label>
<select id="size" name="size">
<option value="XS">XS -Extra Small</option>
<option value="S">S-Small</option>
<option value="M">M-Medium</option>
<option value="L">L-Large</option>
<option value="XL">XL-Extra Large</option>
<option value="XXL">XXL-Extra Extra Large</option>
</select><br><br>
Color: <input type="radio" value="Black" name="color">Black
<input type="radio" value="White" name="color">White
<input type="radio" value="Gun-Metal" name="color">Gun-Metal
<br><br>
Quantity: <input id="qty" type="number"><br><br>
Shipping: <input type="radio" value="Ground" name="shipping">Ground ($10)
<input type="radio" value="Overnight" name="shipping">Overnight ($20)
<input type="radio" value="Drone-Drop" name="shipping">Drone-Drop ($25)
<br><br>
<br>
</form>
<button class="taxes" onclick="calcTaxes()">Calculate Taxes</button>
<p id="tax"></p>

How to clear user selected values with a reset button

I need help with a reset button that will clear all the values selected or entered by the user. My code example is below. I have used JS before to reset all the values from a form but in this case i only need to clear a section of the form. My code is below: So each Fieldset has either text box or drop down.
<div class="column">
<p class="label item-information-fields">New Item</p>
<div class="item-information-fields">
<fieldset class="input-section">
<label for="tItemNickname"><span class="required">*</span>Item Name</label>
<input type="text" class="input" name="tItemNickname" id="tItemNickname" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="sItemType"><span class="required">*</span>Item Type</label>
<select name="sItemType" id="sItemType">
<option value="">Select</option>
<option value="1">Cash/Certificate</option>
<option value="2">Jewelry</option>
<option value="3">Clothing/Home Products</option>
<option value="4">Arts/Crafts</option>
<option value="5">Media, Music/Video</option>
<option value="6">Electronics</option>
<option value="7">Computers</option>
<option value="8">Collectibles</option>
<option value="9">Sports Equipment</option>
<option value="10">Liquor/Wine</option>
<option value="11">Animals</option>
<option value="12">Document Reconstruction</option>
<option value="13">Firearm</option>
<option value="14">Hazardous Material</option>
<option value="16">Event Tickets</option>
<option value="15">Other</option>
</select>
</fieldset>
<fieldset class="input-section hide" id="otherItemType">
<label for="tOtherItem"><span class="required">*</span>Other Item Type</label>
<input type="text" class="input" name="tOtherItem" id="tOtherItem" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="tItemDescription"><span class="required">*</span>Item Description</label>
<textarea class="textarea counter" name="tItemDescription" id="tItemDescription" maxlength="120"></textarea>
</fieldset>
<fieldset class="input-section input-section-short">
<label for="tPurchaseDate"><span class="required">*</span>Purchase Date (mm/dd/yyyy)</label>
<input class="input hasDatePicker enable-sundays" name="tPurchaseDate" id="tPurchaseDate" type="text" />
</fieldset>
<p class="note">If there was no purchase date, use the date the item was shipped.</p>
<fieldset class="input-section borders">
<label for="tAmountRequested"><span class="required">*</span>Amount Requested</label>
<span class="dollarWrap">
<span class="input-dollar-sign">$</span>
<input class="input" name="tAmountRequested" id="tAmountRequested" type="text" />
</span>
</fieldset>
// Button to clear the form.
<input type="reset" value="Reset" />

Or something like this:
$(function(){
$("#ClearItems").click(function(){
$("#myForm")[0].reset();
});
});
Working fiddle: http://jsfiddle.net/oqcqwyy4/

Result of the radio buttons does not work properly if I have the code for both of the options

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.

How do you validate an HTML form using JavaScript?

I am creating a basic survey using the tag, but I am having trouble with using JavaScript to validate the form. I would like it to check all forms and not just one. Please help! Thanks! Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>SurveyBot v1</title>
</head>
<body>
<form action="">
What is your first name?: <input type="text" name="firstname"><br>
What is your last name?: <input type="text" name="lastname">
</form>
<h5>What is your gender?</h5>
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<h5>Which of the following vehicles do you own? (Check all that apply):</h5>
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Scooter">I have a scooter<br>
<input type="checkbox" name="vehicle" value="Quad">I have a quad<br>
<input type="checkbox" name="vehicle" value="Snowmobile">I have a snowmobile<br>
<input type="checkbox" name="vehicle" value="Skateboard">I have a skateboard<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<h5>Which of the following car brands do you drive as your primary car?</h5>
<form action="">
<select name="cars">
<option value="none">None</option>
<option value="other">Other</option>
<option value="volvo">Volvo</option>
<option value="kia">Kia</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="mitsubishi">Mitsubishi</option>
<option value="toyota">Toyota</option>
<option value="ford">Ford</option>
</select>
</form>
<h5>Please check the box that says "I have finished" and press submit. Thank you for taking the survey.</h5>
<form name="input" action="html_form_action.html" method="get">
<input type="checkbox" name="finished" value="I am finished">I have finished<br>
<br><br>
<input type="submit" value="Submit">
</body>
</html>

Just add JavaScript function call near submit button.
<input type="submit" onclick="return validateForm(this.form);" />
Make JavaScript function. Take help from following link: link or you can google some examples.
Moreover, You need to put all stuffs inside single <form></form> tags to make it work. Else you need a workaround that makes your work more tedious.

Categories

Resources