I know there is a lot of topics about this and i checked a lot of them without success.
I have one input field in my form that creates a problem when it includes whitespaces. I already made it required so it's not possible to leave it empty or only add some whitespaces.
What i noticed is that i can add a text and just add a whitespace in the end or in the beginning and my work will fail.
Actually it should not be allowed to have any whitespaces at all, also not in the middle of the text but thats is to 99% not going to happend. What i understand you can only take away whitespaces in the beginning and in the end with trim function?
Could some helpful person help me what i have to add to my code that it works...?
Goal is that when i press submit the values from my five input fields should have no whitespaces at the beginning or in the end.
Here is my whole code.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mathys Lieferungen</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js"></script>
<script type="text/javascript" src="jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
function changeHiddenInput (objDropDown)
{
document.getElementById("hiddenInput").value = objDropDown.value;
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.timepicker').timepicker();
$('.datepicker').datepicker({dateFormat: 'dd.mm.yy'});
$('.button').button();
$('#myForm').submit(function() {
$('#formBox').hide();
var lnr = $("input[name=lnr]");
var auto_refresh = setInterval(
function()
{
$('#csv').load(lnr.val()+'_JobStatus.csv?'+new Date().getTime(),function(data){$(this).html(data).fadeIn("slow");}); });
$('#working').show();
$("#progressbar").progressbar();
var value = 0;
var timer = setInterval (function ()
{
$("div#progressbar").progressbar ("value", value);
value++;
if (value > 100) value = 0;
}, 60);
$url = "/BT_Mathys_LNr_export_0.1/services/BT_Mathys_LNr_export?method=runJob";
$i = 1
$('#myForm :input').each(function() {
$inputName = $(this).attr('name');
if ($inputName != 'submit') {
$url = $url + "&arg"+$i+"=--context_param%20"+$inputName+"="+$(this).val();
$i++
};
});
$('#runArea').load($url, function(){
$('#csv').hide();
$('#working').hide();
$('#resultBox').show();
$html = $('#runArea').html();
$('#csv').text($html);
});
return false;
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="style2.css">
<style type="text/css">
body {
background-color:#FFD8B2;
font-family: 'Century Schoolbook', Calibri,Arial;
font-size: 1em;
}
#logo {
position:absolute;
top:10px;
right:10px;
}
h1 {
margin-bottom:20px;
font-size: 1.5em;
font-weight:bold;
text-align:center;
}
#formBox, #resultBox, #working{
width:50%;
margin:auto;
margin-top:20%;
}
#resultBox, #working {
display:none;
}
#runArea{
border:none;
height:0;
width:0;
}
.button { font-family:Garamond; font-size: 15px; }
.ui-timepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
.ui-timepicker-hour-cell, .ui-timepicker-minute-cell { cursor:pointer; }
</style>
</head>
<body>
<div id="logo">
<img src="\\rzwsrv006\daten\Opacc_Betrieb\Marcel Mathys\Mathys\FLYER_LOGO.png" alt="Flyer" width="260" height="48">
</div>
<div id="formBox">
<h1>Lieferungen Mathys</h1>
<form method="get" id="myForm">
<table width="290px" height="auto" style="margin:auto;">
<tr>
<td><label for="lnr">Liefernummer:</label></td>
<td class="arg"><input type="text" name="lnr" class="required"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<!--<tr>
<td><label for="vAbladezeit_spaet">Abladezeit spät:</label></td>
<td><input type="text" name="vAbladezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vAbladezeit_frueh">Abladezeit früh:</label></td>
<td><input type="text" name="vAbladezeit_frueh" class="timepicker"></td>
</tr>-->
<tr>
<td><label for="vAbladetermin">Abladetermin:</label></td>
<td><input type="text" name="vAbladetermin" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td><label for="vLadezeit_spaet">Ladezeit spät:</label></td>
<td><input type="text" name="vLadezeit_spaet" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadezeit_frueh">Ladezeit früh:</label></td>
<td><input type="text" name="vLadezeit_frueh" class="timepicker"></td>
</tr>
<tr>
<td><label for="vLadedatum">Ladedatum:</label></td>
<td><input type="text" name="vLadedatum" class="datepicker"></td>
</tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>Mitarbeiter:</td>
<td><select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)">
<option value="e.schaer#flyer.ch" name="email">Ester Schär</option>
<option value="i.gerber#flyer.ch" name="email">Irene Gerber</option>
<option value="m.maeder#flyer.ch" name="email">Marion Mäder</option>
<option value="apelsinrepubliken#hotmail.com" name="email">Jens Frejd</option>
<option value="marcel.lack#symbium.ch" name="email">Marcel Lack</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="hidden" name="hiddenInput" id="hiddenInput" /></td>
</tr>
<tr>
<td><p style="text-align:center;"><input type="submit" name="submit" id="submit" value=" Ausführen " class="button"></p></td>
<td></td>
</tr>
</table>
</form>
</div>
<div id="working" onkeydown ="my_onkeydown_handler();">Verarbeitung läuft, bitte warten und job nicht abbrechen. Job läuft im Hintergrund<div id="progressbar">
</div>
</div>
<div id="resultBox">
<h1 id="csv"></h1>
<p style="text-align:center;"><input type="button" onClick="location.href='./'" value=" << Neue Lieferung ausführen " class="button"></p>
<!--<p style="text-align:left;">Rückmeldung:<br>
<textarea id="csv" style="width:100%;height:300px;"></textarea>
</p>-->
</div>
<iframe id="runArea" />
</body>
How about just using a regex to replace the white-space:
str.replace(/\s/g, "");
Related
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction();">Login</button>
<script type="text/javascript">
function myFunction() {
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
This function is supposed to get a value from the textbox with id email2 and if it is equal to a certain value then it redirects to another page.
When you click Login button it should redirect to another page but you need to use event.preventDefault() in your myFunction.
Try out the Code Below--
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, world!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form id="form2" method="get" action="#">
<table
style="
width: 800px;
border: 0;
padding: 16px;
padding-left: 120px;
vertical-align: central;
"
>
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24" /></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button id="button2" onclick="myFunction(event)">Login</button>
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
alert(email2);
if (email2.toString() == "illyam#gmail.com") {
location.replace("admin.html");
} else {
alert("Incorrect password or email");
}
}
</script>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
Do not have an account?<a
href="sign_up.html"
style="background-color: #e6e6e6; color: #ce171c"
>Sign Up</a
>
</td>
</tr>
</table>
</form>
</body>
</html>
can pass values to JavaScript functions like this:
<!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>
<script type="text/javascript">
function myFunction(email) {
if (email == 'illyam#gmail.com'){
location.replace("https://admin.html")
alert('redirecting to admin page')
}else{
alert("Incorrect password or email");
}
}
</script>
</head>
<body>
<form id="form2" method="get" action="#">
<table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
<tr>
<td>TP Email</td>
<td>:</td>
<td><input type="email" id="email2" size="40" maxlength="24"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" id="password2" size="40"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button id="button2" onclick="myFunction(document.getElementById('email2').value);">Login</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Do not have an account?<a href="sign_up.html"
style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
</tr>
</table>
</form>
</body>
</html>
I think what you want is to set the values inside the textbox and then get them as variables using JS.
You can have your HTML looking like this...
<td><button id="button2" onclick="myFunction(event);">Login</button></td>
And then have your JS script tag placed below your closing form tag like this...
<script type="text/javascript">
function myFunction(event) {
event.preventDefault();
var email2 = document.getElementById("email2").value;
if(email2.toString() == 'illyam#gmail.com'){
location.replace("admin.html");
}else{
alert("Incorrect password or email");
}
}
</script>
Your HTML onclick function now passes 'event' as an argument, this event object will be used in your script to cancel the normal form submission operation while you get your email values and evaluate them.
This is achieved with the help of event.preventdefault() function which stops the default qoperation of a form which is to submit information.
Side Note: I'd recommend that you use PHP and database for login purposes, having your login credentials in your script like this is dangerous as someone can easily go through your code and see them.
Good luck on your project.
As this screenshot shows, the Title header is misaligned with the table data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
<style>
table {
border-spacing:0;
border-collapse:collapse;
}
td, th {
padding: 5px;
}
.nbr-pages {
width: 48px;
text-align: right;
padding-right: 2px;
}
.delete {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Manage Uploads</h1>
<form id="form-manage-uploads">
<table id="table-writer-uploads">
<tbody>
<tr>
<th>Delete</th><th>TItle</th><th>Type</th><th>Genre</th><th>Length</th><th>PDF</th><th>Save</th>
</tr>
<tr class="tr-clone" >
<td><img class="delete" src="img/icons/delete.png" alt="delete" /> </td>
<td><input class="id" name="id" type="hidden" /></td>
<td><input class="title" name="title" placeholder="Title" autofocus="true" /></td>
<td>
<select class="form-type" name="form-type">
</select>
</td>
<td>
<select class="genre" name="genre">
</select>
</td>
<td><input class="nbr-pages" name="nbr-pages" required placeholder="Pages" /></td>
<td>Synopsis</td>
<td><input type="button" class="save btn btn-custom-primary" value="Save" /></td>
<td><input type="hidden" class="id" name="id" /></td>
</tr>
</tbody>
</table>
<input class="current-id" type="hidden" />
</form>
<script src="js/common.js"></script>
<script src="js/manage-uploads.js"></script>
</body>
</html>
The table is built using JavaScript:
function getWritersData() {
var data = {};
data.action = 'get-writer-data';
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/manage-uploads.php', data, getSuccess, "Error retrieving writer's data: ");
function getSuccess(data) {
var trClone = $(".tr-clone");
var jsonData = $.parseJSON(data);
var count = 0;
for (var key in jsonData) count++;
if (key != undefined) {
count--;
$.each(jsonData, function (index, value) {
trClone = trClone.clone().insertAfter($(".tr-clone:last"));
trClone.find(".id").val(value.ID);
trClone.find(".title").val(value.Title);
trClone.find(".form-type").val(value.FormType);
trClone.find(".genre").val(value.Genre);
trClone.find(".nbr-pages").val(value.NumberOfPages);
var filepath = "uploads/" + value.Filename;
var synopsis = trClone.find(".synopsis");
var sv = synopsis.val(filepath);
synopsis.attr("href", filepath);
});
} else {
$("h1").append("<br/><br/><div class='but-custom-warning'>No records were found.</div>"); //.css("disp
$("table").css("display", "none");
}
$(".tr-clone:first").css("display", "none");
}
}
You have an extra table column for the hidden input:
There's no need for this to be in its own table cell, so combine it with one of the other cells.
<td><input class="id" name="id" type="hidden" /><input class="title" name="title" placeholder="Title" autofocus="true" /></td>
You got an extra column with nothing visible in it:
<td><input class="id" name="id" type="hidden" /></td>
I'd recommend you put the hidden field in another column or use this:
<th colspan="2">Delete</th>
I have the demo setup at https://jsfiddle.net/pinchetpooche/xgugjojq/5/
I want if the Yes is checked on page load that it shows the result of what is checked. This works only if I go back and check yes even if it were already checked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($('.trigger').is(':checked')) {
$('.content').hide();
$('.' + $(this).data('rel')).show();
}
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
</script>
<style>
.gads {
border:none;
background-color:transparent;
outline:none;
}
.content {
display: none;
}
.none {
border:none;
background-color:transparent;
outline:none;
}
.ee {
border:none;
background-color:transparent;
outline:none;
}
.et {
border:none;
background-color:transparent;
outline:none;
}
.gads-yes {
border:none;
background-color:transparent;
outline:none;
}
.gads-no {
border:none;
background-color:transparent;
outline:none;
}
.gads-na {
border:none;
background-color:transparent;
outline:none;
}
.ee-yes {
border:none;
background-color:transparent;
outline:none;
}
.ee-no {
border:none;
background-color:transparent;
outline:none;
}
</style>
</head>
<BODY>
<div id="content">
<form id="form1" name="form1" method="post" action="add_incident.asp">
<table border="0" class="formset" >
<tr>
<td> </td>
</tr>
<tr>
<td><label class="style8">Event?</label></td>
<td>
<input type="radio" name="age1" value="Yes" class="gads-yes trigger" data-rel="gads-yes" /><span class="style8"> Yes</span>
<input type="radio" name="age1" value="No" class="gads-no trigger" data-rel="gads-no" /><span class="style8"> No</span>
<input type="radio" name="age1" value="NA" class="gads-na trigger" data-rel="gads-na" /><span class="style8"> NA</span>
</td>
</tr>
</table>
<div>
<div class="gads-yes content">
<table border="0" class="formset">
<tr>
<td class="style9">MENU</td>
</tr>
<tr>
<td><label for="description" class="style8">Description</label></td>
<td colspan="2" class="textarea"><textarea class="textbox2" id="description" name="description" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="3" align="right"><input type="submit" name="submit3" value="Submit" class="form_button_clear" /></td>
</tr>
</table>
</div>
<div class="gads-no content">
<table border="0" class="formset" >
<tr>
<td colspan="4" class="style9">MENU 2</td>
</tr>
<tr>
<td><label for="description1" class="style8">Description Two</label></td>
<td colspan="3"><textarea id="description1" name="description1" rows="3" class="textbox2"></textarea></td>
</tr>
<tr>
<td colspan="4" align="right"><input type="submit" name="submit2" value="Submit" class="form_button_clear" /></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Change your JS for the below:
<script>
$(document).ready(function(){
$('.trigger').on('click', function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
}).filter(':checked').trigger('click');
});
</script>
First bind the click event and then trigger it on page load on the filtered :checked element.
Change selector in if using :eq(0)
$(document).ready(function(){
if ($('.trigger:eq(0)').is(':checked')) {
$('.content').hide();
$('.' + $('.trigger:eq(0)').data('rel')).show();
}
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
Example
or you can use gads-yes selector
$('.' + $('.gads-yes').data('rel')).show();
You could just use the callback of hide():
$(document).ready(function(){
//Wait until the content's hidden before showing the selected item
$(".content").hide(function(){
$("." + $(".trigger:checked").data("rel")).show();
});
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
Please help to solve this problem, i want to validate if "FROM (DATE)" is Greater Than "TO (DATE)" without disabling the Date else i will prompt the user. All answer are appreciated. I already search the possible solution to Google but i cant find.
Below is the screenshot and my code .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$( ".datepicker" ).datepicker();
})
</script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>SPORTS</th>
<th>FROM</th>
<th>TO</th>
</tr>
<tr>
<td>BASKET BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>VOLLEY BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>TENNIS</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
<tr>
<td>BASE BALL</td>
<td><input type="text" class="datepicker"></td>
<td><input type="text" class="datepicker"></td>
</tr>
</table>
</body>
</html>
Many Thanks,
I have write the simplified code to your need. By set minDate greater than the From date to the To date, you don't need to validate the dates.
Here is the code:
$(".datepicker").datepicker({
onSelect: function (selected, inst) {
var minDate = new Date(Date.parse(selected));
minDate.setDate(minDate.getDate() + 1);
$(this).parent().next().find('input').datepicker("option", "minDate", minDate);
}
});
FIDDLE DEMO
I guess I have solved your problem. I have done it only for Basketball, you can do for the rest I hope.
CHEERS !!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
$( ".basketball_datepicker_start" ).datepicker();
$( ".basketball_datepicker_end" ).datepicker(
{
onSelect: function(selected) {
var fromDate = $('.basketball_datepicker_start').datepicker().val();
var toDate = $(this).datepicker().val();
if(fromDate > toDate) {
alert('Buddy, FromDate has to be greater than ToDate !!!');
}
}
}
);
})
</script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>SPORTS</th>
<th>FROM</th>
<th>TO</th>
</tr>
<tr>
<td>BASKET BALL</td>
<td><input type="text" class="basketball_datepicker_start"></td>
<td><input type="text" class="basketball_datepicker_end"></td>
</tr>
</table>
</body>
</html>
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!