My javascript code isn't working because nothing's showing up when I click the button. Anybody know the solution? I already tried taking out the code and formatting the button to alert(...) and it worked, so now I'm stuck on whats going on with the math equations. I'm positive I didn't miss a bracket or punctuation though. Thanks for the feedback and help.
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<style type="text"/css>
.inbox
{
width=30px;
text-align: right;
border: 2px solid black;
}
.align
{
text-align: right
}
</style>
<script type="text/javascript">
function compute() {
var a = form1.inputA.value;
a = parseFloat(a);
var b = form1.inputB.value;
b = parseFloat(b);
var c = form1.inputC.value;
c = parseFloat(c);
var e = a * 5.49;
form1.sumA.value = e.toFixed(2);
}
function pageInit()
{
form1.inputA.focus();
}
</script>
</head>
<body onload="pageInit();">
<form id="form1">
<table border="2" >
<tr>
<th colspan="4">Sample Order Form</th>
</tr>
<tr>
<th>Quantity</th>
<th>item</th>
<th>Unit Price</th>
<th>Totals</th>
</tr>
<tr>
<th>
<input tabindex="1" class="inbox" type="text" id="inputA" />
</th>
<th>Apples</th>
<td>$5.49</td>
<th>
<input class="inbox" type="text" id="sumA" readonly="readonly" />
</th>
</tr>
<tr>
<th>
<input tabindex="4" type="button" value="Compute" onclick="compute();" />
</th>
</tr>
</table>
</form>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<style>
.inbox {
width =30px;
text-align: right;
border: 2px solid black;
}
.align {
text-align: right;
}
</style>
<script type="text/javascript">
function compute() {
var a = document.getElementById("inputA").value;
var e = a * 5.49;
document.getElementById("sumA").value = e.toFixed(2);
}
function pageInit() {
document.getElementById("inputA").focus();
}
</script>
</head>
<body onload="pageInit();">
<form id="form1">
<table border="2">
<tr>
<th colspan="4">Sample Order Form</th>
</tr>
<tr>
<th>Quantity</th>
<th>item</th>
<th>Unit Price</th>
<th>Totals</th>
</tr>
<tr>
<th>
<input tabindex="1" class="inbox" type="text" id="inputA" />
</th>
<th>Apples</th>
<td>$5.49</td>
<th>
<input class="inbox" type="text" id="sumA" readonly="readonly" />
</th>
</tr>
<tr>
<th>
<input tabindex="4" type="button" value="Compute" onclick="compute();" />
</th>
</tr>
</table>
</form>
</body>
</html>
Related
I want to use the following JavaScript function with the given HTML code to the ID names NTag, VTag, TTag, TATag, and VATag. I have bound the function with NTag. Please tell me how can I use this code to generate HEX for all the values presented in the respective inputs.
The function is creating HEX code for Decimals. It is working well with the one to which I have bonded it.
JS Function:
function fun1() {
number = document.getElementById("NTag").value;
h = parseInt(number, 10).toString(16);
if (h.length<=1){
h = "0"+h;
}else{
h = h;
}
document.getElementById("NTagHex").textContent = h;
}
HTML Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>QR Code Generator</title>
<link rel="stylesheet" href="Styles.css"
</head>
<body onload="fun1()">
<table>
<tr>
<th>Tag</th>
<th>Length</th>
<th>Value</th>
<th>Data</th>
</tr>
<tr>
<th><input type="number" id="NTag" name="NTag" value="1"></th>
<th><input type="number" onchange="fun2()" id="NLength" name="NLength"></th>
<th><input type="text" onchange="fun3(); concatenate();" id="NValue" name="NValue"></th>
<th><p>Company Name</p></th>
</tr>
<tr>
<th><p id="NTagHex"></p></th>
<th><p id="NLengthHex"></p></th>
<th><p id="NValueHex"></p></th>
<th><p id="Hex1"></p></th>
</tr>
<tr>
<th><input type="number" id="VTag" name="VTag" value="2"></th>
<th><input type="number" id="VLength" name="VLength"></th>
<th><input type="text" id="VValue" name="VValue"></th>
<th><p>Company VAT</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="TTag" name="TTag" value="3"></th>
<th><input type="number" id="TLength" name="TLength"></th>
<th><input type="text" id="TValue" name="TValue"></th>
<th><p>Date & Time of Invoice Creation</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="TATag" name="TATag" value="4"></th>
<th><input type="number" id="TALength" name="TALength"></th>
<th><input type="text" id="TAValue" name="TAValue"></th>
<th><p>Total Amount with VAT</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="VATag" name="VATag" value="5"></th>
<th><input type="number" id="VALength" name="VALength"></th>
<th><input type="text" id="VAValue" name="VAValue"></th>
<th><p>VAT Amount</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
</table>
<script src="Script.js"></script>
</body>
</html>
it's better to use a single function for all of them. so instead of fun1() fun2() ... lets use a fun() with this code:
function fun(id) {
number = document.getElementById(id).value;
h = parseInt(number, 10).toString(16);
if (h.length <= 1) {
h = "0" + h;
} else {
h = h;
}
document.getElementById(id + 'some constant. here is: HEX').textContent = h;
}
so you can use fun() in ur html like below:
<input type="number" onchange="fun('NTag');" id="NTag" name="NTag " value="5 "></th>
...
<p id="NTagHex"></p>
How can I add a button next to the search field?
This is a list jQuery filter. I have copied this from w3school. The Search is working automatically in this code but I want the search to be done by a button.
It will be very helpful for me if anyone can help me with this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>
use event click with button:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("click", function() {
var value = $('#myInput').val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input id="myInput" type="text" placeholder="Search..">
<button id="button">Search</button>
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>
I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.
Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>
Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO
Hi i have created a javascript code that works very well.But when i have copy that code on wordpress pages then that code stops working.I don't know why it stops working.
I am new to wordpress but i have good experience in javacript.Please tell me why code is not working on wordpress pages?
Here is code:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How Much $$$ Are You Losing</title>
</head>
<script type="text/javascript">// <![CDATA[
function doCalc() {}
function doCalc1() {}
function doCalc2() {}
function quanBlur(quan) {
var result = quan / document.form1.newOrdQuan.value * 100;
document.form1.pctmissed.value = result.toFixed(0) + '%';
doCalc();
}
function pctBlur(pct) {
var pct1 = +pct.replace(/\D/g, '');
//document.form1.pctmissed.value=pct1.toFixed(0)+'%';
var result = document.form1.newOrdQuan.value * pct1 / 100;
document.form1.quanmissed.value = result.toFixed(0);
doCalc();
}
window.onload = function () {
document.getElementById("prevOrdQuan").focus();
}
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('newOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
function showstep5() {
// alert('test');
document.getElementById('step5').style.visibility = 'visible';
document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep6() {
// alert('test');
document.getElementById('Step6').style.visibility = 'visible';
//document.getElementsById('avgProfitPerOrder').focus(); // 'avgProfitPerOrder').focus();
}
function showstep9() {
document.getElementById('step9').style.visibility = 'visible';
document.getElementById('avgProfitPerOrder').focus();
}
// ]]></script>
<table style="width: 270px; border: 2px navy solid;">
<tbody>
<tr>
<td><form name="form1">
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur="doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td>
<input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
<table id="step4" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Many Times a Week do You Comp an Order? (5% expected)</td>
<td><input tabindex="4" type="text" name="compsPerWeek" id="compsPerWeek" size="6" value="1" onblur="doCalc(); showstep9();" /></td>
</tr>
</tbody>
</table>
<table id="step9" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td>What's Your Average Profit Per Order? (30% Expected)</td>
<td>
<input tabindex="4" type="text" name="avgProfitPerOrder" id="avgProfitPerOrder" size="6" value="6.00" onblur="doCalc();showstep6();" /></td>
</tr>
</tbody>
</table>
<td><input type="text" tabindex="5" name="avgProfitPerOrder" id="avgProfitPerOrder"
<table id="Step6" style="width: 100%; visibility: hidden; color: green;" align="left">
<tbody>
<tr>
<td class="style1" height="7"></td>
<td class="style1" height="7"></td>
</tr>
<tr>
<td style="color: red;">This is how much money ($$) you are losing each month from TakeOut Orders you Didn't Get...</td>
<td id="monLostRev" style="color: red; font-weight: 900;" align="right">640</td>
</tr>
<tr>
<td style="font-weight: bold;">This is how much PROFIT ($$) you can gain each month with our system</td>
<td id="monrecoveredrev" style="font-weight: 900; text-decoration: underline;" align="right">192.00</td>
</tr>
<tr>
<td>Monthly cost of our system</td>
<td id="montextcost" align="right">-47</td>
</tr>
<tr>
<td>Monthly cost of Credit Card Fees</td>
<td id="monCcCost" align="right">19.20</td>
</tr>
<tr>
<td>Monthly Income Increase ($$) you get using our system</td>
<td id="monroi" style="font-weight: 900; text-decoration: underline;" align="right">125</td>
</tr>
</tbody>
</table>
</form></td>
</tr>
</tbody>
</table>
This code only create problem on wordpress pages.
You can't add the Javascript directly to the WordPress editor page, if that's what you mean by copying the code on the WordPress pages. You have to add it to the single.php page file, which you can access through Appearance-->Editor
In this code, if I click the order details, that form should display, and if I click the shipping details address that form should display and the order form should hide.
However here both the forms are displaying in my code.
<!DOCTYPE html>
<html>
<head>
<script>
function orderdetails() {
document.getElementById('orderdetails').style.display = "block";
}
function shippingdetails() {
document.getElementById('shippingdetails').style.display = "block";
}
function ordersummary() {
document.getElementById('welcomeDiv1').style.display = "block";
}
function payment() {
document.getElementById('welcomeDiv1').style.display = "block";
}
</script>
</head>
<body>
<a href="javascript:void(0);" value="Show Div" onclick="orderdetails()" >Order Details</a>
Shipping Details
Order Summary
Payment
<div id="orderdetails" style="display:none;" class="answer_list" >
<table width="200" border="0">
<h3><u><b>Order Details</b></u></h3>
<tr>
<th scope="row"><label>Name*</label></th>
<td><input name="name" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Email*</label>;</th>
<td><input name="mail" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Mobile Number*</label></th>
<td><input name="mobile" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Land Line</label></th>
<td><input name="phone" type="text"></td>
</tr>
</table>
</div>
<div id="shippingdetails" style="display:none;" class="answer_list" >
<br/>
<table width="200" border="0">
<h3><u><b>Shipping Details</b></u></h3>
<br/>
<tr>
<th scope="row"><label>Full Name*</label></th>
<td><input name="name" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Address*</label></th>
<td><textarea name="address" cols="" rows=""></textarea></td>
</tr>
<tr>
<th scope="row"><label>Nearest Land Mark*</label>;</th>
<td><input name="mail" type="text"></td>
</tr>
<tr>
<th scope="row"><label>City</label></th>
<td><input name="city" type="text"></td>
</tr>
<tr>
<th scope="row"><label>State</label></th>
<td><form name="form" id="form">
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option>Tamil Nadu</option>
<option>Kerala</option>
<option>Orissa</option>
<option>Delhi</option>
<option>Andhrs</option>
<option>Karntaka</option>
</select>
</form></td>
</tr>
<tr>
<th scope="row"><label>Pin Code*</label></th>
<td><input name="code" type="text"></td>
</tr><tr>
<th scope="row"><label>Mobile Number*</label></th>
<td><input name="city" type="text"></td>
</tr><tr>
<th scope="row"><label>Land Line</label></th>
<td><input name="city" type="text"></td>
</tr>
</table>
</div>
</body>
</html>
Don't just display the form, hide the others as well.
function orderdetails() {
document.getElementById('orderdetails').style.display = "block";
document.getElementById('shippingdetails').style.display = "none";
}
function shippingdetails() {
document.getElementById('shippingdetails').style.display = "block";
document.getElementById('orderdetails').style.display = "none";
}
To prevent users from going back to the previous form, you can check if they have completed that particular form.
In your form, give the required items a class name:
<input name="name" type="text" class="order-required">
<input name="mail" type="text" class="order-required">
<input name="mobile" type="text" class="order-required">
And give the "Order Details" link an ID:
<a id="orderdetailslink" href="javascript:void(0);" value="Show Div" onclick="orderdetails()" >Order Details</a>
Then put down the following before </body> to look for all the required fields in "Ordering Details":
<script>
var elems = document.getElementsByTagName('*'), i, orderRequired = new Array();
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + 'order-required' + ' ') > -1) {
orderRequired.push(elems[i]);
}
}
</script>
Finally use the following functions to check if the user should be allowed to go back to the ordering details form.
function orderdetailscomplete() {
for (var i = 0; i < orderRequired.length; i++) {
if (orderRequired[i].value.length == 0) {
return false;
}
}
return true;
}
function orderdetails() {
if (!orderdetailscomplete()) {
document.getElementById('orderdetails').style.display = "block";
document.getElementById('shippingdetails').style.display = "none";
}
}
function shippingdetails() {
document.getElementById('shippingdetails').style.display = "block";
document.getElementById('orderdetails').style.display = "none";
if (orderdetailscomplete()) {
document.getElementById('orderdetailslink').innerHTML = 'Order Details (completed)';
}
}
See fiddle.
Apart from the script, your html is seriously malformed. You really need to read up on html. http://validator.w3.org/check cannot even continue checking until you move that header out of the table code
Here is my version.
Checked and fixed the HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Order form</title>
<script>
var divs = [];
function show(div) {
for (var i=0;i<divs.length;i++) {
document.getElementById(divs[i]).style.display=(div===divs[i])?"block":"none";
}
}
function MM_jumpMenu() {} // placeholder
window.onload=function() {
document.getElementById("jumpMenu").onchange=function() {
MM_jumpMenu('parent',this,0);
}
var links=document.getElementById("navigation").getElementsByTagName("a");
for (var i=0;i<links.length;i++) {
divs.push(links[i].id.replace("link",""));
links[i].onclick=function() {
show(this.id.replace("link",""));
}
}
}
</script>
<style>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #ccc;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color:#000;
}
.shipping { width:200px; border:0}
</style>
</head>
<body>
<nav>
<ul id="navigation">
<li>Order Details</li>
<li>Shipping Details</li>
<!--li>Order Summary</li>
<li>Payment</li -->
</ul>
</nav>
<div id="orderdetails" style="display:none;" class="answer_list" >
<br/>
<h3><u><b>Order Details</b></u></h3>
<table class="shipping">
<tr>
<th scope="row"><label>Name*</label></th>
<td><input name="name" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Email*</label>
</th>
<td><input name="mail" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Mobile Number*</label></th>
<td><input name="mobile" type="text"></td></tr>
<tr>
<th scope="row"><label>Land Line</label></th>
<td><input name="phone" type="text"></td></tr>
</table>
</div>
<div id="shippingdetails" style="display:none;" class="answer_list" >
<br/>
<h3><u><b>Shipping Details</b></u></h3>
<table class="shipping">
<tr>
<th scope="row"><label>Full Name*</label></th>
<td><input name="name" type="text"></td></tr>
<tr>
<th scope="row"><label>Address*</label></th>
<td><textarea name="address"></textarea></td>
</tr>
<tr>
<th scope="row"><label>Nearest Land Mark*</label></th>
<td><input name="mail" type="text"></td>
</tr>
<tr>
<th scope="row"><label>City</label></th>
<td><input name="city" type="text"></td>
</tr>
<tr>
<th scope="row"><label>State</label></th>
<td>
<form name="form" id="form">
<select name="jumpMenu" id="jumpMenu">
<option>Tamil Nadu</option>
<option>Kerala</option>
<option>Orissa</option>
<option>Delhi</option>
<option>Andhrs</option>
<option>Karntaka</option>
</select>
</form></td>
</tr>
<tr>
<th scope="row"><label>Pin Code*</label></th>
<td><input name="code" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Mobile Number*</label></th>
<td><input name="city" type="text"></td>
</tr>
<tr>
<th scope="row"><label>Land Line</label></th>
<td><input name="city" type="text"></td>
</tr>
</table>
</div>
</body>
</html>
You need to write a code which will hide opened forms. You may do it like this:
function closeAll() {
document.getElementById('orderdetails').style.display = "none";
document.getElementById('shippingdetails').style.display = "none";
document.getElementById('welcomeDiv1').style.display = "none";
}
function orderdetails() {
closeAll();
document.getElementById('orderdetails').style.display = "block";
}
function shippingdetails() {
closeAll();
document.getElementById('shippingdetails').style.display = "block";
}
function ordersummary() {
closeAll();
document.getElementById('welcomeDiv1').style.display = "block";
}
function payment() {
closeAll()
document.getElementById('welcomeDiv1').style.display = "block";
}
See closeAll function which hides all divs. Just in order to not look for opened div. I'm closing welcomeDiv1 also. Not sure if you need that.
Well, if you want to show one form at a time, you should hide them initially and show only the first one to appear.
Then in every function you should hide the others. FAngel has the better solution so far.
Two tips:
Remove all those blank spaces ( ) and try and use some css.
And for javascript I recomend you use some js frameworks such as jQuery.
Good Luck!