Building a website for software development class I used Sublime Text editor We’
ID: 3703623 • Letter: B
Question
Building a website for software development class
I used Sublime Text editor
We’ve made a “Create New Form” page using html and css
Under the white box it says
“text”
“Marked as required?”
Yes or no
“+Add another field”
“Submit”
The problem we’re facing is that we need the page to be dynamic and have the text, drop down menu, radio buttons and check boxes working.
If you click on any of those buttons it should generate whatever you clicked. But we don’t know how to get it to work.
This is the html form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="functionality.js"></script>
<title>Create New Form</title>
<form method="post" action="createform2.html" class="req">
<?php include('errors.php'); ?>
</head>
<body>
<h2>Create a New Form</h2>
<form method="post">
<div class="create-form-group">
<div id="repeatable">
<div class="input-group">
<label>Enter field name</label>
<input type="text" name="field1">
</div>
<div class="input-group">
Select field type:<p></p>
<span>
<input type="button" id="btnok" value="text" />
<br/>
<script type="text/javascript">
function addText(){
var div1=document.getElementById("div2");
div1.innerHTML="<input type='text'/>";
}</script>
<button type="submit" name="drop" class="btn">Dropdown Menu</button>
<button type="submit" name="radio" class="btn">Radio Buttons</button>
<button type="submit" name="check" class="btn">Check Boxes</button>
</span>
</div>
<p></p>
<div class="radio-group2">
<label>Mark as required?</label>
<br>
<label class="radio-label">
<input type="radio" name="req" value="yes">Yes
</label>
<label class="radio-label">
<input type="radio" name="req" value="no">No
</label>
</div>
<button id="button">Add another field</button><br>
</div>
<<<<<<< HEAD
</div>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</body>
<script>
document.getElementById('button').onclick=repeat;
var i=0;
var original = document.getElementById('repeatable');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatable1" + ++i;
original.parentNode.appendChild(clone);
}
</script>
=======
<!--
<div class="input-group">
Select field type:<p></p>
<span>
<button type="submit" name="text" class="btn">Text Box</button>
<button type="submit" name="drop" class="btn">Dropdown Menu</button>
<button type="submit" name="radio" class="btn">Radio Buttons</button>
<button type="submit" name="check" class="btn">Check Boxes</button>
</span>
</div>
!-->
<div id="div2"></div>
<input type="button" id="btnok" value="text" />
<br />
<script type="text/javascript">
function addText()
{
var div1=document.getElementById("div2");
div1.innerHTML="<input type='text'/>";
}
</script>
<p></p>
<div class="radio-group2">
<label>Mark as required?</label>
<br>
<label class="radio-label">
<input type="radio" name="req" value="yes">Yes
</label>
<label class="radio-label">
<input type="radio" name="req" value="no">No
</label>
</div>
<p><a href=createform2.html>+ Add another field</a></p>
</div>
</div>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</body>
>>>>>>> f21bfd64562c16f720380fab6cdbc31b21117e1b
</html>
This is style.css
body {
background-color: #E0EAF9;
background-image: url("weirfall.jpg");
background-repeat: no-repeat;
}
form {
background: white;
margin: 0px auto;
padding:20px;
margin: 0px auto;
border: 5px solid navy;
width: 30%;
border-radius: 10px;
}
.req {
width: 70%;
border: 3px solid navy;
}
.req h2 {
text-align: center;
}
.input-group{
margin: 10px 0px 10px 0px;
}
.input-group label{
display: block;
align-content: left;
margin: 3px;
}
.input-group input{
height: 25px;
width: 95%;
padding: 5px 10px;
border-radius: 15px;
font-size: 16px;
}
textarea {
height: 90px;
width: 95%;
padding: 5px 10px;
border-radius: 15px;
font-size: 16px;
}
.formBodyGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.fleft {
grid-column: 1 / span 1;
}
.fright {
grid-column: 2 / span 1;
}
.fitem1 { grid-row: 1 / span 1; }
.fitem2 { grid-row: 1 / span 1; }
.fitem3 { grid-row: 2 / span 1; }
.fitem4 { grid-row: 2 / span 1; }
.fitem5 { grid-row: 3 / span 1; }
.fitem6 { grid-row: 3 / span 1; }
.fitem7 { grid-row: 4 / span 1; }
.fitem8 { grid-row: 4 / span 1; }
.fitem9 { grid-row: 5 / span 1; }
.fitem10 { grid-row: 5 / span 1; }
.fitem11 { grid-row: 6 / span 1; }
.fitem12 { grid-row: 6 / span 1; }
.fitem13 { grid-row: 7 / span 1; }
.fitem14 { grid-row: 7 / span 1; }
.fitem15 { grid-row: 8 / span 1; }
.fitem16 { grid-row: 8 / span 1; }
.fitem17 { grid-row: 9 / span 1; }
.fitem18 { grid-row: 9 / span 1; }
.fitem19 { grid-row: 10 / span 1; }
.fitem20 { grid-row: 10 / span 1; }
.fitem21 { grid-row: 11 / span 1; }
.fitem22 { grid-row: 11 / span 1; }
.fitem23 { grid-row: 12 / span 1; }
.fitem24 { grid-row: 12 / span 1; }
.fitem25 { grid-row: 13 / span 1; }
.fitem26 { grid-row: 14 / span 1; }
.fitem27 { grid-row: 14 / span 1; }
.btn{
padding: 10px;
font-size: 14px;
color: black;
border-radius: 5px;
}
.btn:hover {
background-color: LightGray;
}
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: white;
color: #333;
}
.header {
text-align: center;
}
.content {
text-align: center;
}
.homeGrid {
display: grid;
grid-template-rows: repeat(4, auto);
grid-gap: 15px;
}
.box {
justify-self: center;
width: 50%;
background-color: white;
color: black;
border-radius: 10px;
border: 3px navy solid;
padding: 10px;
}
.right {
align-self: right;
}
.column {
float: left;
width: 50%;
text-align: left;
}
.column h3 {
text-align: center;
}
.radio-group {
justify-self: left;
justify-content: left;
}
.radio-label {
display: inline-block;
vertical-align: top;
margin-right: 3%;
}
.radio-group2 {
display: inline-block;
vertical-align: top;
}
Explanation / Answer
I have added functionality for dropdown, checkbox and radio button as you asked plaese find the code below. You can comment if you have any doubt or any further improvement. Thanks
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="functionality.js"></script>
<title>Create New Form</title>
<form method="post" action="createform2.html" class="req">
<?php include('errors.php'); ?>
</head>
<body>
<h2>Create a New Form</h2>
<form method="post">
<div class="create-form-group">
<div id="repeatable">
<div class="input-group">
<label>Enter field name</label>
<input type="text" name="field1">
</div>
<div class="input-group">
Select field type:<p></p>
<span>
<input type="button" id="btnok" value="text" />
<br/>
<script type="text/javascript">
function addText(){
var div1=document.getElementById("div2");
div1.innerHTML="<input type='text'/>";
}
function addDropdown(){
var tmp=document.getElementById("div2");
tmp.innerHTML=`<form><select><option value="Option1">Option1</option><option value="Option2">Option2</option><option value="Option3">Option3</option><option value="Option4">Option4</option></select> </form>`;
}
function addRadio(){
var tmp=document.getElementById("div2");
tmp.innerHTML=`<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>`;
}
function addCheckbox(){
var tmp=document.getElementById("div2");
tmp.innerHTML=`<form>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>`;
}
</script>
<button type="button" name="drop" class="btn">Dropdown Menu</button>
<button type="button" name="radio" class="btn">Radio Buttons</button>
<button type="button" name="check" class="btn">Check Boxes</button>
</span>
</div>
<p></p>
<div class="radio-group2">
<label>Mark as required?</label>
<br>
<label class="radio-label">
<input type="radio" name="req" value="yes">Yes
</label>
<label class="radio-label">
<input type="radio" name="req" value="no">No
</label>
</div>
<button id="button">Add another field</button><br>
</div>
</div>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</body>
<script>
document.getElementById('button').onclick=repeat;
var i=0;
var original = document.getElementById('repeatable');
function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatable1" + ++i;
original.parentNode.appendChild(clone);
}
</script>
<!--
<div class="input-group">
Select field type:<p></p>
<span>
<button type="submit" name="text" class="btn">Text Box</button>
<button type="submit" name="drop" class="btn">Dropdown Menu</button>
<button type="submit" name="radio" class="btn">Radio Buttons</button>
<button type="submit" name="check" class="btn">Check Boxes</button>
</span>
</div>
!-->
<div id="div2"></div>
<input type="button" id="btnok" value="text" />
<br />
<script type="text/javascript">
function addText()
{
var div1=document.getElementById("div2");
div1.innerHTML="<input type='text'/>";
}
</script>
<p></p>
<div class="radio-group2">
<label>Mark as required?</label>
<br>
<label class="radio-label">
<input type="radio" name="req" value="yes">Yes
</label>
<label class="radio-label">
<input type="radio" name="req" value="no">No
</label>
</div>
<p><a href=createform2.html>+ Add another field</a></p>
</div>
</div>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.