Show/hide areas of form (im using bootstrap) - javascript

I would like to show different areas on my form dependent on what is selected.
I can do this is JavaScript but would like to use Jquery as the effects look much better.
I've seen lots of Jquery examples on the net but I cannot see how to implement it into my form.
Would it be possible to show me one as an example on my form and I will be able to do the rest.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="content-main col-md-12">
<form>
<img src="img/logo.png">
<br><br>
Metsa Wood Quick Estimation tool
<br><br>
<div class="col-md-9">
<fieldset class="form-group">
<label for="exampleSelect1">Type of Construction</label>
<select class="form-control" id="TypeOfConstruction">
<option>Traditional Masonry</option>
<option>Timber Frame</option>
</select>
</fieldset>
<!-- Below will only show if Timber Frame is selected -->
<fieldset class="form-group">
<label for="PartyWalls">Which walls are party walls?</label>
<br><input type="checkbox"> W1
<br><input type="checkbox"> W2
<br><input type="checkbox"> W3
<br><input type="checkbox"> W4
</fieldset>
<!-- Above will only show if Timber Frame is selected -->
<fieldset class="form-group">
<label for="FloorWidthA">Floor Width A(X)</label>
<input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthB">Floor Width B(X)</label>
<input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
<!-- <small class="text-muted">This is the text for A</small>-->
</fieldset>
<fieldset class="form-group">
<label for="FloorWidthA">Is there a stair Opening?</label>
<br><input type="checkbox">
</fieldset>
<!-- Below will only show if Stair Opening is checked -->
<fieldset class="form-group">
<label for="FloorWidthA">Opening width C(X)</label>
<input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthA">Opening width D(X)</label>
<input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
</fieldset>
<!-- Above will only show if Stair Opening is checked -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-3">
<img src="img/drawing.jpg">
</div>
</div>
</div>
</div>
<!--
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>​


First give id to the element which you want to show and hide.
By default make it display none.
According to the event(click, change..etc) make them show and hide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="content-main col-md-12">
<form>
<img src="img/logo.png">
<br><br>
Metsa Wood Quick Estimation tool
<br><br>
<div class="col-md-9">
<fieldset class="form-group">
<label for="exampleSelect1">Type of Construction</label>
<select class="form-control" id="TypeOfConstruction">
<option>Traditional Masonry</option>
<option>Timber Frame</option>
</select>
</fieldset>
<!-- Below will only show if Timber Frame is selected -->
<fieldset class="form-group" id="tempId" style="display:none;">
<label for="PartyWalls">Which walls are party walls?</label>
<br><input type="checkbox"> W1
<br><input type="checkbox"> W2
<br><input type="checkbox"> W3
<br><input type="checkbox"> W4
</fieldset>
<!-- Above will only show if Timber Frame is selected -->
<fieldset class="form-group">
<label for="FloorWidthA">Floor Width A(X)</label>
<input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthB">Floor Width B(X)</label>
<input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
<!-- <small class="text-muted">This is the text for A</small>-->
</fieldset>
<fieldset class="form-group">
<label for="FloorWidthA">Is there a stair Opening?</label>
<br><input type="checkbox" id="FLoorAId">
</fieldset>
<!-- Below will only show if Stair Opening is checked -->
<fieldset class="form-group" id="tempId2" style="display:none;">
<label for="FloorWidthA">Opening width C(X)</label>
<input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthA">Opening width D(X)</label>
<input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
</fieldset>
<!-- Above will only show if Stair Opening is checked -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-3">
<img src="img/drawing.jpg">
</div>
</div>
</div>
</div>
<!--
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" ></script>
<script>
$(document).on('change','#TypeOfConstruction',function() {
if($("#TypeOfConstruction option:selected").text()=='Timber Frame'){
$('#tempId').show();
}else{
$('#tempId').hide();
}
});
$(document).on('click','#FLoorAId',function() {
if($("#FLoorAId").is(':checked')){
$('#tempId2').show();
}else{
$('#tempId2').hide();
}
});
</script>
</body>
</html>​


