I tried to add a reset button and submit button, to a form which includes tables, but they do not work
here's the code:
<forms name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</forms>
Please using Form tag instead of forms, Refer here
<form name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</form>
I re-created your example by using Event Handlers with Javascript (JQuery).
If you do not want to use Javascript then please feel free to use #Shivasagar example.
Here is my snippet:
// Adding event listener on the reset button
$('input[name="reset"]').click(function(event) {
// Then setting the values of the form to nothing
$('input[name="name"]').val('');
$('input[name="age"]').val('');
$('input[name="email"]').val('');
$('select[name="newsType"]').val('None');
$('textarea[name="comments"]').val('');
});
// Prevent submit from submiting
$('input[name="submit"]').click(function(event) {
event.preventDefault();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<form id="f1">
<table class="table table-responsive">
<tbody>
<tr>
<td>Name:</td>
<td><input class="form-control" type="text" name="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input class="form-control" type="text" name="age"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="form-control" type="text" name="email"></td>
</tr>
<tr>
<td>News Type:</td>
<td>
<select class="form-control" name="newsType">
<option value="None" style="display: none;" selected> -- select an option -- </option>
<option value="Tech">Tech</option>
<option value="Gaming">Gaming</option>
<option value="Homepage">Homepage</option>
<option value="Stocks">Stocks</option>
<option value="Sports">Sports</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="50" rows="5" placeholder="Give Feedback" name="comments"></textarea></td>
</tr>
<tr>
<td><input class="btn btn-light float-left" type="button" value="Reset" name="reset"></td>
<td><input class="btn btn-light float-right" type="submit" value="Submit" name="submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Related
I am new with servlets. I have created MySQL database. User will upload file(or more than one files). Then automatically mail should be send to respective user who will upload file. please suggest me how to do this?. I have read about JAVA Mail API but I don't know how to use it. Is there any other way to do it? please suggest.
Note:- I don't want to send an email to one user. I want to send mail to that user who will upload file.
This is index.jsp page that I have created.
<form action="UploadServletClass" method="post" enctype="multipart/form-data">
<center>
<h1>Welcome to Document Management System...</h1>
</center>
<table width="400px" align="center" border="2">
<tr>
<td align="center" colspan="2">Form Details</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input list="firstnamelist" required="" name="firstname" />
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input list="lastnamelist" required="" name="lastname" />
</td>
</tr>
<tr>
<td>Division</td>
<td>
<input type="text" required="" name="division" />
</td>
</tr>
<tr>
<td>Reporting Unit</td>
<td>
<input type="text" required="" name="reportingunit" />
</td>
</tr>
<tr>
<td>Document Number</td>
<td>
<input type="text" required="" name="documentnumber" />
</td>
</tr>
<tr>
<td>Document Name</td>
<td>
<input type="text" required="" name="documentname" />
</td>
</tr>
<tr>
<td>Document Uploader</td>
<td>
<input type="text" required="" name="documentuploader" />
</td>
</tr>
<tr>
<td>Document Owner</td>
<td>
<input type="text" required="" name="documentowner" />
</td>
</tr>
<tr>
<td>Document Type</td>
<td>
<select name="Document_Type">
<option value="Agreement">Agreement</option>
<option value="Contract">Contract</option>
<option value="PO">PO</option>
<option value="Invoice">Invoice</option>
<option value="COA">COA</option>
<option value="Lease Deed">Lease Deed</option>
<option value="AMC">AMC</option>
<option value="Direct Material">Direct Material</option>
<option value="Indirect Material/Services">Indirect Material/Services</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Document Category</td>
<td>
<select name="Document_Category">
<option value="Customer">Customer</option>
<option value="Vendor">Vendor</option>
<option value="Internal">Internal</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Mail id</td>
<td>
<input type="email" required="" name="mailid" />
</td>
</tr>
<tr>
<td>Select File</td>
<td>
<input type="file" name="fileName" multiple="multiple" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" name="Submit" />
</td>
</tr>
</table>
</form>
I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..
Only in Html for JSP and servlets. I have two checkbox there with two options "Yes" and "No". If, 'yes' enable all text inputs below it. if 'no' disable. This is my JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="RegiPageDesign.css">
<title>Registration Page</title>
</head>
<body>
<div><h1>Please Provide the Following Details:</h1></div>
<form action="Servlet1" method="POST">
<table border="0">
<tbody>
<tr>
<td style="color: black">Vehicle Owners Name:</td>
<td><input type="text" name="vowner" value="" size="20" placeholder="e.g John Van Wyk"/></td>
</tr>
<tr>
<td style="color: black">Vehicle Drivers Name:</td>
<td><input type="text" name="vdriver" value="" size="20" placeholder="e.g Matheus Malima" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Registration Number:</td>
<td><input type="text" name="vreginumber" value="" size="20" placeholder="e.g N 168-1258 W" /></td>
</tr>
<tr>
<td style="color: black">NABTA ID:</td>
<td><input type="text" name="nabtaId" value="" size="20" placeholder="e.g NABTA685" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Type:</td>
<td><select name="vtype">
<option>Bus</option>
<option>Minibus</option>
<option>Taxi</option>
</select></td>
</tr>
<tr>
<td style="color: black">Vehicle Model:</td>
<td><input type="text" name="vmodel" value="" size="10" placeholder="e.g 2010" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Mass:</td>
<td><input type="text" name="vmass" value="" placeholder="e.g 1.3 Tons" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Color:</td>
<td><select name="colors">
<option>White</option>
<option>Silver</option>
<option>Red</option>
<option>Black</option>
<option>Blue</option>
</select></td>
</tr>
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" />Yes<br>
<input type="checkbox" name="boo" value="" />No<br>
</td>
</tr>
<tr>
<td style="color: black">How Many Times: </td>
<td><input type="text" name="number" value="" placeholder="Number(s)"/></td>
</tr>
<tr>
<td style="color: black">Cause of Accidents:</td>
<td><input type="text" name="vaccident" value="" placeholder="e.g Drunk Driving" /></td>
</tr>
<tr>
<td style="color: black">Date and Place of Accident:</td>
<div2><td><input type="date" name="adate" value="" placeholder="DD-MM-YY" /></div2>
<input type="text" name="regions" value="" placeholder="e.g Windhoek, Rehoboth" />
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> <input type="reset" value="Clear" />
<input type="submit" value="Next" /></p>
<input type="button" value="Back" name="back"/>
</body>
</form>
</html>
It can be easily done by jQuery(Add this library to your header part), check the following script.
$('input[name=boo]').change(function(){
if(this.value=="yes"){
$(".accident").prop('disabled', false);
} else {
$(".accident").prop('disabled', true);
}
});
I assume that yes or no should be radio, since both cannot happen at the time ;) . See the live demo of working copy. Hope it helps.
Ok, this solution is do based on your title.
add javascript before <body>
<head>
<script language="Javascript">
function change()
{
var element = document.getElementById('textfieldID'); //depend which text field you wanted to disabled then add ID attribute for that textfield
var array = [];
while(element)
{
array.push(element);
element.id = 'textfieldID' + '-processed';
element = document.getElementById('textfieldID');
}
for(var i = 0; i < array.length; i++)
{
array[i].id = 'textfieldID';
if(document.mainform.boo.checked == true)
array[i].disabled=true;
else
array[i].disabled=false;
}
}
</script>
</head>
add onchange function for your checkbox
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" onchange="change();/>Yes<br>
<input type="checkbox" name="boo" value="" onchange="change();/>No<br>
</td>
</tr>
if you wanted to disabled all your input textfields when checkbox is checked. Then add all the same ID="" attribute in your input textfields. Hope it helps
//employeeForm.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Employee Information</title>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<link href="EmployeeFormStyle.css" type="text/css" rel="stylesheet"/>
<script src="EmployeeModuleBase.js" type="text/javascript"></script>
</head>
<body class="body">
<h3 class="header">Employee Information</h3>
<form class="form" method="post" id="employeeInfoForm" name="employeeInfo" action="ProcessEmployeeInfo.php">
<table>
<tbody>
<tr>
<td><label for="fname">First Name:</label></td>
<td id="eftd_1"><input id="FirstName" name="FirstName" type="text"/></td>
<td id="validatortxt_1" class="red-text"></td>
</tr>
<tr>
<td><label for="surname">Surname:</label></td>
<td id="eftd_2"><input id="Surname" name="Surname" type="text"/></td>
<td id="validatortxt_2" class="red-text"></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td id="eftd_3">
<select name="Gender" id="Gender">
<option></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
<td id="validatortxt_3" class="red-text"></td>
</tr>
<tr>
<td><label for="Title">Title:</label></td>
<td id="eftd_4">
<select name="Title" id="Title">
<option></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
</select>
</td>
<td id="validatortxt_4" class="red-text"></td>
</tr>
<tr>
<td><label for="ID No">ID No.:</label></td>
<td id="eftd_5"><input id="IDNo" name="IDNo" type="text" maxlength="13"/></td>
<td id="validatortxt_5" class="red-text"></td>
</tr>
<tr>
<td><label for="mobileNumber">Mobile Number:</label></td>
<td id="eftd_6"><input id="MobileNumber" name="MobileNumber" type="text" maxlength="12"/></td>
<td id="validatortxt_6" class="red-text"></td>
</tr>
<tr>
<td><label for="email">Email Address:</label></td>
<td id="eftd_7"><input id="EmailAddress" name="EmailAddress" type="text"/></td>
<td id="validatortxt_7" class="red-text"></td>
</tr>
<tr>
<td><label for= "address">Address:</label></td>
<td id="eftd_8"><input id="AddressLine1" name="AddressLine1" type="text"/></td>
<td id="validatortxt_8" class="red-text"></td>
</tr>
<tr>
<td></td>
<td id="eftd_9"><input id="AddressLine2" name="AddressLine2" type="text" size=30/></td>
<td id="validatortxt_9" class="red-text"></td>
</tr>
<tr>
<td></td>
<td id="eftd_10"><input id="AddressLine3" name="AddressLine3" type="text" size=30/></td>
<td id="validatortxt_10" class="red-text"></td>
</tr>
<tr>
<td><label for="location">Location:</label></td>
<td id="eftd_11">
<select name="Location" id="Location">
<option></option>
<option value="Sebokeng">Sebokeng</option>
<option value="Sharpville">Sharpville</option>
<option value="Evaton">Evaton</option>
<option value="Boipatong">Boipatong</option>
<option value="Bophelong">Bophelong</option>
<option value="Vanderbijlpark">Vanderbijlpark</option>
<option value="Vereeneging">Vereeneging</option>
</select>
</td>
<td id="validatortxt_11" class="red-text"></td>
</tr>
<tr>
<td><label for= "postalcode">Postal Code:</label></td>
<td id="eftd_12"><input id="PostalCode" name="PostalCode" type="text" maxlength="5"/></td>
<td id="validatortxt_12" class="red-text"></td>
</tr>
<tr>
<td> </td>
<td>
<input id="btnSubmit" class="butt" name="btnSubmit" value="Save" type="submit"/>
<input id="btnClear" class="butt" name="btnClear" value="Clear" type="submit"/>
</td>
<td> </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
EmployeeModuleBase.js
jQuery().ready(function ()
{
$('#employeeInfoForm').submit(function()
{
var postForm = true;
$(':input').each(function(index)
{
if ( $(this).val() == "" )
{
if ($(this).attr("id")!="EmailAddress")
{
$('#validatortxt_' + (index + 1).toString()).text(" *");
}
postForm = false;
}
else
{
$('#validatortxt_' + (index + 1).toString()).text("");
postForm = true;
}
});
return postForm;
});
};
basically what m trying to achieve is to validate the form using jquery code in external js file.but how does the form calls the jquery code in js external file...?
you append the ready method to the loading of jQuery
jQuery().ready(function ()
you should append the event to the document and not just to the jQuery itself. then it should load up when the document is ready to go and the DOM is there for the handler to append to.
jQuery(document).ready(function ()
In your external file, just have a plain 'old fashion' function. Then you can call it as needed (the function can use jQuery):
$(document).ready(DocReady);
function DocReady()
{
AssignClickToToggleButtons();
ColorCodeTextBoxes();
DoValidation();
}
Hi? I'm a university student of Korea,
and this semester I'm studying internet programming.
I made html, and I made tag.
However I think that there is problem in my tag.
In fact I hardly effort to find problem, but I cannot find that.
Experts!!!Please find the problem!!!!
This is my form tag.
<html>
<head></head>
<body>
<form name="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width=500 border=1>
<tr>
<td width=100>이름</td>
<td><input name="name" type="text" size="15"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" size="20" maxlength="15"></td>
</tr>
<tr>
<td>학번</td>
<td><input type="text" name="schoolnum" size="21"></td>
</tr>
<tr>
<td>전화번호</td>
<td><select name="fst">
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select> - <input name="sec" type="text" size="4" maxlength="4"> - <input name="trd" type="text" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>캠퍼스</td>
<td>
<input type="radio" name="campus" value="명륜">명륜
<input type="radio" name="campus" value="율전" checked>율전
</td>
</tr>
<tr>
<td>학년</td>
<td>
<input type="checkbox" name="year" value="1학년" checked>1학년
<input type="checkbox" name="year" value="2학년">2학년
<input type="checkbox" name="year" value="3학년">3학년
<input type="checkbox" name="year" value="4학년">4학년
<input type="checkbox" name="year" value="휴학">휴학
</td>
</tr>
<tr>
<td>고향</td>
<td><textarea name="고향" rows=3 cols=20>
</textarea>
</td>
</tr>
<tr>
<td>하고픈말</td>
<td><textarea name="intro" rows=3 cols=20></textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="button" value="안씁니다" disabled>
<input type="reset" value="다시작성">
<input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
You have not mentioned your problem exactly but I do find charset meta missing for the Korean language you are using on the form:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Interesting Resources:
What Beautiful HTML Code Looks Like
Fix Your Site With the Right DOCTYPE!
One thing that might be relevant is that you haven't specified either method="POST" or method="GET" in your form tag. Though if you're using $_REQUEST in your php it shouldn't matter either way.
Well, you didn't say what your code was doing wrong or what you expected but didn't get... but...
Go to:
http://validator.w3.org/#validate_by_input
and paste your code in there. It turns out the <head> element cannot be empty. Don't just take my revision below, you really should read the output of the Validator to understand what kind of changes needed to be made in order to achieve valid HTML.
Here is valid code that should work:
<!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>
hello
</title>
</head>
<body>
<form id="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width="500" border="1">
<tr>
<td width="100">
이름
</td>
<td>
<input name="name" type="text" size="15" />
</td>
</tr>
<tr>
<td>
비밀번호
</td>
<td>
<input type="password" name="password" size="20" maxlength="15" />
</td>
</tr>
<tr>
<td>
학번
</td>
<td>
<input type="text" name="schoolnum" size="21" />
</td>
</tr>
<tr>
<td>
전화번호
</td>
<td>
<select name="fst">
<option value="010" selected="selected">
010
</option>
<option value="011">
011
</option>
<option value="016">
016
</option>
<option value="017">
017
</option>
<option value="018">
018
</option>
<option value="019">
019
</option>
</select> - <input name="sec" type="text" size="4" maxlength="4" />- <input name="trd" type="text" size="4" maxlength="4" />
</td>
</tr>
<tr>
<td>
캠퍼스
</td>
<td>
<input type="radio" name="campus" value="명륜" />명륜 <input type="radio" name="campus" value="율전" checked="checked" />율전
</td>
</tr>
<tr>
<td>
학년
</td>
<td>
<input type="checkbox" name="year" value="1학년" checked="checked" />1학년 <input type="checkbox" name="year" value="2학년" />2학년 <input type="checkbox" name="year" value="3학년" />3학년 <input type="checkbox" name="year" value="4학년" />4학년 <input type="checkbox" name="year" value="휴학" />휴학
</td>
</tr>
<tr>
<td>
고향
</td>
<td>
<textarea name="고향" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td>
하고픈말
</td>
<td>
<textarea name="intro" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="안씁니다" disabled="disabled" /><input type="reset" value="다시작성" /><input type="submit" value="등록" />
</td>
</tr>
</table>
</form>
<p>
html form ta
</p>
</body>
</html>
Note that in the <html> tag, it specifies English as the language. I suspect that is not the correct language, but you can fix that yourself once you get everything else working.
Good luck with your studies.