Conflict in including of a file

Conflict in including of a file - javascript

I'm trying to include a file which generates 2 random numbers that needs to be add or what we call captcha. I have two logins: one that requires employee id, birthdate, and the captcha answer(Which I call the easy login). While the other one requires your first name, last name, birthdate, and captcha(I call it the standard login). So I have two radio buttons for the user to choose whether an easy login or standard login. So I'm encountering this problem when you choose a login then you need to answer the captcha (The captcha sends sessions for its answer) so whats happening right know is that the captcha in the easy login is always being override by the captcha in the standard login. What I thought that I would do is set a condition where if the radio button is selected (easy login) then thats the time it will be included. But I don't know how to do that.
Here is the captcha code:
captcha.php
<?php
session_start();
$n1=rand(1,6); //Generate First number between 1 and 6
$n2=rand(5,9); //Generate Second number between 5 and 9
$answer=$n1+$n2;
$math = "What is ".$n1." + ".$n2." ? ";
$_SESSION['vercode'] = $answer;
print $math;
?>
Then here is the code for my interface:
index.php
<SCRIPT TYPE="text/javascript">
function toggleTables(which)
{
if(which == "0") {
document.getElementById('standard').style.display = "table";
document.getElementById('customize').style.display = "none";
}
if(which == "1") {
document.getElementById('customize').style.display = "table";
document.getElementById('standard').style.display = "none";
}
}
</SCRIPT>
</head>
<body style="background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;" >
<?php include('../include/logoheader.php'); ?>
<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>
<div class="row">
<div class="two columns">
</div>
<div class="eight columns">
<div class="content">
<?php include('../include/retain-empid.php'); ?>
<br>
<input name="radio" type="radio" id="customize_1" onClick="toggleTables('0')" value="radio" /><font color="white">Standard Login</font>
<input name="radio" type="radio" id="customize_0" onClick="toggleTables('1')" value="radio" checked="checked"/><font color="white">Easy Login</font>
<form name="loginform" action="login_exec.php" method="post" >
<center><?php include('../function/login_errmsg.php'); ?></center>
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="customize">
<tr>
<th colspan="4">
Easy Log-in For Registered Convergys Employees
</th>
</tr>
<tr>
<td align="right">
<label>Employee Number</label>
</td>
<td>
<input type="text" placeholder="Employee Number" name="txt_EmpID" autoComplete="off" value=<?php echo $value; ?> >
</td>
<td align="right">
<label>Birthday</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate" name="txt_BDate" autoComplete="off" maxlength = "10"
style ="width:170px;"/>
</td>
</tr>
<tr>
<td align="right">
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 170px; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
<form action="otherlogin_exec.php" method="post">
<table width="100%" class="imagetable" cellpadding="0" cellspacing="0" id="standard" style="display: none">
<tr>
<th colspan="4">
Standard Log-in For All Registered Users
</th>
</tr>
<tr>
<td align = "right">
<label>First name:</label>
</td>
<td>
<input type="text" placeholder="First Name" name="txtFirstName" autoComplete="off" >
</td>
<td>
<label>Last name:</label>
</td>
<td>
<input type="text" placeholder="Last Name" name="txtLastName" autoComplete="off" >
</td>
</tr>
<tr>
<td>
<label>Birthday:</label>
</td>
<td>
<input type="date" class="" placeholder="Birthday" id="txt_BDate"
name="txtPassword" autoComplete="off" maxlength = "10" style = "width:170px;"/>
</td>
<td>
<label class="labels" align="center">
<strong>
</strong>
</label>
</td>
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
<td>
<input name="captcha" type="text" placeholder="Answer to math question">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<input type="submit" id="submit" name="btn_refer" class="btn" value="Submit"
style=" width: 100%; height: 30px; font-size: 11pt; ">
</td>
</tr>
</table>
</form>
</div>
</div>

Make the first line of your file
<?php include_once ('../include/mathcaptcha.php'); ?>
then change the lines from
<td>
<?php
include ('../include/mathcaptcha.php');
?>
</td>
to
<td><?php echo $math;?></td>
and take the print out of the captcha file. PHP doesnt affect the design of pages only the outputted data does which should be altered as needed.

Related

how to make editable text in edit case using jquery

I have a table like every table have their edit button :
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name"><?php echo $aircrews->fname.' '.$aircrews->lname; ?></p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status1; ?></p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name"><?php echo $aircrews->pay_status2; ?></p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>
My problem is that when I click on particular edit then its corresponding p tag should be hidden and input type=text should be visible but in my case, by clicking on "edit" button, every p tag getting hide and showing all input text instead of particular tags.
My jQuery code is given below:
<script type="text/javascript">
$(document).ready(function(){
$('.text').hide();
$(this).on('click', function(){
alert('ok');
$('.name').hide();
$('.text').show();
})
})
</script>
I am a new be here can anyone please help me related this? thanx in advance. I want only clickable edit open their text boxes instead how cs
My view is like this :
https://screenshots.firefox.com/9zlXPAB2kw8MYxR7/localhost
i want click on edit and name pay1 and pay2 should be text