do like this.this will help to you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style type="text/css">
.wfiedls{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="content-main col-md-12">
<form>
<img src="img/logo.png">
<br><br>
Metsa Wood Quick Estimation tool
<br><br>
<div class="col-md-9">
<fieldset class="form-group">
<label for="exampleSelect1">Type of Construction</label>
<select class="form-control" id="TypeOfConstruction">
<option>Traditional Masonry</option>
<option>Timber Frame</option>
</select>
</fieldset>
<!-- Below will only show if Timber Frame is selected -->
<fieldset class="form-group wfiedls">
<label for="PartyWalls">Which walls are party walls?</label>
<br><input type="checkbox"> W1
<br><input type="checkbox"> W2
<br><input type="checkbox"> W3
<br><input type="checkbox"> W4
</fieldset>
<!-- Above will only show if Timber Frame is selected -->
<fieldset class="form-group">
<label for="FloorWidthA">Floor Width A(X)</label>
<input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthB">Floor Width B(X)</label>
<input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
<!-- <small class="text-muted">This is the text for A</small>-->
</fieldset>
<fieldset class="form-group">
<label for="FloorWidthA">Is there a stair Opening?</label>
<br><input type="checkbox">
</fieldset>
<!-- Below will only show if Stair Opening is checked -->
<fieldset class="form-group">
<label for="FloorWidthA">Opening width C(X)</label>
<input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthA">Opening width D(X)</label>
<input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
</fieldset>
<!-- Above will only show if Stair Opening is checked -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-3">
<img src="img/drawing.jpg">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#TypeOfConstruction").on('change',function(){
var selectedBalue = $("#TypeOfConstruction").val();
if (selectedBalue == "Timber Frame")
{
$(".wfiedls").slideDown(500);
}
else{
$(".wfiedls").slideUp(500);
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>​


try this. it will slideUp/slideDown depending on the option selected.
List item
added value to the select options.
js code added at the end of the file.
initially hiding the timer-frame-fieldset.
if timer frame selected then slideDown the timer-frame-fieldset else slideUp.
hope it helps...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="content-main col-md-12">
<form>
<img src="img/logo.png">
<br><br>
Metsa Wood Quick Estimation tool
<br><br>
<div class="col-md-9">
<fieldset class="form-group">
<label for="exampleSelect1">Type of Construction</label>
<select class="form-control" id="TypeOfConstruction">
<option value="traditional-masonry">Traditional Masonry</option>
<option value="timber-frame">Timber Frame</option>
</select>
</fieldset>
<!-- Below will only show if Timber Frame is selected -->
<fieldset class="form-group" style="display:none;" id="timber-frame-fieldset">
<label for="PartyWalls">Which walls are party walls?</label>
<br><input type="checkbox"> W1
<br><input type="checkbox"> W2
<br><input type="checkbox"> W3
<br><input type="checkbox"> W4
</fieldset>
<!-- Above will only show if Timber Frame is selected -->
<fieldset class="form-group">
<label for="FloorWidthA">Floor Width A(X)</label>
<input type="text" class="form-control" id="FloorWidthA" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthB">Floor Width B(X)</label>
<input type="text" class="form-control" id="FloorWidthB" placeholder="Enter in mm">
<!-- <small class="text-muted">This is the text for A</small>-->
</fieldset>
<fieldset class="form-group">
<label for="FloorWidthA">Is there a stair Opening?</label>
<br><input type="checkbox">
</fieldset>
<!-- Below will only show if Stair Opening is checked -->
<fieldset class="form-group">
<label for="FloorWidthA">Opening width C(X)</label>
<input type="text" class="form-control" id="DoorWidthC" placeholder="Enter in mm">
<!--<small class="text-muted">This is the text for A</small>-->
<label for="FloorWidthA">Opening width D(X)</label>
<input type="text" class="form-control" id="DoorWidthD" placeholder="Enter in mm">
</fieldset>
<!-- Above will only show if Stair Opening is checked -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-3">
<img src="img/drawing.jpg">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#TypeOfConstruction").on("change", function(e){
var v = $(this).val();
if(v == 'timber-frame') {
$("#timber-frame-fieldset").slideDown();
} else {
$("#timber-frame-fieldset").slideUp();
}
});
});
</script>
</body>
</html>​

Related

Html css get input values and save it in array

