my topic is about html,css and javascript.

kiranmai kamale

My webpage consists of form on the rightside that contains the textbox,checkbox,radiobutton,dropdownlist,textarea and a submit button,on leftside their is a table. I have written script in html file itself and a seperate css file. Actually i need to get the details that we are entering in the form should be able to display in the table by adding rows. I am unable to do that,so would be please correct my code.I have attached the file below

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

kiranmai kamale4y ago
@sachin singh, I need form validation for your code as there should not accept any duplicate values in all the fields and textbox should not exceed more than 8 characters and contain only strings.
+1
kiranmai kamale4y ago
i need a form validation like there should not take repeated values,it should have alert message and should have the validation like textbox should not exceed 8 characters and should take only string. Also needed the loop of single array declaration in the javascript without usingle 5 array.
+1
Sachin Singh4y ago
first, please don't use Id with checkbox clieck event and don't use different-different click event for radiobuttons.
This will duplicate your code.
i made it easy for you, how to write clean code.
find your solution in jsfiddle.
https://jsfiddle.net/1apgzkev/

your HTML
    "stylesheet" href="ktask.css" />
    "viewport" content="width=device-width, initial-scale=1.0">



    class="container  bg-light">

        class="clearfix">
class="left-box ">
FOOD MENU
"4">
ITEM NAME
NO. OF ITEMS
COMBO PACK
BEVERAGES
COMMENT SECTION
"show">

class="right-box ">

FOOD FORM

class="clearfix">

The CSS

table,th,td {
border:1px solid black;
width:30%;
position:left;
background-color:orange;
font-style:italic;
}
h1{
font-style:bold italic;
}
form{
position:relative;
top:0;
background-color:orange;
font-style:italic;
}
.bg-light{
background: #c2c8ca;
}
.clearfix{
clear: both;
}
.test-height{
height: 100px;
}
.container{
width:95%;
margin: 0 auto;
}
.container-fullwidth{
width: 100%;
}
.left-box, .right-box{
width: 50%;
float: left;
}
.right-box{
width: 50%;
float:right;
}
@media screen and (max-width:768px){
.left-box, .right-box{
width: 100%;
}
}
.md1 p1{
font-size:50px;
align:left;
}
.md2 p2{
font-size:50px;
text-align:right;
}
#show th,#show td{
padding:5px;
}

and script

$("#btn").click(function()
{
var userName=$("#uname").val();
var qty=$('input[name="rdoQty"]:checked').val();
var CP=$('input[name="rdocombo"]:checked').val();
var beverages=$("#bv").text();
var comments= $("#tx").val();
alert(userName+""+qty+""+CP+""+beverages+""+comments);
var tr=document.createElement("tr");
$(tr).append("

").append("").append("").append("").append("");

$("#show").append(tr);

});

kiranmai kamale4y ago

i need to use javascript as document.getelementbyid and need code for the checkbox radiobuttons,dropdownlist . i need to display the values of checkbox radiobuttons and dropdownlists

Vikas Panwar4y ago

Check this ZIp file.

And for refrence check this url

https://jsfiddle.net/0q5p1rwg/

https://www.studentstutorial.com/code-editor/?topic=jquery&file_name=jquery-submit-modal

for"uname">Enter item name:	"text" name="username" id="uname">
No. of items	"radio" name="rdoQty" value="1">1 "radio" name="rdoQty"value="2">2 "radio" name="rdoQty"value="3">3
Combo pack	"radio" name="rdocombo" value="Italian combo">Italian combo "radio" name="rdocombo" value="seafood combo">seafood combo
for="beverages">Beverages	"bv" name="beverages">--select any one-- "0">Beverages "1">cooldrinks "2">icecream "3">mocktails
Comments please	"tx">
"button" name="submit" id="btn" value="submit">
"+userName+"	"+qty+"	"+CP+"	"+beverages+"	"+comments+"

my topic is about html,css and javascript.

FOOD MENU

FOOD FORM