Remove the .class delcarations since the event will apply to every one of them in .hide() and .show(). Put the click event directly on all p in this case. (Can easily be adjusted to your specs).
Put this instead of your class in 'show() and hide(). To show the current <td>s .text class you can use the jQuery .siblings() function and specificy the .text sibling directly.
EDIT:
Since you want to have the text change when you hit the Edit button and not each p then you can place p with .edit_btn, and traverse up and down the DOM using .parent() and .children() functions.
$(document).ready(function() {
$('.text').hide();
$('.edit_btn').on('click', function(e) {
console.log(this);
$(this).parent().siblings('td').children('p').hide();
$(this).parent().siblings('td').children('.text').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">
Name </p>
<input class="text" type="text" name="name" value="<?php echo $aircrews->fname.' '.$aircrews->lname; ?>" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay1" value="<?php echo $aircrews->pay_status1; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td style="width: 40px;">
<p class="name">
name </p>
<input type="text" class="text" name="pay2" value="<?php echo $aircrews->pay_status2; ?>" style="height: 22px;width: 20px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

You are accessing the elements by class. $('.name') returns all elements of class name, also $('.text') returns all elements of class text, not just the one you clicked on.
So you need to give individual elements unique ids and select by id $('#id').
See https://api.jquery.com/id-selector/

You should change Javascript part like this:
<script type="text/javascript">
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
</script>
In jQuery, .parents() function will check for the parents of "edit_btn" class which is <td>. Then .siblings() function consider all the siblings of <td> tag which comes under the same <tr> tag. Then .children('p') function will check for childrens with <p> tag means it consider <p> tags which are under those <td> tags and then hide() function will hide that particular <p> tag. Check below Snippet.
$(document).ready(function() {
$('.edit_btn').on('click', function() {
$(this).parents().siblings().children('p').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-responsive table-striped col-lg-12 col-md-12 col-sm-12 padding_left_right_none dash_table">
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 1_1</p>
<input class="text" type="text" name="name" value="Value Here 1_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input type="text" class="text" name="pay1" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 3_1</p>
<input type="text" class="text" name="pay2" value="Value Here 3_1" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
<tr>
<td style="width:10px;"> </td>
<td style="width: 130px;">
<p class="name">Name 2_1</p>
<input class="text" type="text" name="name" value="Value Here 2_1" style="height: 22px;width: 110px;border: none;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_2</p>
<input type="text" class="text" name="pay1" value="Value Here 2_2" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td style="width: 80px;">
<p class="name">Name 2_3</p>
<input type="text" class="text" name="pay2" value="Value Here 2_3" style="height: 22px;width: 110px;border: none;text-align: center;">
</td>
<td class="right_set"><button class="edit_btn">Edit / -</button></td>
</tr>
</table>

Populating a drop down box with inputs from database that'd lead to another populated page

So I volunteered to create a user form at work and thought I'd add a fun little twist and do it in HTML/CSS/PHP/mySQL rather than MS word.
Basically, this is a form I'll be using to add and delete user from my database. I've already finished the initial form, created a PHP file to save everything in my database and linked it properly.
My question is, how do I create a page with a drop down list of all Names/Last Names/IDs where the person browsing it could click "submit" and get all the information about the user?
I've been googling for hours now, but to no avail as it seems that some people have similar problems, but are missing some large puzzle piece that I need as well.
I know it sounds a bit confusing, so here's my code so that you can get a better idea:
HTML:
#charset "UTF-8";
table,
th,
td {} table {
border-collapse: collapse;
}
td {
padding: 3px;
}
input[type="text"],
textarea {
background-color: #F8FCFF;
border: 2px solid #eeeeee;
color: #333333;
font-size: 0.9em;
font-style: normal;
font-weight: 400;
font-family: Tahoma;
Helvetica;
}
body {
background-color: #e6e6e6;
margin: 0 auto;
}
f {
font-style: normal;
font-weight: 550;
font-family: sans-serif;
source-sans-pro;
}
bigbold {
font-style: normal;
font-weight: bold;
font-size: 20px;
font-family: sans-serif;
source-sans-pro;
}
info {
font-style: normal;
font-weight: bold;
font-family: sans-serif;
source-sans-pro;
}
.tr-top {
border-top: 1pt solid black;
}
.tr-left {
border-left: 1pt solid black;
}
.td-left {
border-left: 1pt solid black;
width: 35%;
}
.checkboxes label {
display: block;
float: left;
padding-right: 10px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
}
#body1 {
width: 1000px;
background: #fff;
height: 100%;
}
#wrapper {
max-width: 1000px;
height: 100%;
background: #fff;
margin: 0px auto 0;
padding: 20px;
}
#colour {
background: #C6DEFF;
}
</style>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled D
<!--#include file="NewUser_get.php" -->
ocument</title>
<link href="Untitled-4.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<div id="body1">-->
<div id="wrapper">
<div id="head">
<form action="NewUser_get.php" method="POST">
<table style="width:1000px">
<tr>
<td width=90%>
<f>Request date:</f>
<br>
<input type="date" name="RequestDate">
</td>
<td width=10%>
<f>Requested by:</f>
<br>
<input type="text" style="width: 166px;" name="RequestBy">
</td>
</tr>
</table>
<br>
<div id="colour">
<info>
<center>New User Info</center>
</info>
</div>
<br>
<table style="width:100%">
<tr>
<td>
<f>Employee's last name: </f>
<input type="text" placeholder="Click to type" name="LastName">
</td>
<td>
<f>First name
<input type="text" placeholder="Click to type" name="FirstName">
</td>
<td>
<f>Middle name
<input type="text" placeholder="Click to type" name="MiddleName">
</td>
<td>
<f>Employment type
<select name="EmploymentType">
<option value="Permanent">Permanent</option>
<option value="Temporary">Temporary</option>
<option value="Contractor">Contractor</option>
<option value="Placement">Placement</option>
<option value="Other">Other</option>
</select>
</td>
<td width="80px">
<f> Gender</f>
<br>
<label for="GenderMale">
<input type="checkbox" name="GenderMale" value="Yes" /> <span>M</span>
</label>
<label for="GenderFemale">
<input type="checkbox" name="GenderFemale" value="Yes" /> <span>F</span>
</label>
</td>
</tr>
<tr>
<td>
<f>Department </f>
<br>
<input type="text" placeholder="Click to type" name="Department1">
</td>
<td>
<f>Job title </f>
<input type="text" placeholder="Click to type" name="JobTitle">
</td>
<td>
<f>Manager's name </f>
<input type="text" placeholder="Click to type" name="ManagerName">
</td>
<td>
<f>Start date </f>
<br>
<input type="date" placeholder="Click to type" name="StartDate">
</td>
<td>
<f>Finish date </f>
<input type="date" style="width: 166px;" name="FinishDate">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>Full address:</f>
<br>
<input type="text" style="width: 992px;" placeholder="Click to type, Address/ P.O. Box, City, Street, Post code" name="FullAddress">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>User Group / Profile to Use:</f>
<input type="text" style="width: 325px;" placeholder="Click to type, e.g. same as John, Accounts" name="UserGroup">
</td>
<td>
<f>Distribution Groups to be included:</f>
<input type="text" style="width: 325px;" placeholder="Click to type, e.g. Staff, Internal, External" name="DistributionGroup">
</td>
<td>
<f>Shared Drive Access:</f>
<input type="text" style="width: 325px;" placeholder="Click to type" name="SharedDriveAccess">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>Permissions on shared drives (in detail):</f>
<br>
<input type="text" style="width: 993px;" placeholder="Click to type, e.g. Marketing drive 'read only, Technical drive 'Full Access'" name="Permissions">
</td>
</tr>
</table>
<br>
<div id="colour">
<info>
<center>Additional Info</center>
</info>
</div>
<br>
<div class="checkboxes">
<table style="width:100%">
<tr>
<td width="%50">
<bigbold>List of required items (Tick the box next to an item):</bigbold>
</td>
<td>&nbsp</td>
<td class="td-left" width="%50">
<bigbold>List of required software/drive access:</bigbold>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="td-left">
<info> Drives:</info>
</td>
<td>
<info> Software:</info>
</td>
</tr>
<tr>
<td>
<label for="iPad">
<input type="checkbox" name="iPad" value="Yes"> <span><f>iPad + case</f></span>
</label>
</td>
<td>
<label for="Mouse">
<input type="checkbox" name="Mouse" value="Yes"> <span><f>Mouse</f></span>
</label>
</td>
<td class="td-left">
<label for="Sales">
<input type="checkbox" name="Sales" value="Yes"><span><f>Sales</f></span>
</label>
</td>
<td>
<label for="Salesforce">
<input type="checkbox" name="Salesforce" value="Yes"> <span><f>Salesforce</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="iPhone">
<input type="checkbox" name="iPhone" value="Yes"> <span><f>iPhone + case</f></span>
</label>
</td>
<td>
<label for="Laptopb">
<input type="checkbox" name="Laptopb" value="Yes"> <span><f>Laptop bag</f></span>
</label>
</td>
<td class="td-left">
<label for="Marketing">
<input type="checkbox" name="Marketing" value="Yes"> <span><f>Marketing</f></span>
</label>
</td>
<td>
<label for="VPN">
<input type="checkbox" name="VPN" value="Yes"> <span><f>VPN</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Laptop">
<input type="checkbox" name="Laptop" value="Yes"> <span><f>Laptop</f></span>
</label>
</td>
<td>
<label for="Dphone">
<input type="checkbox" name="Dphone" value="Yes"> <span><f>Desk phone</f></span>
</label>
</td>
<td class="td-left">
<label for="General">
<input type="checkbox" name="General" value="Yes"> <span><f>General</f></span>
</label>
</td>
<td>
<label for="Terminal">
<input type="checkbox" name="Terminal" value="Yes"> <span><f>Terminal server</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Desktop">
<input type="checkbox" name="Desktop" value="Yes" /> <span><f>Desktop</f></span>
</label>
</td>
<td>
<label for="Printerw">
<input type="checkbox" name="Printerw" value="Yes"> <span><f>Printer (work)</f></span>
</label>
</td>
<td class="td-left">
<label for="CAD">
<input type="checkbox" name="CAD" value="Yes"> <span><f>CAD</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Printerh">
<input type="checkbox" name="Printerh" value="Yes"> <span><f>Printer (home)</f></span>
</label>
</td>
<td>
<label for="Dongle">
<input type="checkbox" name="Dongle" value="Yes"> <span><f>Dongle</f></span>
</label>
</td>
<td class="td-left">
<label for="Finance">
<input type="checkbox" name="Finance" value="Yes"> <span><f>Finance</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Monitor">
<input type="checkbox" name="Monitor" value="Yes"> <span><f>Monitor</f></span>
</label>
</td>
<td>
<label for="MiFi">
<input type="checkbox" name="Mifi" value="Yes"> <span><f>MiFi (Mobile Wifi)</f></span>
</label>
</td>
<td class="td-left">
<label for="Accounts">
<input type="checkbox" name="Accounts" value="Yes"> <span><f>Accounts</f></span>
</label>
</td>
<td></td>
</tr>
<tr>
<td>
<label for="Keyboard">
<input type="checkbox" name="Keyboard" value="Yes"> <span><f>Keyboard</f></span>
</label>
</td>
<td></td>
<td class="td-left"></td>
<td></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</table>
<div id="colour">
<center>
<info>Miscellaneous:</info>
</center>
</div>
<br>
<table style="width:100%">
<tr>
<td>
<f>Should the predecessor's email be assigned to this user?</f>
</td>
<td>
<label for="Pemail">
<input type="checkbox" name="Pemail" value="Yes"> <span><f>Yes</f></span>
</label>
</td>
</tr>
<tr class="tr-top">
<td>
<f>Is the user replacing someone else from the staff or is he/she a completely new employee?</f>
</td>
<td>
<label for="Replacement">
<input type="checkbox" name="Replacement" value="Yes"> <span><f>Replacement</f></span>
</label>
</td>
<td>
<label for="NewUser">
<input type="checkbox" name="NewUser" value="Yes"> <span><f>New user</f></span>
</label>
</td>
</tr>
</table>
<br>
<textarea name="AddRequirements" style="width:1000px;" placeholder="Please continue here for any other extra requirements e.g. need of a special signature, software, hardware etc. or needed access to another user’s files and documents, or assign another user’s email profile to this user so they inherit all files and folders form the old user."></textarea>
<!--<input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' /> -->
<input type="submit">
</form>
</div>
</div>
</body>
</html>
PHP:
<?php
if( $_POST )
{
$conn = mysqli_connect("myhost","myuser","mypassword", "mydb");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$RequestBy = $_POST['RequestBy'];
$FirstName = $_POST['FirstName'];
$MiddleName = $_POST['MiddleName'];
$LastName = $_POST['LastName'];
$Desktop = $_POST['Desktop'];
$EmploymentType = $_POST['EmploymentType'];
$GenderMale = $_POST['GenderMale'];
$GenderFemale = $_POST['GenderFemale'];
$Department1 = $_POST['Department1'];
$JobTitle = $_POST['JobTitle'];
$ManagerName = $_POST['ManagerName'];
$FullAddress = $_POST['FullAddress'];
$UserGroup = $_POST['UserGroup'];
$DistributionGroup = $_POST['DistributionGroup'];
$SharedDriveAccess = $_POST['SharedDriveAccess'];
$Permissions = $_POST['Permissions'];
$iPad = $_POST['iPad'];
$Mouse = $_POST['Mouse'];
$Sales = $_POST['Sales'];
$Salesforce = $_POST['Salesforce'];
$iPhone = $_POST['iPhone'];
$Laptopb = $_POST['Laptopb'];
$Marketing = $_POST['Marketing'];
$VPN = $_POST['VPN'];
$Laptop = $_POST['Laptop'];
$Dphone = $_POST['Dphone'];
$General = $_POST['General'];
$Terminal = $_POST['Terminal'];
$Printerw = $_POST['Printerw'];
$CAD = $_POST['CAD'];
$Printerh = $_POST['Printerh'];
$Dongle = $_POST['Dongle'];
$Finance = $_POST['Finance'];
$Monitor = $_POST['Monitor'];
$Mifi = $_POST['Mifi'];
$Accounts = $_POST['Accounts'];
$Keyboard = $_POST['Keyboard'];
$Pemail = $_POST['Pemail'];
$Replacement = $_POST['Replacement'];
$NewUser = $_POST['NewUser'];
$AddRequirements = $_POST['AddRequirements'];
}
$sql= "
INSERT INTO TestTable (RequestBy, FirstName, MiddleName, LastName, Desktop, EmploymentType, GenderMale, GenderFemale, Department1, JobTitle, ManagerName, FullAddress, UserGroup, DistributionGroup, SharedDriveAccess, Permissions, iPad, Mouse, Sales, Salesforce, iPhone, Laptopb, Marketing, VPN, Laptop, Dphone, General, Terminal, Printerw, CAD, Printerh, Dongle, Finance, Monitor, Mifi, Accounts, Keyboard, Pemail, Replacement, NewUser, AddRequirements) VALUES ('$RequestBy', '$FirstName', '$MiddleName', '$LastName', '$Desktop', '$EmploymentType', '$GenderMale', '$GenderFemale', '$Department1', '$JobTitle', '$ManagerName', '$FullAddress', '$UserGroup', '$DistributionGroup', '$SharedDriveAccess', '$Permissions', '$iPad', '$Mouse', '$Sales', '$Salesforce', '$iPhone', '$Laptopb', '$Marketing', '$VPN', '$Laptop', '$Dphone', '$General', '$Terminal', '$Printerw', '$CAD', '$Printerh', '$Dongle', '$Finance', '$Monitor', '$Mifi', '$Accounts', '$Keyboard', '$Pemail', '$Replacement', '$NewUser', '$AddRequirements');";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
Basically I want to create another page where I could select the user's name, click some button, and then see all the information such as access to "sales" drive, gender, etc. displayed.
Ignore the lack of security measures in the code, it'll be used on a local server by very few and trustworthy people.
If somebody could just guide me on the right path, it'd be much appreciated. Thank you in advance.

It seems to need a bit of AJAX to accomplish this.
At first, you need to make the php file containing the select box. Note, that you have to include jquery at html .
In select_user.php
<?php
//Connection to database
$connection = mysqli_connect('localhost', 'root', 'your_password', 'your_database');
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
die("Database connection failed: " . mysqli_error());
}
//Simple query to populate the select box
$query = "SELECT id, FirstName, LastName FROM TestTable ORDER BY FirstName ASC, LastName ASC, id ASC;";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) { //If there are records in database table
echo '<select id="user" name="user">';
while ($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
}
echo '</select>';
} else {
echo '<p class="alert">There are no data to select from.</p>';
}
?>
<div id="results">
</div>
Then you have to write some AJAX asking the server to fetch the user with the selected id (note that normally you have to be very careful with user inputs).
At the bottom of select_user.php
<script>
$(document).ready(function(){
//Each time that the value of select box changes then make an ajax call and bring the user details
$('#user').on('change', function() {
var id = $(this).val();
$.ajax({
async: false,
url: "ajax.php",
type: "POST",
data: {id : id},
dataType: "json",
success: function(data) {
//Check if data is empty or make some other validations
var firstName = data.FirstName;
var lastName = data.LastName;
var fullAddress = data.FullAddress;
var permissions = data.Permissions;
var str = '<p>Name: '+firstName+' '+lastName+' '+fullAddress+' '+permissions+'</p>';
//Replace content at #results div
$('#results').innerHtml(str);
}
});
}
}
</script>
Finally, you have to create the file ajax.php which contains the query that brings back the details of the selected user.
In file ajax.php
<?php
//This is ajax.php
//Connection to database
$connection = mysqli_connect('localhost', 'root', 'your_password', 'your_database');
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
die("Database connection failed: " . mysqli_error());
}
$id = $_POST['id'];
//Never trust input from users
//Sanitize and validate variables
//Use prepared statemends or PDO
$query = "SELECT id, FirstName, LastName, FullAddress, Permissions FROM TestTable WHERE id = '$id';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);
$json['id'] = $row['id'];
$json['firstName'] = $row['FirstName'];
$json['lastName'] = $row['LastName'];
$json['fullAddress'] = $row['FullAddress'];
$json['permisions'] = $row['Permissions'];
echo json_encode($json);
mysqli_close($connection);
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<?php
//Connection to database
$connection = mysqli_connect("*****************","***********","****", "******");
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
die("Database connection failed: " . mysqli_error());
}
//Simple query to populate the select box
$query = "SELECT id, FirstName, LastName FROM TestTable ORDER BY FirstName ASC, LastName ASC, id ASC;";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) { //If there are records in database table
echo '<select id="user" name="user">';
while ($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
}
echo '</select>';
} else {
echo '<p class="alert">There are no data to select from.</p>';
}
?>
<div id="results">
</div>
<script>
$(document).ready(function(){
//Each time that the value of select box changes then make an ajax call and bring the user details
$('#user').on('change', function() {
var id = $(this).val();
$.ajax({
async: false,
url: "ajax.php",
type: "POST",
data: {id : id},
dataType: "json",
success: function(data) {
//Check if data is empty or make some other validations
var firstName = data.FirstName;
var lastName = data.LastName;
var fullAddress = data.FullAddress;
var permissions = data.Permissions;
var str = '<p>Name: '+firstName+' '+lastName+' '+fullAddress+' '+permissions+'</p>';
//Replace content at #results div
$('#results').innerHtml(str);
}
});
}
}
</script>
<div id="results">
</div>

This is the select_user.php file:
<?php
//Connection to database
$connection = mysqli_connect("****","****","****", "***");
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
die("Database connection failed: " . mysqli_error());
}
//Simple query to populate the select box
$query = "SELECT id, FirstName, LastName FROM TestTable ORDER BY FirstName ASC, LastName ASC, id ASC;";
$result = mysqli_query($connection, $query);
if (mysqli_num_rows($result) > 0) { //If there are records in database table
echo '<select id="user" name="user">';
while ($row = mysqli_fetch_array($result)) {
echo '<option value="'.$row['id'].'">'.$row['FirstName'].' '.$row['LastName'].'</option>';
}
echo '</select>';
} else {
echo '<p class="alert">There are no data to select from.</p>';
}
?>
<div id="results">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(document).ready(function(){
//Each time that the value of select box changes then make an ajax call and bring the user details
$('#user').on('change', function() {
var id = $(this).val();
$.ajax({
async: false,
url: "ajax.php", //Tried changing this to domainname.com/ajax.php but that didn't change anything.
type: "POST",
data: {id : id},
dataType: "json",
success: function(data) {
//Check if data is empty or make some other validations
var firstName = data.FirstName;
var lastName = data.LastName;
var fullAddress = data.FullAddress;
var permissions = data.Permissions;
var str = '<p>Name: '+firstName+' '+lastName+' '+fullAddress+' '+permissions+'</p>';
//Replace content at #results div
$('#results').innerHtml(str);
}
});
}
}
</script>
<div id="results">
</div>
This is ajax.php:
<?php
//This is ajax.php
//Connection to database
$connection = mysqli_connect("******","******","*******", "*******");
mysqli_set_charset($connection, 'utf8');
if (!$connection) {
die("Database connection failed: " . mysqli_error());
}
$id = $_POST['id'];
//Never trust input from users
//Sanitize and validate variables
//Use prepared statemends or PDO
$query = "SELECT id, FirstName, LastName, FullAddress, Permissions FROM TestTable WHERE id = '$id';";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);
$json['id'] = $row['id'];
$json['firstName'] = $row['FirstName'];
$json['lastName'] = $row['LastName'];
$json['fullAddress'] = $row['FullAddress'];
$json['permisions'] = $row['Permissions'];
echo json_encode($json);
mysqli_close($connection);
?>
This is the HTML.
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta charset="utf-8">
<title>Untitled D
<!--#include file="NewUser_get.php" -->
ocument</title>
<link href="Untitled-4.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<div id="body1">-->
<div id="wrapper">
<div id="head">
<center>
<img src="http://www.rwc.com/wp-content/themes/RWC_Global/assets/images/logo.png">
</center>
<form action="NewUser_get.php" method="POST">
<table style="width:1000px">
<tr>
<td width=90%>
<f>Request date:</f>
<br>
<input type="date" name="RequestDate">
</td>
<td width=10%>
<f>Requested by:</f>
<br>
<input type="text" style="width: 166px;" name="RequestBy">
</td>
</tr>
</table>
<br>
<div id="colour">
<info>
<center>New User Info</center>
</info>
</div>
<br>
<table style="width:100%">
<tr>
<td>
<f>Employee's last name: </f>
<input type="text" placeholder="Click to type" name="LastName">
</td>
<td>
<f>First name
<input type="text" placeholder="Click to type" name="FirstName">
</td>
<td>
<f>Middle name
<input type="text" placeholder="Click to type" name="MiddleName">
</td>
<td>
<f>Employment type
<select name="EmploymentType">
<option value="Permanent">Permanent</option>
<option value="Temporary">Temporary</option>
<option value="Contractor">Contractor</option>
<option value="Placement">Placement</option>
<option value="Other">Other</option>
</select>
</td>
<td width="80px">
<f> Gender</f>
<br>
<label for="GenderMale">
<input type="checkbox" name="GenderMale" value="Yes" /> <span>M</span>
</label>
<label for="GenderFemale">
<input type="checkbox" name="GenderFemale" value="Yes" /> <span>F</span>
</label>
</td>
</tr>
<tr>
<td>
<f>Department </f>
<br>
<input type="text" placeholder="Click to type" name="Department1">
</td>
<td>
<f>Job title </f>
<input type="text" placeholder="Click to type" name="JobTitle">
</td>
<td>
<f>Manager's name </f>
<input type="text" placeholder="Click to type" name="ManagerName">
</td>
<td>
<f>Start date </f>
<br>
<input type="date" placeholder="Click to type" name="StartDate">
</td>
<td>
<f>Finish date </f>
<input type="date" style="width: 166px;" name="FinishDate">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>Full address:</f>
<br>
<input type="text" style="width: 992px;" placeholder="Click to type, Address/ P.O. Box, City, Street, Post code" name="FullAddress">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>User Group / Profile to Use:</f>
<input type="text" style="width: 325px;" placeholder="Click to type, e.g. same as John, Accounts" name="UserGroup">
</td>
<td>
<f>Distribution Groups to be included:</f>
<input type="text" style="width: 325px;" placeholder="Click to type, e.g. Staff, Internal, External" name="DistributionGroup">
</td>
<td>
<f>Shared Drive Access:</f>
<input type="text" style="width: 325px;" placeholder="Click to type" name="SharedDriveAccess">
</td>
</tr>
</table>
<br>
<table style="width:100%">
<tr>
<td>
<f>Permissions on shared drives (in detail):</f>
<br>
<input type="text" style="width: 993px;" placeholder="Click to type, e.g. Marketing drive 'read only, Technical drive 'Full Access'" name="Permissions">
</td>
</tr>
</table>
<br>
<div id="colour">
<info>
<center>Additional Info</center>
</info>
</div>
<br>
<div class="checkboxes">
<table style="width:100%">
<tr>
<td width="%50">
<bigbold>List of required items (Tick the box next to an item):</bigbold>
</td>
<td>&nbsp</td>
<td class="td-left" width="%50">
<bigbold>List of required software/drive access:</bigbold>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="td-left">
<info> Drives:</info>
</td>
<td>
<info> Software:</info>
</td>
</tr>
<tr>
<td>
<label for="iPad">
<input type="checkbox" name="iPad" value="Yes"> <span><f>iPad + case</f></span>
</label>
</td>
<td>
<label for="Mouse">
<input type="checkbox" name="Mouse" value="Yes"> <span><f>Mouse</f></span>
</label>
</td>
<td class="td-left">
<label for="Sales">
<input type="checkbox" name="Sales" value="Yes"><span><f>Sales</f></span>
</label>
</td>
<td>
<label for="Salesforce">
<input type="checkbox" name="Salesforce" value="Yes"> <span><f>Salesforce</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="iPhone">
<input type="checkbox" name="iPhone" value="Yes"> <span><f>iPhone + case</f></span>
</label>
</td>
<td>
<label for="Laptopb">
<input type="checkbox" name="Laptopb" value="Yes"> <span><f>Laptop bag</f></span>
</label>
</td>
<td class="td-left">
<label for="Marketing">
<input type="checkbox" name="Marketing" value="Yes"> <span><f>Marketing</f></span>
</label>
</td>
<td>
<label for="VPN">
<input type="checkbox" name="VPN" value="Yes"> <span><f>VPN</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Laptop">
<input type="checkbox" name="Laptop" value="Yes"> <span><f>Laptop</f></span>
</label>
</td>
<td>
<label for="Dphone">
<input type="checkbox" name="Dphone" value="Yes"> <span><f>Desk phone</f></span>
</label>
</td>
<td class="td-left">
<label for="General">
<input type="checkbox" name="General" value="Yes"> <span><f>General</f></span>
</label>
</td>
<td>
<label for="Terminal">
<input type="checkbox" name="Terminal" value="Yes"> <span><f>Terminal server</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Desktop">
<input type="checkbox" name="Desktop" value="Yes" /> <span><f>Desktop</f></span>
</label>
</td>
<td>
<label for="Printerw">
<input type="checkbox" name="Printerw" value="Yes"> <span><f>Printer (work)</f></span>
</label>
</td>
<td class="td-left">
<label for="CAD">
<input type="checkbox" name="CAD" value="Yes"> <span><f>CAD</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Printerh">
<input type="checkbox" name="Printerh" value="Yes"> <span><f>Printer (home)</f></span>
</label>
</td>
<td>
<label for="Dongle">
<input type="checkbox" name="Dongle" value="Yes"> <span><f>Dongle</f></span>
</label>
</td>
<td class="td-left">
<label for="Finance">
<input type="checkbox" name="Finance" value="Yes"> <span><f>Finance</f></span>
</label>
</td>
</tr>
<tr>
<td>
<label for="Monitor">
<input type="checkbox" name="Monitor" value="Yes"> <span><f>Monitor</f></span>
</label>
</td>
<td>
<label for="MiFi">
<input type="checkbox" name="Mifi" value="Yes"> <span><f>MiFi (Mobile Wifi)</f></span>
</label>
</td>
<td class="td-left">
<label for="Accounts">
<input type="checkbox" name="Accounts" value="Yes"> <span><f>Accounts</f></span>
</label>
</td>
<td></td>
</tr>
<tr>
<td>
<label for="Keyboard">
<input type="checkbox" name="Keyboard" value="Yes"> <span><f>Keyboard</f></span>
</label>
</td>
<td></td>
<td class="td-left"></td>
<td></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</table>
<div id="colour">
<center>
<info>Miscellaneous:</info>
</center>
</div>
<br>
<table style="width:100%">
<tr>
<td>
<f>Should the predecessor's email be assigned to this user?</f>
</td>
<td>
<label for="Pemail">
<input type="checkbox" name="Pemail" value="Yes"> <span><f>Yes</f></span>
</label>
</td>
</tr>
<tr class="tr-top">
<td>
<f>Is the user replacing someone else from the staff or is he/she a completely new employee?</f>
</td>
<td>
<label for="Replacement">
<input type="checkbox" name="Replacement" value="Yes"> <span><f>Replacement</f></span>
</label>
</td>
<td>
<label for="NewUser">
<input type="checkbox" name="NewUser" value="Yes"> <span><f>New user</f></span>
</label>
</td>
</tr>
</table>
<br>
<textarea name="AddRequirements" style="width:1000px;" placeholder="Please continue here for any other extra requirements e.g. need of a special signature, software, hardware etc. or needed access to another user’s files and documents, or assign another user’s email profile to this user so they inherit all files and folders form the old user."></textarea>
<!--<input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' /> -->
<input type="submit">
</form>
</div>
</div>
</body>
</html>
Sorry for the late reply, was a bit caught up in things. Thank you for all the help, it just feels like I can't do much at this point because I quite literally can't understand where the issue lies.

How would I make a message pop up after this form is submitted?

I need a message to pop up to tell the user that their enquiry has been submitted. The validation works, however I had to remove my old popup message as it was conflicting with the validation code. I need to know where to put the pop up message code in that exisiting javascript code that I am using to validate. The code i was using to make a pop up message was:
<script>
function EnquireButton() {
alert("Thank you for your enquiry!");
}
</script>
I'm sure it's simple enough, I have tried to implement it into the validation code, however it just reloads the page without showing the pop up.
HTML:
<form name="Contact_Us_Form" method="post" action="">
<table width="450px">
<p>One time Message</p>
<tr>
<td valign="top">
<label for="full_name">Full Name *</label>
</td>
<td valign="top">
<input type="text" name="full_name" maxlength="50" size="30" placeholder="First Name and Last Name" title="Your name here" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="landline">Landline Number *</label>
</td>
<td valign="top">
<input type="text" name="landline" maxlength="50" size="30" placeholder="(01206)" title=" YourLandline Number" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="Email">Email Adress *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30" placeholder="you#yourdomain.com" title="Your email" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="house_number">House Number *</label>
</td>
<td valign="top">
<input type="text" name="house_number" maxlength="30" size="30" placeholder="House Number" title="Your House Number" required/>
</td>
</tr>
<tr>
<td>
<label for="postal_code">Post Code *</label>
</td>
<td>
<input type="text" name="postal_code" maxlength="30" size="30" placeholder="CO5 " title="Your Postal Code" required/>
</td>
</tr>
<tr>
<td valign="top">
<label for="">Enquiry</label>
</td>
<td valign="top">
<textarea name="Enquiry" maxlength="1000" cols="28" rows="6" placeholder="Write your enquiry here."></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<button onclick="Enquirebutton()">Enquire</button>
<script>
$(document).ready(function (){
validate();
$('#full_name, #landline, #Email').change(validate);
});
function validate(){
if ($('#full_name').val().length > 0 &&
$('#landline').val().length > 0 &&
$('#Email').val().length > 0) {
$("input[type=Enquirebutton()]").prop("disabled", false);
}
else {
$("input[type=Enquirebutton()]").prop("disabled", true);
}
}
</script>
</td>
</tr>
</table>
</form>

Just add one property to form tag onsubmit="EnquireButton()"
that is
<form name="Contact_Us_Form" method="post" action="" onsubmit="EnquireButton()">

First, make your button a submit one:
<button type="submit">Enquire</button>
Then you can either use the onclick="Enquirebutton()" in your submit button or the onsubmit="Enquirebutton()" in your form.
Take a look at onsubmit Event for more information.

How to dynamically adjust html table based on browser window size

I want my site to display differently based on the size of the web browser. Based on the questions/answers from other users, I got this to work with JavaScript onload. But I can't get it to work dynamically -- that is to say, in real-time, as users are adjusting the window. They have to refresh to get the format of the webpage to change.
Here is my current code:
<table class="index_table" border="0">
<tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth > 900){
document.write('<td rowspan="3" class="index_article"></td>');
}
</script>
<!-- END OF JAVASCRIPT -->
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--BELOW IS JAVASCRIPT FOR ADJUSTING HTML BASED ON WINDOW SIZE -->
<script>
if (window.innerWidth < 900){
document.write('<tr><td class="index_article" style="height:200px;"></td></tr>');
}
</script>
<!-- END OF JAVASCRIPT -->
Note: I know I shouldn't be used tables, I should be using divs. But that's another issue... I started building this website before I knew that. I also know it's pretty sloppy. So just bear with me. I'm trying to just go with it until I have time to fix it up.

You shouldn't use JavaScript to make responsive web design. Use CSS instead, with media querys. So you write your HTML:
<table class="index_table" border="0">
<tr>
<!--This only will display on screen-width>900-->
<td id="big_device_index" rowspan="3" class="index_article"></td>
<td class="index_article_light">
<h2 class="index_instructions_subheader">INSERT HEADER HERE</h2>
<p class="index_instructions">INSERT PARAGRAPH HERE.</p>
<p class="index_instructions">INSERT PARAGRAPH HERE. </p>
<br />
<form action="signup.html" style="vertical-align:top;">
<table border="0" style="margin-left:auto;margin-right:auto;width:400px;">
<tr>
<td>
<input type="text" name="search" class="firstname" value=" First name">
</td>
<td>
<input type="text" name="search" class="lastname" value=" Last name">
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" name="search" class="email" value=" Email">
</td>
</tr>
<tr>
<td colspan="2">
<div style="color:#979797;">Password: <br /><input type="password" name="password" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td>
<div style="color:#979797;">Verify password: <input type="password" name="verify_passwords" class="password" value="Password"></div>
</td>
</tr>
<tr>
<td colspan="2">
<select>
<option value="kent">INSERT LIST HERE</option>
</select>
</tr>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="signup!" style="float:right;" id="result_submit">
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--This only will display on screen-width<900-->
<tr id="small_device_index"><td class="index_article" style="height:200px;"></td></tr>
Use the following CSS:
#media all and (max-width: 899px) {
#big_device_index {
display: none;
}
#media all and (min-width: 900px) {
#small_device_index {
display: none;
}
You can find out more about media queries here
}

Add this outside of if (window.innerWidth > 900){.....
$(window).resize(function(){
if (window.innerWidth > 900){
$('.index_article').remove();
$('.index_table).find('tr:first').append('<td rowspan="3" class="index_article"></td>');
}
}
hope this will help you, make sure to include fisrt jquery.min.js

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
}

Develop Reference

JavaScript is the programming language of the Web.

Conflict in including of a file - javascript

Related

how to make editable text in edit case using jquery

Populating a drop down box with inputs from database that'd lead to another populated page

How would I make a message pop up after this form is submitted?

How to dynamically adjust html table based on browser window size

javascript for form validation works in firefox but not IE8

Categories

Resources