I have a form in which I have multiple forms to like add and remove so it can be one or two or 3.
I just want to get data from the form and save it in an array
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<section>
<div class="container">
<form method="post" action="submit.php">
<div class="form-group fieldGroup">
<div class="input-group">
<div class="row">
<div class="col-lg-4">
<input type="text" name="userfname" class="form-control" placeholder="Enter First Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="usermname" class="form-control" placeholder="Enter Middle Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="userlname" class="form-control" placeholder="Enter Last Name"/>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="usermobilenumber" class="form-control" placeholder="Enter Mobile Number"/>
</div>
<div class="col-lg-4">
<input type="text" name="userdob" class="form-control" placeholder="Enter Date of birth"/>
</div>
<div class="col-lg-4">
<select id="gender">
<option value="volvo">Male</option>
<option value="saab">Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="useremail" class="form-control" placeholder="Enter Email id"/>
</div>
<div class="col-lg-4">
<input type="text" name="userpassword" class="form-control" placeholder="password"/>
</div>
<div class="col-lg-4">
<select id="User Category">
<option value="">Head of Family</option>
<option value="">Mother</option>
<option value="">Father</option>
<option value="">Brother</option>
<option value="">Sister</option>
<option value="">Dependent</option>
<option value="">Child</option>
<option value="">Spouse</option>
</select>
</div>
</div>
<div class="row">
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<div class="row">
<div class="col-lg-4">
<input type="text" name="userfname" class="form-control" placeholder="Enter First Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="usermname" class="form-control" placeholder="Enter Middle Name"/>
</div>
<div class="col-lg-4">
<input type="text" name="userlname" class="form-control" placeholder="Enter Last Name"/>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="usermobilenumber" class="form-control" placeholder="Enter Mobile Number"/>
</div>
<div class="col-lg-4">
<input type="text" name="userdob" class="form-control" placeholder="Enter Date of birth"/>
</div>
<div class="col-lg-4">
<select id="gender">
<option value="volvo">Male</option>
<option value="saab">Female</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<input type="text" name="useremail" class="form-control" placeholder="Enter Email id"/>
</div>
<div class="col-lg-4">
<input type="text" name="userpassword" class="form-control" placeholder="password"/>
</div>
<div class="col-lg-4">
<select id="User Category" class="form-control">
<option value="">Head of Family</option>
<option value="">Mother</option>
<option value="">Father</option>
<option value="">Brother</option>
<option value="">Sister</option>
<option value="">Dependent</option>
<option value="">Child</option>
<option value="">Spouse</option>
</select>
</div>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
</div>
</section>
<script src="js/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
index.js
$(document).ready(function(){
//group add limit
var maxGroup = 15;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
Now what I want to do is get values of form in array-like
[{'name': 'inputname', 'email': 'inputEmail'}, {'name': 'inputname', 'email': 'inputEmail'},]
As you can see I have 2 arrays in JSON that I want my data so how many forms will add it will increase data.

https://api.jquery.com/serialize/
try serialization, the method walks through the specified fields and collects data

The value of the for attribute of the label element must be the ID of a non-hidden form control?

I'm trying to create a website for a class project. One of the pages has to be a form. For my form, when I coded the labels, I got a "The value of the for attribute of the label element must be the ID of a non-hidden form control" error for each label when I went to validate it, despite the fact that the site works as intended. How can I fix it Can it be fixed? Here's the code for the webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>In The Know :: Subscribe</title>
<meta charset="utf-8">
<link href="intheknow.css" rel="stylesheet">
<meta name="description" content="InTheKnow.com is your go-to site for whenever you want to catch up on the latest stories about everything from Hollywood happenings to world events.">
</head>
<body>
<div id="container">
<header>
<h1>InTheKnow.com</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Subscribe</li>
<li>Topics</li>
</ul>
</nav>
<main>
<h1>Subscribe To Stay In The Know</h1>
<h2>Knowledge is Power. Get The Power To Stay Ahead.</h2>
<hr>
<figure id="subpagepic">
<img src="fishingboat.jpg" alt="InTheKnow.com" width="200" height="200">
<figcaption> Get your info ship sailing<br>
with a subscription today!</figcaption>
</figure>
<h3>Enter Your Basic Information</h3>
<form method="post" action="mailto:gsingletary4#centralgatech.edu">
<label for="myFirstName"> First Name:</label>
<input type="text" name="myFirstName" required="required">
<label for="myLastName"> Last Name:</label>
<input type="text" name="myLastName" required="required">
<label for="myEmailAddress"> Email Address:</label>
<input type="text" name="myEmailAddress" required="required">
<h3>Choose Your Billing Cycle</h3>
<input type="radio" name="entry" id="entry1">$10/mo <br>
<input type="radio" name="entry" id="entry3">$25/3mo<br>
<input type="radio" name="entry" id="entry6">$50/6mo<br>
<input type="radio" name="entry" id="entry12">$80/12mo<br>
<h3>Choose Your Preferred Payment Method</h3>
<select size="1" name="prefpay" id="prefpay">
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
<option value="Discover">Discover</option>
<option value="Chase">Chase</option>
<option value="CapitalOne">Capital One</option>
<option value="AmericanExpress">American Express</option>
</select>
<h3>Preferences/Terms of Service</h3>
<div id="checkbox">
<input type="checkbox" name="notifications" id="notifications" value="yes"> Keep me updated with daily notifications.<br>
<input type="checkbox" name="digital" id="digital" value="yes"> Send me a monthly digital newspaper via email.<br>
<input type="checkbox" name="terms" id="terms" value="yes"> By signing up, you agree to the Terms of Service.<br>
</div>
<h3>Questions/Comments/Concerns?</h3>
<label for="myCommentSection"> Comments: </label>
<textarea name="myCommentSection" id="myCommentSection" rows="3" cols="15"></textarea>
<div id="resetbutton">
<input type="reset">
</div>
<br>
<div id="submitbutton">
<input type="submit" value="Sign me up!">
</div>
</form>
<h3>Questions? Comments? Concerns? Contact us below!</h3>
<div id="contactinfo">
<span class="know">InTheKnow.com</span> <br>
6937 Redwing Drive<br>
Canton, OH 31415<br>
Find us on Facebook: Facebook.com/InTheKnow<br>
Follow us on Twitter: Twitter.com/intheknow<br>
Phone: 987-654-3210<br>
<br>
</div>
</main>
<footer>
Copyright © 2020 InTheKnow.com<br>
gsingletary4#student.centralgatech.edu
</footer>
</div>
</body>
</html>

Your issue is happening in the label/inputs you have where your label's have for attributes but your inputs don't have id attributes. You can fix this as follows:
<label for="myFirstName"> First Name:</label>
<input type="text" id="myFirstName" name="myFirstName" required="required">
<label for="myLastName"> Last Name:</label>
<input type="text" id="myLastNamr" name="myLastName" required="required">
<label for="myEmailAddress"> Email Address:</label>
<input type="text" id="myEmailAddress" name="myEmailAddress" required="required">

How to make submit button work and showing the results in another page with only using javascript?

<!DOCTYPE html>
<html>
<head>
<title>Sign-up form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<form class="center" action="submit.htm" method="post">
<h2>Enter information here</h2>
<div class="form-item">
<label class="category" for="firstname">First name</label>
<input type="text" name="firstname" id="firstname">
</div>
<div class="form-item">
<label class="category" for="lastname">Last name</label>
<input type="text" name="lastname" id="lastname">
</div>
<div class="form-item">
<label class="category" for="meal">With Meal?</label>
<input type="radio" name="meal" value="no" id="no" checked>
<label class="value" for="no">NO</label>
<input type="radio" name="meal" value="yes" id="yes">
<label class="value" for="yes">YES</label>
</div>
<div class="form-item">
<label class="category" for="email">Email</label>
<input type="email" name="email" id="email">
</div>
<div class="form-item">
<label class="category" for="number">Contact number</label>
<input type="number" name="number" id="number">
</div>
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>
I want to show the output of whatever the user input in a different page after clicking submit. how can i do this without using php and only javascript? JS is very hard for me to nderstand so pls help :(

If you use POST method you have to use any server side language like PHP. If you want to achieve the same thing in JavaScript it is very easy. Change the method to get.
<form class="center" action="submit.htm" method="get">
You can write your submit.htm like this.
<div id='firstname'></div>
<div id='lastname'></div>
<div id='meal'></div>
<div id='email'></div>
<div id='number'></div>
Your JavaScript code goes here.
var data = getJsonFromUrl();
document.getElementById("firstname").innerHTML = data['firstname'];
document.getElementById("lastname").innerHTML = data['lastname'];
document.getElementById("meal").innerHTML = data['meal'];
document.getElementById("email").innerHTML = data['email'];
document.getElementById("number").innerHTML = data['number'];
function getJsonFromUrl() {
var query = location.search.substr(1);
var result = {};
query.split("&").forEach(function(part) {
var item = part.split("=");
result[item[0]] = decodeURIComponent(item[1]);
});
return result;
}

jQuery HTML 5 require field if radio button checked

I have a form that has some radio buttons which I need some fields to be required if a radio button is checked.
I have the HTML5 required attribute on the radio button group which works fine but I want some text fields to be required if the corresponding radio button is checked.
I have written some JS which seems to have no effect, and doesn't seem to add the required attribute when the radio button is checked.
HTML:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.js JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('#stallType-Business').change(function () {
if(this.checked) {
$('#bizName').attr('required');
} else {
$('#bizName').removeAttr('required');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});

You can do it like this, where you disable all inputs and then only activate the one that is selected.
It requires that you have the "disabled" prop added to all child inputs at the start.
I also added the ID's for the c-rail inputs.
Note that the check you do does not trigger when you select another radio button, that is why should disable the others when a new one is selected.
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
It is the disableAll() function that does the trick here.
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bookingForm">
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input id="c-rail-yes" type="radio" name="c-rail" value="Yes" disabled /> Yes
<input id="c-rail-no" type="radio" name="c-rail" value="No" disabled /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" disabled />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" disabled />
</div>
</div>
</div>
</form>

Take a look at JQuery's .prop() method...
.prop()
...and a look at this example from...
How to require fields if a certain radio button is checked?
<body>
<form action="" method="post">
<label for="required_later">Required if Option2 selected</label>
<input type="text" name="text_input_field" id="required_later" disabled><br>
<input type="radio" id="option1" name="radio_options" value="option1">
<label for="option1">Option1</label><br>
<input type="radio" id="option2" name="radio_options" value="option2">
<label for="option2">Option2</label><br>
<input type="submit" name="submit" value="Submit">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#option1").click(function() {
$("#required_later").prop("required", false);
$("#required_later").prop("disabled", true);
});
$("#option2").click(function() {
$("#required_later").prop("required", true);
$("#required_later").prop("disabled", false);
$("#required_later").focus();
});
</script>
</body>

Another way to do it is using this function:
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
and adding class="input-radio" to those input that you want to do the job.
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
$('.input-radio').change(function () {
$('div.reveal-if-active').children('input').removeAttr('required');
$(this).parent().children('div.reveal-if-active').children('input').attr('required', true);
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name: </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address: </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number: </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book?: </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Preloved" value="Preloved" />
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail?: </label>
<input type="radio" name="c-rail" value="Yes" /> Yes
<input type="radio" name="c-rail" value="No" /> No
</div>
</div>
<div>
<input class="input-radio" type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" class="input-radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>

Submit Button validation not happening in JS. Undefined formGroupExampleInput

I am trying to display two alerts in a simple form. One, if any field is empty other on successful submission. This is a simple form for learning purpose.
It is now showing error that 'Undefined formGroupExampleInput'
Please Help so that the validation can be done.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mycss.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome to MAC Library!!</h1>
<h2>Registration Page</h2>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">GROUP 4</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>My Account</li>
<li>Register</li>
</ul>
</div>
</nav>
</br>
</br>
<h3 class="myh3">Sign up as new user to receive email updates about upcoming events in the city</h3>
<script type="text/javascript">
function submitForm()
{
if(document.form1.formGroupExampleInput.value==""||
document.form1.formGroupExampleInput2.value==""||
document.form1.exampleInputEmail1.value==""||
document.form1.exampleInputPassword1.value==""){
alert("Enter all fields");
}
else{
document.forms["form1"].submit();
alert("Your Form Successfully Submitted");
}
}
</script>
<div>
<form id="form1">
document.form1.formGroupExampleInput.value
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput">First Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput" placeholder="Enter your first name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="formGroupExampleInput2">Last Name</label>
<input type="text" required="required" class="form-control" id="formGroupExampleInput2" placeholder="Enter your last name">
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputEmail1">Email address</label>
<input type="email" required="required" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</div>
</fieldset>
<fieldset class="form-group">
<div class="required">
<label for="exampleInputPassword1">Password</label>
<input type="password" required="required" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</fieldset>
<fieldset class="form-group">
<label>Gender</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Female
</label>
</div>
</fieldset>
<button type="button" class="btn btn-primary" onclick="submitForm();">Submit</button>
</form>`enter code here`
</div>
</body>
</html>

Categories