I am trying to display email address and password for every employee by submitting their id, I used this code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {
var x = document.forms["myMail"]["rowId"].value;
if (x == "") {
alert("Please type a valid National ID");
return false;
}
}
</script>
</head>
<body>
<form name="myMail" action="teamId.html" onsubmit="return validateForm()" method="post">
National ID : <input type="number" name="rowId" required>
<input type="submit" value="Get my Mail">
</form>
</body>
</html>
but when submitting it displays the whole table not the row that contains the employee info
and this is the first row of the table
<td height=53 class=xl6455 width=64 style='height:39.95pt;width:48pt'>id</td>
<td class=xl6455 width=191 style='border-left:none;width:143pt'>National I.D</td>
<td class=xl6555 width=390 style='border-left:none;width:293pt'>Name</td>
<td class=xl6555 width=242 style='border-left:none;width:182pt'>E-mail
Address</td>
<td class=xl6555 width=221 style='border-left:none;width:166pt'>First time
only Password</td>
<td class=xl6555 width=200 style='border-left:none;width:150pt'>Level</td>
</tr>
<tr height=53 style='mso-height-source:userset;height:39.95pt'>
<td height=53 class=xl6455 style='height:39.95pt;border-top:none'>1</td>
There is a problem with the below code. The second button show it does not work. It doesn't open anything.
The problem is for sure the Show ..if I changed it to class , both do not work.
And I would like in each row the text to be left without any margin , but I couldn't fixed it
<!DOCTYPE html>
<html>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafeteria Orders Management System</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
td {
max-width: 120px;
white-space: nowrap;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 300px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 9px solid #eee;
padding: .6em 120px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
Ok: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
</td>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
</td>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
</body>
</html>
change in the button attribute id, u cant use more than one id with the same name on your website, you can use class instead of. For example
<button class="create-user">Show</button>
and in the js u must call to the class
$(".create-user")
As was suggested, you will want to use the class attribute and selector.
Working example: https://jsfiddle.net/Twisty/5n2h03nL/
HTML
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user-1" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user-2" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
jQuery
$(".showDialog").button().on("click", function() {
dialog.dialog("open");
});
In regards to your other comment, you will need to provide more info. If you want the "Show" button to launch the dialog with custom details each time, those details need to be provided from some place. You can make use of data attributes on the row, like <tr data-comments=""> or make an AJAX call to a database. We can't just write that for you, you need to figure out where you want to store those details and how you want to collect them when the button is clicked.
In regards to this question, I suspect you've got the answer. So I would mark one as a answer, take a stab at your next issue, and if needed create a new question.
I have a form which is not submitted in IE. I just want to hide image upload button (file type) and show a custom browse button. My file upload has display none. when i click on the label i call the file click event and choose a file. but when i submit the page it does not submit it, No error message in console. it is working fine in firefox.
Here is my code.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<title>New world of interaction</title>
<script>
function checkFields()
{
var fup = document.getElementById('authenticationimage');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "jpg" || ext == "JPG")
{
return true;
}
else
{
alert("Upload Jpeg image only");
document.getElementById('imagename').innerHTML = '';
return false;
}
}
function readURL() {
var fup = document.getElementById('authenticationimage');
var fileName = fup.value;
document.getElementById('imagename').innerHTML = fileName;
}
function removeimage() {
document.getElementById('imagename').innerHTML = '';
}
</script>
</head>
<body>
<table border="0" cellpadding="10" cellspacing="10" width="100%" align="center">
<form action="test.php" method="post" enctype="multipart/form-data" onsubmit="return checkFields();">
<tr>
<td width="25%" style="padding-left:15px"><strong>Image</strong></td>
<td width="75%">
<table border="0">
<tr><td style="border:1px solid #596166;"><label id="imagename" style="width:200px;display:inline-block;"></label></td>
<td>
<div class="ImageUpload">
<label for="authenticationimage" onclick="document.getElementById('authenticationimage').click();">
<img src="browse.png" alt="Browse" style="width:60px;cursor: pointer;"/>
</label>
<input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" style="display:none"/>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td height="20"><input type="submit" name="submit" value="submit" />
<input type="reset" name="reset" onclick="removeimage();" value="reset">
</td>
</tr>
</form>
</table>
</body>
</html>
It is done by using css property
.select-wrapper {
background: url('templates/ncrcorp/images/upload.png') no-repeat;
background-size: cover;
display: block;
position: relative;
width: 60px;
height: 24px;
}
#authenticationimage {
width: 60px;
height: 24px;
opacity: 0;
cursor: pointer;
filter: alpha(opacity=0); /* IE 5-7 */
}
and
<span class="select-wrapper">
<input id="authenticationimage" name="authenticationimage" type="file" onchange="readURL()" />
</span>
I am just wondering if anyone can help me insert radio buttons into my HTML webpage to insert the difficulty of the exam, This is my question
5. Add a set of radio buttons to the form to accept a level of entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected.
Here is my code, Can anyone help me out please
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exam Entry</title>
<script language="javascript"" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter your Exam ID Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam Number').style.color="red";
result = false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family: "Comic Sans MS";
}
</style>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr> <tr>
<td id="Exam Number">Exam ID Number</td>
<td><input type="Number" name="ID Number"maxlength="4" ></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</body>
</html>
JFiddle:
http://jsfiddle.net/Jgv9q/
Simply add the radio buttons in your html and run code to find out which one was checked. You should be referencing w3Schools when just learning but got you started here.
http://jsfiddle.net/hyysy/1/
<tr>
<td>Exam Level</td>
<td><input type="radio" name="exam" value="GCSE">GCSE<br>
<input type="radio" name="exam" value="AS">AS<br>
<input type="radio" name="exam" value="ALevel">ALevel</td>
</tr>
and then to find out which is checked, you can use:
var x = document.getElementsByName('exam')
for(var k=0;k<x.length;k++)
if(x[k].checked){
alert('Option selected: ' + x[k].value)
}
Read more here:
http://www.w3schools.com/html/html_forms.asp
I am trying to create an automatic file download when a visitor submits a validated opt-in form. I would like to initiate the download using a Javascript function as an onsubmit() event. Here is the code I am working with I am already using the form action= to submit the form data to a database and there is already Javascript in place to validate the form. I just need to add the download function.
<?xml version="1.0" encoding="utf-8"?>
<!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>
<style type="text/css" xml:space="preserve">
BODY, P,TD{ font-family: Arial,Verdana,Helvetica, sans-serif; font-size: 10pt }
A{font-family: Arial,Verdana,Helvetica, sans-serif;}
B { font-family : Arial, Helvetica, sans-serif; font-size : 12px;font-
weight
: bold;}
.error_strings{ font-family:Verdana; font-size:14px; color:#660000;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script language="JavaScript" src="gen_validatorv4.js"
type="text/javascript" xml:space="preserve"></script>
<script type="text/javascipt">
var downloadURL = function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = 'http://healthyweightnaturally.com/file-download/download.php?
download_file=integrative_nutrition_ebook.pdf';
}
</script>
</head>
<body>
<form name="myform" id="myform" method="post"
action="https://www.example.com/FormHTML.aspx" onSubmit="return downloadURL(url);">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">
First Name
</td>
<td>
<input type="text" name="FirstName" />
</td>
</tr>
<tr>
<td align="right">
Last Name
</td>
<td>
<input type="text" name="LastName" />
</td>
</tr>
<tr>
<td align="right">
Email *
</td>
<td>
<input type="text" name="Email" />
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<div id="myform_errorloc" class="error_strings">
</div>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input style="padding-left:10px;" src="http://healthyweightnaturally.com/file-
download/download-button.png" type="image" value="submit" value="Submit" />
</td>
</tr>
</table>
<div style="visibility:hidden">
<iframe name="ifr1" width="20" height="20" id="hiddenIFrameID"></iframe>
</div>
</form>
<script language="JavaScript" type="text/javascript"
xml:space="preserve">//<![CDATA[
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("FirstName","req","Please enter your First Name");
frmvalidator.addValidation("FirstName","maxlen=20", "Max length for FirstName
is 20");
frmvalidator.addValidation("FirstName","alpha_s","Name can contain alphabetic chars
only");
frmvalidator.addValidation("LastName","req","Please enter your Last Name");
frmvalidator.addValidation("LastName","maxlen=20","For LastName, Max length is 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req");
frmvalidator.addValidation("Email","email");
//]]>
</script>
</body>
</html>
I want to use onsubmit instead of onclick because I need to make sure that the form has been validated before the file is able to be downloaded.
I am somewhat new to Javascript and have been struggling with this. I would greatly appreciate someone's assistance. The closest thing I found to an answer can be seen at HTML OnSubmit: Download OR HTML, but since they never gave any code examples it does not help me see the solution.
You can use jQuery plugin http://jqueryfiledownload.apphb.com/, which I found here Download File Using Javascript/jQuery.