HTML How do I show output for multiple selection? - javascript

I am creating an enquiry form for which user can input their information and display all the data in pop up windows.
Everything can show up except for multiple choice selection which only show a single output.
I want to show all the output which I select.
For example: When I select Green and Blue as the color, It only show 1 color which is Green.
Look at this image screenshot here:
Hoping someone can help me, here is my HTML and Javascript code.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + document.form1.eyeColor.value;
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple>
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</option>
</select>
</td>
</tr>
</table>
</p>
<p><input TYPE="BUTTON" VALUE="Submit" onClick="display();"></p>
</form>
</body>
</html>


You need to replace document.form1.eyeColor.value; by Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value); then you can got selected value. From this map() method to get whole selected value.
Note: window.open() method is not working in this editor so I used alert() method for render fill-up result.
<html>
<head>
<title>Form Example</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function display() {
DispWin = window.open('','NewWin', 'toolbar=no,status=no,width=300,height=200')
message = "<b>Your form has been submitted! </b>"
message += "<ul><li><b>Enquiry Type: </b>" + document.form1.enquiryType.value;
message += "<li><b>Salutation: </b>" + document.form1.salutation.value;
message += "<b>Name: </b>" + document.form1.salutation.value + document.form1.yourname.value;
message += "<li><b>Address: </b>" + document.form1.address.value;
message += "<li><b>Email: </b>" + document.form1.email.value;
message += "<li><b>Favourite Color: </b>" + Array.from(document.form1.eyeColor.selectedOptions).map(option => option.value);
message += "<li><b>PHONE: </b>" + document.form1.phone.value + "</ul>";
alert(message);
DispWin.document.write(message);
}
</script>
</head>
<body>
<h1>Enquiry Form</h1>
<form name="form1">
<table>
<tr>
<td valign="top">
<label for="EnquiryType" ,font-size: 20px;>Enquiry Type</label>
</td>
<td valign="top">
<select name="enquiryType" id="enquiryType" >
<option value="General Infomation">General Information</option>
<option value="Reservations">Reservations</option>
<option value="Rates">Rates</option>
</select>
</td>
</tr>
<tr>
<td valign="top">
<label for="Salutation">Salutation</label>
</td>
<td valign="top">
<label for="Mr">Mr</label>
<input type="radio" name="salutation" id="Mr" value="Mr">
<label for="Mrs">Mrs</label>
<input type="radio" name="salutation" id="Mrs" value="Mrs">
<label for="Miss">Miss</label>
<input type="radio" name="salutation" id="Miss" value="Miss">
<label for="male">Dr</label>
<input type="radio" name="salutation" id="Dr" value="Dr">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="20" NAME="yourname">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Adress: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="30" NAME="address">
</td>
</tr>
<tr>
<td valign="top">
<label for="full_name">Phone Number: </label>
</td>
<td valign="top">
<input TYPE="TEXT" SIZE="15" NAME="phone">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="FavColor">Favourite Color</label>
</td>
<td valign="top">
<select name="eyeColor" id="eyeColor" multiple="multiple">
<option value="Green">Green</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Red">Yellow</option>
</select>
</td>
</tr>
</table>
<p><input type="button" value="Submit" onclick="display()"></p>
</form>
</body>
</html>


You can use selected option to get selected options.
let selectedOptions= document.form1.eyeColor.selectedOptions;
let selectedValues = [];
for (let i=0; i < selectedOptions.length; i++) {
selectedValues[i] = selectedOptions[i].value;
}
console.log(selectedValues);
Hope this helps.

Related

Why in jquery all of the text field can connect to the Javascript file BUT only one is left out?

