unable to get elements passed from html - javascript

i'm having the below jsp page created.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x)
{
document.getElementById(x).style.display='block';
}
function hide(x)
{
document.getElementById(x).style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>
i wanted to see when i enter the text in textarea and hit enter, i want to see the text assed. in the present case it is alerting a message [object]. Also when i check radio buttons, if i check TSI Query Radio button followed SI Query Radio button or vice versa, both are getting displayed, i want only one textarea to be displayed once.
for screenshot you can have a look at this link
http://jsfiddle.net/dYy26/
Thanks.


Check this code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function handleKeyEvent(e) {
var charCode;
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
if (charCode == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(e);
alert(m);
hide(x);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('TSI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="handleKeyEvent('SI_Query_Box')"></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>


Check this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function show(x,y)
{
document.getElementById(x).style.display='block';
document.getElementById(y).style.display='none';
document.getElementById('Ship_IDl').style.display='block';
}
function hide(x,y)
{
document.getElementById(x).style.display='none';
document.getElementById(y).style.display='block';
document.getElementById('Ship_IDl').style.display='none';
}
function myKeyPress(e,x,y){
var keynum;
if(window.event){ // IE
keynum = e.keyCode;
}else
if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
//alert(String.fromCharCode(keynum));
//alert(keynum);
if (keynum == 13) {
//document.getElementById("yourForm").submit();
var m=document.getElementById(x).value;
alert(m);
hide(x,y);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="abc.jsp">
<table width="722">
<tr>
<td width="431" height="190">
<table width="439" >
<tr>
<td width="129">PARTS Updated</td>
<td width="108"><p>
<select name="PARTS_Updated" id="PARTS_Updated" >
<option value=""></option>
<option value="N/A">N/A</option>
</select>
</p></td>
<td width="186"><label for="PARTS_Updated"></label></td>
</tr>
<tr>
<td>TSI OK
</td>
<td><p>
<input type="radio" name="radio" id="TSI_N/A" value="TSI_N/A" onClick="hide('TSI_Query_Box','SI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="TSI_Query" value="TSI_Query" onClick="show('TSI_Query_Box','SI_Query_Box')"> TSI Query</p></td>
<td><label for="TSI_Query_Box"></label>
<textarea name="TSI_Query_Box" id="TSI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'TSI_Query_Box','SI_Query_Box')"></textarea></td>
</tr>
<tr>
<td height="65">Special Ins OK
</td>
<td><p>
<input type="radio" name="radio" id="SI_N/A" value="TSI_OK" onClick="hide('SI_Query_Box','TSI_Query_Box')">
N/A
</p>
<p>
<input type="radio" name="radio" id="SI_Query" value="SI_Query" onClick="show('SI_Query_Box','TSI_Query_Box')"> SI Query</p></td>
<td><label for="SI_Query_Box"></label>
<textarea name="SI_Query_Box" id="SI_Query_Box" cols="15" rows="5" style="display:none" onkeypress="return myKeyPress(event,'SI_Query_Box','TSI_Query_Box')""></textarea></td>
</tr>
</table></td>
<td width="279">
<table width="279" align="center">
<tr>
<td width="87"><p>Shipment ID
</p></td>
<td width="97"><label for="Ship_ID" id="Ship_IDl"></label>
<input type="text" name="Ship_ID" id="Ship_ID"></td>
</tr>
</table></td>
</tr>
</table>
<p> </p>
<table width="721" border="1">
<tr>
<td width="374" align="center">
<input type="submit" name="Send for CT Review (SCTR)" id="Send for CT Review (SCTR)" value="Send for CT Review (SCTR)"></td>
<td width="331" align="center">
<input type="submit" name="CT Review Complete (CTRC" id="CT Review Complete (CTRC)" value="CT Review Complete (CTRC)"></td>
</tr>
<tr>
<td align="center">
<input type="submit" name="Cleanup Queries" id="Cleanup Queries" value="Cleanup Queries"></td>
<td align="center">
<input type="submit" name="Cleanup Complete" id="Cleanup Complete" value="Cleanup Complete"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Go_To_Main_Page" id="Go_To_Main_Page" value="Go To Main Page"></td>
</tr>
</table>
<p> </p>
</form>
<h1> </h1>
</body>
</html>

Related

how to get value from dynamic radiobutton in datatables

i want ask somethink after i get some problem in my code.
so.. first i'm making a survey with input radiobutton in datatables down there is the code
EDIT
$(document).ready(function() {
$('#example').DataTable({
"paging": true,
"searching": false,
"bInfo": false,
"bLengthChange": false,
"pageLength": 2
});
// $('#save').click(function(){
// var radioValue = $(".circle:checked").val();
// // if(radioValue){
// // alert("Your are a - " + radioValue);
// // }
// console.log(radioValue)
// });
$('#save').click(function() {
var the_value;
//the_value = jQuery('input:radio:checked').val();
//the_value = jQuery('input[name=macro]:radio:checked').val();
the_value = getChecklistItems();
alert(the_value);
});
function getChecklistItems() {
var result =
$("tr.checklisttr > td > input:radio:checked").get();
console.log(result)
var columns = $.map(result, function(element) {
return $(element).attr("id");
});
return columns.join("|");
}
} );
<!DOCTYPE html>
<html>
<head>
<link data-require="datatables#1.10.12" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="datatables#1.10.12" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<style>
.circle{
color:blue;
}
</style>
<form action="" name="quiz" id="quiz_form" method="post">
<table id="example" class="table table-bordered">
<thead style="font-size:20px">
<tr>
<th rowspan="2">Nomor</th>
<th colspan="4"><center>Test</center></th>
</tr>
<tr>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
<th style="display: none;"></th>
</tr>
</thead>
<tbody style="font-size:18px">
<tr class="checklisttr" id="1">
<td align="left" width="40%"><br>
<label for="veryiii" style="align:left;">1</label>
</td>
<td align="center" width="12%">
<input type="radio" id="vii1" name="om" value="4.5" class="circle">Good
</td>
<td align="center" width="12%">
<input type="radio" id="veryiii1" name="om" value="3.0" class="circle"> Noermal
</td>
<td align="center" width="12%">
<input type="radio" id="viv1" name="om" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%">
<input type="radio" id="veryv1" name="om" value="1.0" class="circle">Verry Bad
</td>
</tr>
<tr class="checklisttr" id="2">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">2</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om1" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om1" value="3.0" class="circle">Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om1" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om1" value="1.0" class="circle">Very Bad
</td>
</tr>
<tr class="checklisttr" id="3">
<td align="left" width="40%">
<label for="veryiii" style="align:left;">3</label>
</td>
<td align="center" width="12%"><br>
<input type="radio" id="vii1" name="om2" value="4.5" class="circle">Good
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryiii1" name="om2" value="3.0" class="circle"> Normal
</td>
<td align="center" width="12%"><br>
<input type="radio" id="viv1" name="om2" value="1.5" class="circle">Bad
</td>
<td align="center" width="12%"><br>
<input type="radio" id="veryv1" name="om2" value="1.0" class="circle">Very Bad
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<button type="submit" id="save" class="btn btn-warning"><i class="icon-pencil5"></i> Done</button>
</div>
</form>
</body>
</html>
if you trying to answear the questions and click done why the answear just show the last data?
i just want to get all value and why if i go to next page for answear the next question and i submit form why he not show all the value, so how to get all data after answear all the question?? thanks

Copy button not working on HTML template

Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

How can I only allow certain domains in email field?

Is it possibly to restrict sign up to only one domain like user#gmail.com? Here is my HTML page so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/umfiles/style.css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
<title>User Signup</title>
</head>
<script type="text/javascript" src="/umfiles/general.js"></script>
<body>
<form name="signup" action="" method="post"
onsubmit="return checkSignupForm()">
<input type="hidden" name="signup" value="start" />
<div id="cntr_container">
<table id="cntr_conttable">
<tr>
<td id="cntr_conttd">
<div id="cntr_continner">
<div class="shadow">
<div class="shadow-inner">
<div class="shadow-cnt">
<div id="cntr_logo">
<img src="/umfiles/logo.gif" alt="Mikrotik" />
<p id="logo_title">TITLE</p>
</div>
<table class="cntr_tbl">
<tr>
<td align="right">
email
</td>
<td align="left">
<input type="text" id="sf_email" name="email"
class="signup" value="$(email)" maxlength="100"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
phone
</td>
<td align="left">
<input type="text" id="sf_phone" name="phone"
class="signup" value="" maxlength="100"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
login
</td>
<td align="left">
<input type="text"
name="login" id="sf_user" maxlength="100"
value="$(login)" class="signup"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
password
</td>
<td align="left">
<input type="password" name="password" id="sf_pwd"
class="signup" maxlength="50">
</td>
</tr>
<tr>
<td align="right">
confirm password
</td>
<td align="left">
<input type="password" name="confirm_password" id="sf_cnf_pwd"
class="signup" maxlength="50">
</td>
</tr>
<tr class="top">
<td align="right">
<br />
<b>Prepaid time</b>
</td>
</tr>
<tr class="top">
<td align="right">
time (price)
</td>
<td align="left">
$(profiles)
</td>
</tr>
<tr class="top" id="method_row">
<td align="right">
pay with
</td>
<td align="left">
$(methods)
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="btn_signup" id="btn_signup" value="Sign up">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p class="signuperror">$(error)</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</form>
<script language="JavaScript">
<!--
if (document.signup && document.signup.user) document.signup.user.focus();
function checkSignupForm() {
if (!checkEmail("sf_email")) return false;
if (!checkMinLen("sf_user", "Login", 3)) return false;
if (!checkMinLen("sf_pwd", "Password", 5)) return false;
if (!checkAreEqual("sf_pwd", "sf_cnf_pwd", "Passwords differ")) return false;
return true;
}
-->
</script>
</body>
I believe the part that needs looked at is the bottom javascript section. I apologize for the question, but this got thrown onto me and I know nothing about html and/or javascript.
Thanks in Advance!

How can I hide/show a form when a button is clicked using javascript?

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.
<!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>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database</li>
<li>Company Presence</li>
<li>Company Promotion</li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>

You can target the form using id and add remove class to show hide the form.
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:
function hide(id) {
var el = document.getElementById(id);
if (el && el.classList) {
el.classList.toggle('hidden');
}
}
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>
</body>
* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

how about this... ??
function showHide() {
var button = document.getElementById("butt");
var hiddeninput = document.getElementsByClassName("hidden");
var form1 = document.getElementById("form1");
if (form1 && form1.style.display=="none") {
form1.style.display = "block";
} else {
form1.style.display = "none";
}
}
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database
</li>
<li>Company Presence
</li>
<li>Company Promotion
</li>
</ul>
</div>
<!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u>
</p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" style="display: none;">
<p align="left"><u><strong>Add Employer Detail</strong></u>
</p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong>
</td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>First Name </strong>
</td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>Last Name</strong>
</td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Position</strong>
</td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Sector</strong>
</td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Company Name</strong>
</td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Country</strong>
</td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Email</strong>
</td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Phone</strong>
</td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Action</strong>
</td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer" />
<input name="clear" type="button" value="Clear" />
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>

You can use jQuery for that.
For hiding do that in the onClick event on the button.
$( ".target" ).hide();
For showing
$( ".target" ).show();

Validate text boxes created dynamically having unique ids and names using jQuery validate

I am using jQuery for creating multiple text fields on button click. It is working fine. Now I need to validate all test boxes.
This is my HTML 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" />
<title>Patient Portal</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <![endif]-->
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script type="text/javascript" language="javascript" src="js/basicnifo.js"></script>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/datepicker2.js"></script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
<tr>
<td valign="top" class="m4">
<form action="#" method="post" name="reg" id="reg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="m12">
<table width="100%" border="0" cellspacing="1" cellpadding="2" id="items">
<thead>
<tr>
<td colspan="7" align="center" bgcolor="#62a3e0" style="width:15%;"><strong>Problem List</strong></td>
</tr>
<tr>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Problem</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Status</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Active Date</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" tabindex="1" name="Problem1" id="Problem1" class="m16 autocomplete" value="" /></td>
<td bgcolor="#F5F5F5" style="width:15%;"><select name="Status1" id="Status1" class="drop2" tabindex="1" >
<option value="1" selected="selected">active</option>
<option value="2">in-active</option>
</select></td>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date1" id="Date1" class="m16 datepick" tabindex="1" value=""/></td>
<input type="hidden" name="patientProblemsid1" id="patientProblemsid1" class="m16" value="0"/>
<input type="hidden" name="sSaved" id="sSaved" value="null" class="m10" />
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
<input type="button" name="update" id="update" value="ADD ROW" tabindex="10" class="bt-press add_more" onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" /></td>
</tr>
<tr>
<td colspan="5" align="right">
<input type="submit" name="button" id="SAVE" value="SAVE" class="bt-press" tabindex="50" onmouseover="changeBgImage('images/button-bg2.png', 'SAVE')" onmouseout="changeBgImage('images/button-bg.png', 'SAVE')" />
<input type="submit" name="button" id="NEXT" value="NEXT" class="bt-press" tabindex="51" onmouseover="changeBgImage('images/button-bg2.png', 'NEXT')" onmouseout="changeBgImage('images/button-bg.png', 'NEXT')" /></td>
</tr>
</tfoot>
<input type="hidden" name="item_count" id="item_count" value="1" />
<input type="hidden" name="page" value="patienthistory" class="m10" />
<input type="hidden" name="Cliinicid" value="" class="m10" />
</table>
</div></td>
</tr>
</table>
</form>
<div class="m7"> <br />
</div>
</td>
</tr>
</table>
</body>
</html>
And this is my JavaScript part for adding text boxes on button click:
<script>
$(".add_more").click(function(event){
event.preventDefault();
var count = $("#item_count").val();
count = parseInt(count);
//alert(count);
var new_count = count +1;
// alert(new_count);
// $(".delete_link").remove();
var html = '<tr>\
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Problem'+new_count+'" id="Problem'+new_count+'" tabindex="11" class="m16 autocomplete" value="" /></td> \
<td width="15%" bgcolor="#F5F5F5" style="width:15%;"><select name="Status'+new_count+'"id="Status'+new_count+'" tabindex="11" class="drop2 ">\
<option value="1" selected="selected"> active</option><option value="2">inactive</option>\
</select></td> \
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date'+new_count+'" id="Date'+new_count+'" tabindex="11" class="m16 datepicker" value="" /></td> \
</tr>';
var $html = $(html);
var $ht = $html.find('input.datepicker')[0];
$($ht).datepicker({dateFormat:"mm-dd-yy"});
$('#items > tbody:last').append($html);
$("#item_count").val(new_count);
});
</script>
I need to validate all text boxes. Thanks in advance.

.validate() Will help you to validate your form elements with use of ID or class of a form.
You please follow the following URL to get validation for your script:
http://jqueryvalidation.org/validate/

In your validation script validate each input type text field using same class name like.
$("#SAVE").click(function(){ $(".m16").each(function(){
var values=this.value;
if(values.length<1)
{
alert("Text box empty");
}
});
});

Categories