Why in jquery all of the text field can connect to the Javascript file BUT only one is left out when I insert linking It won't work!
What works is I insert it in HTML and it works fine the validate:
<tr>
<td>Price</td>
<td colspan="2">
<input type="text" id="price" name="Price" class='form-control' style="required: true; number: true" maxlength="6"/>
</td>
<script>
$("#price").on("keyup", function(){
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
});
</script>
</tr>
But When I insert just this it won't work:
<tr>
<td>Price</td>
<td colspan="2">
<input type="text" id="price" name="Price" class='form-control' style="required: true; number: true" maxlength="6"/>
</td>
<script src="js/script.js">
</script>
</tr>
This is my full code in HTML the jquery file its just link to another folder.
This is my previous code that works in the browser the validation works but when I insert linking script it doesn't work :-
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Create New Promotions</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/desaru.css" type="text/css">
<link rel="stylesheet" href="css/header.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/footer.css" type="text/css">
<script src="js/script.js"></script>
</head>
<body>
<!-- Scripts -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<script>
$(document).ready(function() { // website fully loaded
$('#submit').click(function() { //if button id=submit click trigger function down
var name = $('#foldername').val(); //retrieve input for folder name
var httpvar = 'http://211.25.118.147';
var defaultfolder = '/resource/';
//alert(name); get retrieve test name
if(name==""){ // if foldername input blank
alert("Insert folder name");
}
else {
$.ajax( {
url : "addfolder.php",
type: "POST",
data: {foldername : name}, //pass input foldername = name(variable declare at the top) foldername name base on html that set
success: function(result){ //if success will sent the post data
//alert(result);
if (result=="success") { //based on output echo addfolder.php
alert("File "+name+" has been added");
$("#SelectImageFolder option[value='.."+defaultfolder+name+"']").remove();
$("#SelectImageFolder").append($('<option>', { //add new options
value : ".."+defaultfolder+name ,
text : httpvar+defaultfolder+name
}))
$("#SelectImageFolder option:last").attr("selected", "selected");//auto select the last option
}
else if(result=="fail") {// if the file exist then result will fail to create the file
alert("Something wrong happened");
}
}
}
)
}
})
});
</script>
<br/>
<?php
include('header.html'); ?>
<br/><br/><br/><br/>
<div id="scrollbox">
<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><strong>Create New Promotions</strong></h1>
</div>
</div>
<br/>
<form action="PromotionsProcess.php" name="Form" onsubmit="return validateform()" method="post" enctype="multipart/form-data">
<table class='table table-hover table-responsive table-bordered'>
<!--<tr>
<td>Class</td>
<td colspan="2">
<input type='text' name='Class' readonly class='form-control' maxlength="20" value='Promotions'/>
</td>
</tr>-->
<tr>
<td>Category</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Select Category... </option>
<option value="F&B"> F&B </option>
<option value="Hotel"> Hotel </option>
<option value="Merchant"> Merchant </option>
</select>
</div>
</td>
</tr>
<tr>
<td>Item</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Select Item... </option>
<option value="Coffee"> Coffee </option>
<option value="Spa"> Spa </option>
<option value="Icecream"> Icecream </option>
<option value="Sungear"> Sungear </option>
<option value="Burger"> Burger </option>
<option value="Buffet"> Buffet </option>
</select>
</div>
</td>
</tr>
<tr>
<td>Title</td>
<td colspan="2">
<input required type='text' name='Title' class='form-control' maxlength="50"/>
</td>
</tr>
<tr>
<td>Details Header</td>
<td colspan="2">
<input required type='text' name="DetailsHeader" class='form-control' maxlength="50"/>
</td>
</tr>
<tr>
<td>Details</td>
<td colspan="2">
<textarea required name="Details" rows="8" id="Details" class='form-control' maxlength="255"/></textarea>
</td>
</tr>
<tr>
<td>Price</td>
<td colspan="2">
<input type="text" id="price" name="Price" class='form-control' style="required: true; number: true" maxlength="6"/>
</td>
<script>
$("#price").on("keyup", function(){
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
});
</script>
</tr>
<tr>
<td>Promo Validity</td>
<td colspan="2">
<input type="text" name="PromoValidity" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Promo Grouping</td>
<td colspan="2">
<input type="text" name="PromoGrouping" class='form-control' maxlength="20"/>
</td>
</tr>
<tr>
<td>Promo Text</td>
<td colspan="2">
<input type="text" name="PromoText" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Promo Code</td>
<td>
<input type="text" id="PromoCode" name="PromoCode" class='form-control' style="text-transform: uppercase" maxlength="100"/><br/>
<!--<input type="text" name="Ecc" class='form-control' maxlength="100"/><br/>
<input type="text" name="Size" class='form-control' maxlength="100"/>-->
</td>
</tr>
<tr>
<td>Promo Images</td>
<td colspan="2">
<input type="file" id="FilePromoImage" name="FilePromoImage" maxlength="300"/>
</td>
</tr>
<tr>
<td>Image Folder</td>
<td colspan="2">
<select name="SelectImageFolder" id="SelectImageFolder" class='form-control'>
<option value="selected" selected="selected">Select a folder</option>
<?php
$dirs = glob("../resource/*", GLOB_ONLYDIR);
// create variable constant url
$httpvar = 'http://211.25.118.147';
foreach($dirs as $val){
$httpcon = str_replace("..",$httpvar,$val);
echo '<option value="'.$val.'">'.$httpcon."</option>\n";
}
?>
</select><br/>
<div class="input-group">
<input type="text" name="foldername" id="foldername" placeholder="Folder Name" class='form-control' maxlength="100" />
<span class="input-group-btn">
<button type="button" name="submit" id="submit" class="btn"/>Add Folder</button>
</span>
</div></td>
<script src="js/script.js"></script>
</tr>
<tr>
<td>List Images</td>
<td colspan="2">
<input type="file" name="FileListImage" id="FileListImage">
</td>
</tr>
<tr>
<td>Carousel 1</td>
<td colspan="2">
<input required type="file" name="FileCarousel1" id="FileCarousel1">
</td>
</tr>
<tr>
<td>Carousel 2</td>
<td colspan="2">
<input type="file" name="FileCarousel2" id="FileCarousel2">
</td>
</tr>
<tr>
<td>Carousel 3</td>
<td colspan="2">
<input type="file" name="FileCarousel3" id="FileCarousel3">
</td>
</tr>
<tr>
<td>Carousel 4</td>
<td colspan="2">
<input type="file" name="FileCarousel4" id="FileCarousel4">
</td>
</tr>
<tr>
<td>Carousel 5</td>
<td colspan="2">
<input type="file" name="FileCarousel5" id="FileCarousel5">
</td>
</tr>
<tr>
<td>Carousel 6</td>
<td colspan="2">
<input type="file" name="FileCarousel6" id="FileCarousel6">
</td>
</tr>
<tr>
<td>Button Promo</td>
<td colspan="2">
<input type="text" name="ButtonPromo" class='form-control' maxlength="20"/>
</td>
</tr>
<tr>
<td>More Details</td>
<td colspan="2">
<input type="text" name="MoreDetails" class='form-control' maxlength="100"/>
</td>
</tr>
<tr>
<td>Valid From</td>
<td colspan="2">
<input type="text" required id="ValidFrom" readonly name="ValidFrom" class='form-control' />
</td>
</tr>
<tr>
<td>Valid To</td>
<td colspan="2">
<input type="text" required id="ValidTo" readonly name="ValidTo" class='form-control' />
</td>
</tr>
<tr>
<td>Status</td>
<td colspan="2">
<div class="custom-select" style="width:200px;">
<select required>
<option value="" selected disabled hidden>Status... </option>
<option value="Active"> Active </option>
<option value="Inactive"> Inactive </option>
</select>
</div>
</td>
</tr>
<!--<tr>
<td>QR Code</td>
<td colspan="2">
<input type="text" name="QRCode" class='form-control' maxlength="300"/>
</td>
</tr>-->
<tr>
<td></td>
<td colspan="2">
<input type='submit' name='Add' value='Save' class='btn btn-warning' />
<a href='Promotions.php' class='btn btn-danger'>Back</a>
</td>
</tr>
</table>
</form>
</div>
<!-- End Content Section -->
<?php
include('footer.html'); ?>
</div>
<script src="js/script.js">
</script>
</body>
</html>

Is the code in your “script.js” file wrapped inside the jQuery function?
$(function(){
// your code here.
$("#price").on("keyup", function(){
var valid = /^\d{0,4}(\.\d{0,2})?$/.test(this.value),
val = this.value;
if(!valid){
console.log("Invalid input!");
this.value = val.substring(0, val.length - 1);
}
});
Also in your file structure be sure the you have you index.html (or whatever you called you html file and then your “JS” folder which has your “script.js” file. This is based on the script path that you used. (js/script.js)
It might be best to take all of your custom JS code, put it in your script.js file and just link it at the bottom of the page. I think part of the problem is that you are referencing DOM elements that may not have loaded in the page yet. The reference to the submit button for example does not look like it should work based on where it is.
A thing to keep in mind or to get to know really well is the browser critical rendering path. The code that you have is going to render the HTML, then the CSS, then the script tags in the order in which they are placed. I will load your jQuery fine but the JS code that references the “submit” but should work because the button has not been rendered on the page yet.
That’s just what I noted. My best guess is to place all your custom code in the JS file and place it at the bottom of the page. It should work then.
Here are a couple of good videos on the critical rendering path also.
critical rendering path 1
critical rendering path 2

how do i show html select above the other elements

I have a registration page, in which I have a phone field, when I select that field the popup show underneath the other elements.
I want to know that why the phone field options are shown underneath the below options?
Please refer:
The code that I am using for:
sign-up.jsp
enter code here
<form action="Controller" method="GET" id="form">
<input type="hidden" name="command" value="registration"/>
<table class="sign-up-div-table">
<tr>
<td colspan="2"> <h3>Join us for free</h3> </td>
</tr>
<tr>
<td> <input type="text" name="firstname" class="form-control" placeholder="First name" required/> </td>
<td> <input type="text" name="lastname" class="form-control" pattern="^[A-Z][-a-zA-Z]+$" placeholder="Last name" required/> </td>
</tr>
<tr>
<td colspan="2"> <input type="email" name="email" class="form-control" placeholder="Email address" required onkeyup="check(this.value)"/> </td>
</tr>
<tr>
<td colspan="2"> <div id = "mydiv"></div> </td>
</tr>
<tr>
<td colspan="2"> <input type="password" name="password" class="form-control" placeholder="Password" required/> </td>
</tr>
<tr>
<td> <jsp:include page="demo.html"></jsp:include> </td>
</tr>
<tr>
<td colspan="2"> <div id = "numberdiv"></div> </td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-xs">
<span class="input-group-addon" style="width: 100px; background-color:#a2a587; color: white;" >Birthday</span>
<select name="date" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select date </option>
<jsp:include page="dates.jsp"></jsp:include>
</select>
<select name="month" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select month </option>
<jsp:include page="months.jsp"></jsp:include>
</select>
<select name="year" class="form-control" style="background-color: #c7cca7;" required>
<option disabled selected value> select year </option>
<jsp:include page="years.jsp"></jsp:include>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Gender</span>
<select class="form-control" name="gender" style="width: 300px;" required>
<option disabled selected value> select gender </option>
<option>male</option>
<option>female</option>
<option>other</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="input-group input-group-sm">
<span class="input-group-addon" style="width: 100px;">Position</span>
<select class="form-control" name="position" style="width: 300px;" required>
<option disabled selected value> select position </option>
<option>Writer</option>
<option>Author</option>
<option>Contributor</option>
<option>Teacher</option>
<option>Student</option>
</select>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left"> <input type="submit" value="Get Started" class="btn btn-success btn-lg"/> </td>
<td></td>
</tr>
</table>
</form>

HTML Radio Button

I have typed the following code in Front Page and it gives error in displaying Radio Button Values (as undefined):
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>
Rest of the things are working except radio buttons. Kindly help with a solution for the same. Thank you in advance

<form>
What color do you prefer?<br>
<input type="radio" name="colors" id="red">Red<br>
<input type="radio" name="colors" id="blue">Blue
</form>
<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>
<script>
function check() {
document.getElementById("red").checked = true;
}
function uncheck() {
document.getElementById("red").checked = false;
}
</script>
link:-http://www.w3schools.com/jsref/prop_radio_checked.asp

All Radio Buttons has the same name. So you have to select the checked radio button by using document.querySelector('input[name=R1]:checked').value. I have even checked for unselected checkbox value as "Empty"
function f1() {
var fn = document.frm.T1.value;
var ln = document.frm.T2.value;
var ad = document.frm.S1.value;
var sex = document.frm.R1.value;
var nat = document.frm.D1.value;
var typ = document.frm.R2.value;
var typ1 = document.frm.C1.value;
var typ2 = document.frm.C2.value;
var typ3 = document.frm.C3.value;
var budg = document.frm.R3.value;
var mail = document.frm.T5.value;
var mob = document.frm.T3.value;
var resi = document.frm.T4.value;
var city = document.frm.D2.value;
var com = document.frm.S2.value;
document.write("Welcome Dear " + fn + " " + ln + "<br/>" + "Your Sex is " + ((document.querySelector('input[name=R1]:checked'))?document.querySelector('input[name=R1]:checked').value:"Empty") + "<br/>" + "Your Residential Address is " + ad + " and you are " + nat + " National " + "<br>" + "You are looking to " + typ + " the property " +
" and you are interested in " + typ1 + " " + typ2 + " " + typ3 + " Flat." + "<br>" + " Your estimated budget is INR " + budg + "<br>" +
" You will be informed using your e-mail address " + mail + " You will be contacted on your Mobile Number " + mob + " or Residence Number " + resi + "<br>" +
" You are looking for the property in " + city + " City" + " You have following comments " + "<br>" + com);
}
body {
background-color: #222;
}
<p align="center"> </p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<p align="center"><span style="background-color: #FFFFFF">
<font face="Berlin Sans FB Demi">Kindly Fill - Up the details given below and
out Customer Support Team will contact you shortly!</font></span>
</p>
<p align="left"><font face="Berlin Sans FB Demi" color="#FFFFFF">
</font>
</p>
<form method="POST" name="frm" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" U-File="../_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" startspan -->
<input TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<!--webbot bot="SaveResults" i-checksum="43374" endspan -->
<div align="left">
<table border="1" width="39%">
<tr>
<td colspan="2">
<p align="center"><b><font color="#FFFF00">INQUIRY FORM</font></b>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>First Name</b></font>
</td>
<td>
<input type="text" name="T1" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Last Name</b></font>
</td>
<td>
<input type="text" name="T2" size="25">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Postal Address</b></font>
</td>
<td>
<textarea rows="2" name="S1" cols="20"></textarea>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Gender</b></font>
</td>
<td>
<input type="radio" value="MALE" name="R1"><font color="#FFFFFF">MALE
</font>
<input type="radio" value="FEMALE" name="R1"><font color="#FFFFFF">
FEMALE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Nationality</b></font>
</td>
<td>
<select size="1" name="D1">
<option selected value="Indian">INDIAN</option>
<option value="British">BRITISH</option>
<option value="Canadian">CANADIAN</option>
<option value="Chinese">CHINESE</option>
<option value="Japanese">JAPANESE</option>
<option value="GCC">MID EASTERN</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Looking For</b></font>
</td>
<td>
<input type="radio" name="R2" value="Buy" id="1"><font color="#FFFFFF">BUY
<input type="radio" name="R2" value="Lease">LEASE</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Type</b></font>
</td>
<td>
<input type="checkbox" name="C1" value="1 BHK"><font color="#FFFFFF">1
BHK <input type="checkbox" name="C2" value="2 BHK">2 BHK
<input type="checkbox" name="C3" value="3 BHK">3 BHK</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Budget</b></font>
</td>
<td>
<input type="radio" name="R3" value="20-30 Lakhs"><font color="#FFFFFF">20-30
LAKHS</font>
<p>
<input type="radio" name="R3" value="40-60 Lakhs"><font color="#FFFFFF">40-60
LAKHS</font>
</p>
<p>
<input type="radio" name="R3" value="MORE
THAN 60 LAKHS"><font color="#FFFFFF">MORE
THAN 60 LAKHS</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">E-Mail ID</font>
</td>
<td>
<input type="text" name="T5" size="20">
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF">Phone Number</font>
</td>
<td>
<input type="text" name="T3" size="20">
<font color="#FFFFFF">Mob</font>
<p>
<input type="text" name="T4" size="20"><font color="#FFFFFF">
Res</font>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Preferred City</b></font>
</td>
<td>
<select size="1" name="D2">
<option selected value="Mumbai">MUMBAI</option>
<option value="Bangalore">BANGALORE</option>
<option value="Pune">PUNE</option>
<option value="Ahmedabad">AHMEDABAD</option>
<option value="Kochi">KOCHI</option>
</select>
</td>
</tr>
<tr>
<td width="147"><font color="#FFFFFF"><b>Comments</b></font>
</td>
<td>
<textarea rows="2" name="S2" cols="20"></textarea>
</td>
</tr>
</table>
</div>
<p align="left">
<input type="submit" value="Inquire" name="B1" onclick="f1()">
<input type="reset" value="Reset" name="B2">
</p>
</form>
<p align="center">
<a href="Home.htm">
<img border="0" src="home_1.png" width="75" height="72">
</a>
</p>

You can do this either by jQuery or jsvascript
In jQuery use $('input[name="R1"]:checked').val(); here R1 is your checkbox name
In javascript get the dom elements by name and loop through the elements to get the selection.
I have attached a sample code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function ChangeSelection() {
//Using Jquery
var selection = $('input[name="R1"]:checked').val();
console.log("jQuery Result - " + selection);
//Javascript
var radios = document.getElementsByName('R1');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
//Selected Radio
selection = radios[i].value;
// only one radio can be logically checked, don't check the rest
break;
}
}
console.log("JavaScript Result - " + selection);
}
</script>
</head>
<body>
<input type="radio" value="MALE" name="R1" onclick="ChangeSelection()"><font>MALE</font>
<input type="radio" value="FEMALE" name="R1" onclick="ChangeSelection()"><font>FEMALE</font>
</body>
</html>

javascript for form validation works in firefox but not IE8

I am very new to javascript, and took a chunk of code and modified it for my own use. It works fine in Firefox (*NIX and Windows). In IE8, the text field validation works fine, but the select drop downs return as invalid even when an option is selected.
<!DOCTYPE html>
<head>
<meta charset="utf-8 />
<link href="/FNMOC/CSS/styles.main.css" rel="stylesheet" type="text/css">
<title>Fleet Numerical Meteorology and Oceanography Center</title>
<link rel="icon" href="favicon.ico">
<script type="text/javascript">
var RequiredFieldIDs =
'FirstName,LastName,Affiliation,Command,Email,Phone,METOC,Classification,Purpose,Priority,Due,NELat,SWLat,NELong,SWLong';
function CheckRequiredFields()
{
RequiredFieldIDs = RequiredFieldIDs.replace(/[, ]+/,",");
var idList = RequiredFieldIDs.split(",");
var Empties = new Array();
{
var s = TrimFormFieldValues(document.getElementbyId(idList[i]).value);
if (s.length<1) { Empties.push(idList[i]); }
}
if (! Empties.length) { return true; }
var ess = new String ("\n\nThe Following are required:\n");
for (var i=0; i<Empties.length; i++) { ess += '\n\t' + Empties[i]; }
alert (ess);
return false;
}
function TrimFormFieldValues(s)
{
s = s.replace (/^\s*/,"");
s = s.replace (/\s*$/,"");
}
</script>
<script type="text/javascript">
function ShowMenu()
{
var form = document.climo;
var field = form.Classification;
var select = field.selectedIndex;
{
if(select == 4) document.getElementById('tableHide').style.display = '';
else document.getElementById('tableHide').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function ShowMenu2()
{
var form = document.climo;
var field = form.Affiliation;
var select = field.selectedIndex;
{
if(select == 1)document.getElementById('tableHide2').style.display = "";
else document.getElementById('tableHide2').style.display = 'none';
}
}
</script>
</head>
<body>
<div class="wrapper">
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="header">
<a href="/FNMOC/index.html">
<img class="floatright" src="/FNMOC/IMAGES/fnmoc.png" />
</a>
<br />
<h3>
We produce and deliver weather, ocean and climate information for Fleet Safety, Warfighting Effectiveness and National Defense.
<br />
<br />
Atmospheric and Oceanographic Prediction enabling Fleet Safety and Decision Superiority
</h3>
<br />
<br />
</div>
<div class="left_col">
<iframe src="/FNMOC/menu.html" width="100%" height="800" frameBorder="0" scrolling="no">
</iframe>
</div>
<div class="main_col">
<center>
<h2>FORM UNCLASSIFIED UNTIL FILLED OUT</h2>
<h2>Climatology Support Request</h2>
</center>
<form name=climo action="/CGI/mail-form-climo.cgi" method="post" onsubmit="return CheckRequiredFields();">
<table border="0" cellpadding="5" width="100%">
<tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
<center>
Contact Information
</h2>
</b>
<i>
* indicates required field
</i>
</center>
<hr>
</td>
</tr>
<tr>
<td width="30%">
<b>* First Name:</b>
</td>
<td width="70%">
<input type="text" id="FirstName" size="20" maxlength="250" name="1. First Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Last Name:</b>
</td>
<td width="70%">
<input type="text" id="LastName" size="30" maxlength="250" name="2. Last Name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Affiliation:</b>
</td>
<td width="70%">
<select id="Affiliation" name="3. Affiliation:" onchange="!!(ShowMenu2());" size="1">
<option></option>
<option>MIL</option>
<option>CIV</option>
<option>CTR></option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<table style="display:none" id="tableHide2">
<tr>
<td>
Branch of Service:
<select name="4. Branch of Service:" size="1">
<option></option>
<option>USN</option>
<option>USAF</option>
<option>USA</option>
<option>USMC</option>
<option>USCG</option>
</select>
</td>
</tr>
<tr>
<td>
Rank:
<input type="text" id="Rank" size="10" maxlength="10" name="5. Rank:">
</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>
* Command/Organization:
</b>
</td>
<td width="70%">
<input="text" id="Command" size="30" maxlength="250" name="6. Command/Organization:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Email:</b>
</td>
<td width="70%">
<input type="text" id="Email" size="30" maxlength="250" name="7. Email:"
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Phone Number:</b>
</td>
<td width="70%">
<input type="text" id="Phone" size="30" maxlength="30" name="8. Phone number:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>DSN:</b>
</td>
<td width="70%">
<input type="text" size="13" maxlength="13" name="9. DSN:">
</input>
</td>
</tr>
<tr>
<td width="30%>
<b>* Are you meterologist or Oceanographer personnel?</b>
</td>
<td width="70%">
<select id="METOC" name="11. METOC:">
<option></option>
<option>YES</option>
<option>NO</option>
</select>
</td>
</tr>
<tr>
<tr width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Security Classification
</h2>
</b>
<center>
<i>
* indicates required field
</i>
</center>
<hr>
<i>
If classified, provide derivative and declassification info please.
</i>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Classification of this request:</b>
</td>
<td width="70%">
<select id="Classification" name="12. Classification:" onchange="!!(ShowMenu()); size="1">
<option></option>
<option>UNCLASSIFIED</option>
<option>CONFIDENTIAL</option>
<option>SECRET</option>
<option>TOP SECRET</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70">
<table style="display:none" id="tableHide">
<tr>
<td>
<input type=checkbox name="12a. Caveat:" value="SI">SI</input>
<input type=checkbox name="12b. Caveat:" value="TK">TK</input>
<input type=checkbox name="12c. Caveat:" value="NOFORN">NOFORN</input>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">
<b>Classified By:</b>
</td>
<td width="70%">
<input type="text" size="40" maxlength="250" name="13. Classified By:">
</input>
</td>
</tr>
<td width="100%" colspan="2" align="center">
<hr>
<b>
<h2>
Request Information
</h2>
</b>
<i>
* Indicates Required Field
</i>
<hr>
</td>
</tr>
<tr>
<td width="100%" colspan="2" align="center">
<b>
MISSION INFORMATION
</b>
<hr>
<br />
</td>
</tr>
<tr>
<td width="30%">
<b>* Mission Support Catagory:</b>
</td>
<td width="70%">
<select id=Purpose name="17. Purpose:" size="1">
<option></option>
<option>Combat/Operation</option>
<option>Contingency</option>
<option>Exercise</option>
<option>Training</option>
<option>Experiment</option>
<option>Research</option>
</select>
<b>Mission Name:</b>
<input type="text" size="20" maxlength="250" name="18. Purpose name:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Priority</b>
</td>
<td width="70%">
<select id="Priority" name="19. Priority:" size="1">
<option></option>
<option>LOW</option>
<option>MED</option>
<option>HIGH</option>
<option>URGENT</option>
</select>
</td>
</tr>
<tr>
<td width="30%">
<b>* Due date:</b>
</td>
<td width="70%">
<input type="text" size="10" maxlength="10" id="Due" name="20. Date due:">
</input>
</td>
</tr>
<tr>
<td width="30%">
<b>* Location</b>
<br />
provide NE/SW corner latitude and longitude in decimal format of each mesh you will use for applicataion/forcasting.
<br />
Northern hemisphere latitude is + and Southern hemisphere latitude is -, Eastern longitude from GMT is + and Western longitude from GMT is -.
</td>
<td width="70%">
<table>
<tr>
<td width="50%" aligh="right">
NE Latitude: <input type="text" id=NELat size="10" maxlength="250" name="22. NE Lat:">
</input>
<br />
SW Latitude: <input type="text" id=SWLat size="10" maxlength="250" name="23. SW Lat:">
</input>
</td>
<td width="50%" align="right">
NE Longitude: &nbsp<input type="text" id=NELong size="10" maxlength="250" name="24. NE Long:">
</input>
<br />
SW Longitude: <input type="text" id=SWLong size="10" maxlength="250" name="25. SW Long:">
</input>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
<center>
<input type="submit" name="Submit" value="Submit">
</input>
<input type="reset" name="Reset" value="Reset">
</input>
</center>
</form>
</div>
<br class="cleaner" />
<div class="classification">
<h2>THIS PAGE UNCLASSIFIED</h2>
</div>
<div class="banner">
<iframe src="/FNMOC/banner.html" width="100%" height="30" frameBorder="0" scrolling="no">
</iframe>
</div>
</div>
</body>
</html>
The other select fields have the same code, just different names/values. No selection validates in IE8. Your help greatly appreciated.
edited to add all code as per request

The way you validate select box is not correct. You can get value of the selected option like select.value and it will work in Forefox and Chrome. However the proper way to do it so that IE could also understand it, is using the value of selected option:
var el = document.getElementbyId(idList[i]);
var s = TrimFormFieldValues(el.options[el.selectedIndex].value);
If you have different type of controls in your form, you can check if the current one is selectbox with this check:
if (idList[i].tagName == 'SELECT') {
// this is select, get the value using el.options[el.selectedIndex].value
}

I need to print the values entered in an HTML form on the same page on submit

hotmailI need the values entered into the form to print out on the screen when submit is pressed. How do I do the Javascript to do this. I don't know where to start so please help!
Also does it look formatted correctly, I feel i am missing some things and that using tables to format was probably the wrong way of doing it.
<script type="text/javascript">
info = document.getElementById("personalInfo");
info.innerHTML = "<strong>Peronal Info: </strong>" + "<br>" + "Name: " +
document.feedback.fname.value +
" " +
document.feedback.lname.value +
"<br>" + "Email: " +
document.feedback.email.value;
info = document.getElementById("experienceSubmit");
info.innerHTML = "<strong>Experience and Salary: </strong>" + "<br>" + "Years of experience: " +
document.feedback.experience.value +
"<br>" + "Date of availability: " +
document.feedback.date.value +
"<br>" + "Compensation Chosen: " +
document.feedback.comp.value +
"<br>" + "Region Selected: " +
document.feedback.region.value;
info = document.getElementById("otherSubmit");
info.innerHTML = "<strong>Other information: </strong>" + "<br>" + "# of References " +
document.feedback.reference.value +
"<br>" + "Additional Comments: " +
document.feedback.comments.value;
return false;
}
</script>
</head>
<body background="../Assignment 5/_images/abstract_color_background_picture_8016-wide.jpg" >
<form name="feedback" method="post" onSubmit="return checkform()">
<section id="pinfo" class="inputArea">
<fieldset>
<table>
<tr>
<td>Last Name: </td>
<td><input name="lname"
type="text"
autofocus
required
placeholder="lname"
size="25" />
</td>
</tr>
<tr>
<td>First Name: </td>
<td><input name="fname"
type="text"
size="25"
required
placeholder="fname" />
</td>
</tr>
<tr>
<td>Email: </td>
<td><input name="email"
type="email"
size="40"
required
placeholder="....#hotmail.com" />
</td>
</tr>
<td>Gender: </td>
<td><select name="gender">
<option selected disabled style='display:none;'>
Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
</table>
</fieldset>
</section>
<section id="experience">
<fieldset>
<table>
<tr>
<td>
<label for="experience">Years of Experience: </label>
<input name="experience" type="number" />
</td>
</tr>
<tr>
<td>
<label for="date">Date</label>
<input name="date" type="date" />
</td>
<tr>
<td>
<label for="comp">Compensation: </label><br>
<input name="comp" type="radio" id="Salary" value="Salary Selected">Salary
<input name="comp" type="radio" id="SalaryWB" value="Salary with bonus Selected">Salary with Bonus
<input name="comp" type="radio" id="Commission" value="Commission Selected">Commission
</td>
</tr>
<tr>
<td>
<label for="region">Region: </label><br>
<input name="region" type="checkbox" id="East" value="East Selected">East
<input name="region" type="checkbox" id="West" value="West Selected">West
<input name="region" type="checkbox" id="North" value="North Selected">North
<input name="region" type="checkbox" id="South" value="South Selected">South
</td>
</tr>
</table>
</fieldset>
</section>
<section id="other">
<fieldset>
<table>
<tr>
<td>
<label for="reference">References<br>0 &nbsp 1 &nbsp 2 &nbsp&nbsp 3 &nbsp&nbsp 4 &nbsp&nbsp 5<br></label>
<input name="reference" id="reference"
type="range"
value="0"
min="0"
max="5"
step="1" />
</td>
</tr>
<tr>
<td>
<label for="comments">Additional Comments: <br></label>
<textarea
name="comments"
rows="5"
cols="20"
placeholder="Please include any other pertinent information here"></textarea> </td>
</tr>
</table>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</section>
</form>
<section id="personalInfo"></section>
<section id="experienceSubmit"></section>
<section id="otherSubmit"></section>
</body>

Yes in onsubmit checkform() function do the codding of printing values...
like...
<script>
function checkform()
{
document.getElementById("outL").innerHTML=feedback.lname.value;
//like this you can do for all field
}
</script>

i have created sample for you. please check below code
$("#feedback").submit(function(e){
alert("hi");
event.preventDefault();
});
Link

Categories

Resources