<html>
<title>adsfasdf</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript">
function editDates()
{
var dates = prompt("Fill in date(s) of absence", "Example: Travel 1/7 - 2/10");
}
</script>
</head>
<body bgcolor="#000088">
<table cellspacing="0" border="1" cellpadding="1" width="100%" height="100%">
<tr>
<td>name</td><td>
<form class="r1c1" method="link" action="index.html" onClick="editDates();">
<input type="button" name="submit" value="Edit"/></form>
</td>
</tr>
</table>
</body>
this:
<script type=type="text/javascript">
should be:
<script type="text/javascript">
Example: http://jsfiddle.net/hDpyN/
try:
<input type="button" name="submit" value="Edit" onClick="editDates();"/>
you can change the onClick to onSubmit in the form tag:
<form class="r1c1" method="link" action="index.html" onSubmit="editDates();">
and change the input to type submit
<input type="submit" name="submit" value="Edit"/>
Here is an example with the changes above: JSFiddle
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>asdfasdf</title>
</head>
<body bgcolor="#000088">
<script type="text/javascript">
function editDates()
{
var dates = prompt("Fill in date(s) of absence", "Example: Travel 1/7 - 2/10");
}
</script>
<table cellspacing="0" border="1" cellpadding="1" width="100%" height="100%">
<tr>
<td>name</td><td>
<form class="r1c1" method="link" action="index.html" >
<input type="button" name="submit" value="Edit" onclick="editDates();" />
</form>
</td>
</tr></table>
</body>
</html>
You need to use either onsubmit in the form or onclick in the button.
Related
I'm trying a little page with a HTML form and inside it, jQuery adds file fields having the name appended with [] so the PHP target receives it as array of files. But the PHP isn't receiving the files.
A sample:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#deps").before("<tr id=\"dependency\"><td>Dependency:</td><td><input type=\"file\" name=\"deps[]\" /></td></tr>");
});
$("#rem").click(function() {
$("#dependency").remove();
});
});
</script>
<table>
<tr>
<td>
<button id="add">+ Dependency</button>
</td>
<td>
<button id="rem">- Dependency</button>
</td>
</tr>
<form method="POST" enctype="multipart/form-data" action="target.php">
<tr id="deps">
<td></td>
<td><input type="submit" name="submit" value="send" /></td>
</tr>
</form>
</table>
In target.php:
$deps = $_FILES['deps'];
But no files are sent. What should i do?
Wrapping the table in a form is part of the problem, however you have other issues that will come up. The below code solves those. A button's default state is submit, and you can't have multiple objects with the same id (hitting + dependency)
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#add").click(function() {
$("#deps").before("<tr><td>Dependency:</td><td><input type='file' name='deps[]' /><button type='button' class='rem'>- Dependency</button></td></tr>");
});
$(document).on("click",".rem",function() {
$(this).parents("tr").remove();
});
});
</script>
<form method="POST" enctype="multipart/form-data" action="target.php">
<table>
<tr>
<td>
<button type="button" id="add">+ Dependency</button>
</td>
<td>
</td>
</tr>
<tr id="deps">
<td></td>
<td><input type="submit" name="submit" value="send" /></td>
</tr>
</table>
</form>
</body>
</html>
Thank you guys. Ditched all the table thing just in case and now it works.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="target.php">
<p>Course Name: <input type='text' name='courseName' /></p>
<p>Resource: <input type='file' name='file' /></p>
<p>Dependencies: <button type='button' id='add'>+</button></p>
<div id="deps">
<p><input type="submit" name="submit" value="send" /></p>
</div>
</form>
</body>
</html>
scrtipt.js is:
$(document).ready(function() {
$("#add").click(function() {
$("#deps").prepend("<p><input type='file' name='deps[]' /><button type='button' class='rem'>- </button></p>");
});
$(document).on("click",".rem",function() {
$(this).parents("p").remove();
});
});
Basicaly changed imvain2's code.
My Requirement Description :: I am designing a webapp in JAVA which interacts with the DB (MySQL) and registers an employee, updates the employee information, query an employee with employee id and removes a record. In the backend I am using Hibernate framework.
So I should have 4 buttons in my webpage :
Add Employee
Update Employee
Remove Employee
Query Employee
On clicking "Add Employee" it should request the user for some info like employee id, name etc. And other 3 buttons should be on hidden mode.
Same case on clicking other buttons also.
My Problem :: I have designed my Webpage, how ever when I am clicking on any of the button, nothing is getting displayed. I am not sure where is the problem.
I have limited knowledge with JSP and CSS.
Please let me know where I am doing wrong and help me out in this situation
Here is my JSP code :
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employee Registration</title>
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv {
overflow-y: scroll;
background: #FBFBFB;
max-height: 220px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jquery-ui-1.10.3/css/ui-lightness/jquery-ui-1.10.3.custom.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/js/jqGrid/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/button.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/design.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jquery.gritter.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/jsn.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/main.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s1.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/s2.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/style.css">
<link rel="stylesheet" type="text/css" href="/Employee/WebContent/css/somu.css">
<script type="text/javascript" src="/Employee/WebContent/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/Employee/WebContent/js/jqGrid/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
function display_ct() {
var strcount
var x = new Date()
var x1 = x.getHours() + ":" + x.getMinutes() + ":" + x.getSeconds();
document.getElementById("time_div").innerHTML = x1;
tt = display_c();
}
function display_c() {
var refresh = 1000; // Refresh rate in milli seconds
mytime = setTimeout('display_ct()', refresh)
}
function showDiv(element){
var type = element.value;
var effect = 'slide';
var options = {direction: "left"};
var duration = 500;
if (type == 'Employee Registration') {
alert("hi");
$('#id_register').show();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').hide();
alert("done");
}
else if (type == 'Employee Update'){
$('#id_register').hide();
$('#id_update').show();
$('#id_removal').hide();
$('#id_query').hide();
}
else if (type == 'Employee Removal'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').show();
$('#id_query').hide();
}
else if (type == 'Employee Query'){
$('#id_register').hide();
$('#id_update').hide();
$('#id_removal').hide();
$('#id_query').show();
}
}
</script>
</head>
<body onload=display_ct();>
<div class="Bitmap">
<img src="Images/online-employee-registration.jpg" style="height: 800px; width: 1355px; position: absolute; z-index: -1;" />
</div>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="center" width="800">
<b><font size="12"><label>Welcome to Employee Portal</label></font></b>
</td>
</tr>
</table>
<table width="1300" class="myTable">
<tr class="Labels">
<td align="right" width="200"><span id="time_div" class="clock2"></span></td>
</tr>
</table>
<center>
<form action="EmployeeRegistration" name="UserDetailsContract" method="post"
enctype="multipart/form-data" id="id_userDetailsContract">
<table>
<tr align="center">
<td>
<input value="Employee Registration"
type="button"
onclick="showDiv(this);" />
<input value="Employee Update"
type="button"
onclick="showDiv(this);" />
<input value="Employee Removal"
type="button"
onclick="showDiv(this);" />
<input value="Employee Query"
type="button"
onclick="showDiv(this);" />
</td>
</tr>
</table>
<div id="id_register" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Name:<td><input type="text" name="name"/></tr>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
<tr><td width="20%">Email ID:<td><input type="text" name="emailID"/></tr>
<tr><td width="20%">Phone:<td><input type="text" name="phone" size="30" /></tr>
<tr><td width="20%">City:<td><input type="text" name="city" size="30" /></tr>
</tbody>
</table>
<input type="submit" value="Register" />
</div>
<div id="id_query" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Search" />
</div>
<div id="id_update" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Update" />
</div>
<div id="id_removal" style="display: none">
<table cellpadding="3pt" align="center">
<tbody>
<tr><td width="20%">Employee ID:<td><input type="text" name="employeeID"/></tr>
</tbody>
</table>
<input type="submit" value="Remove" />
</div>
<!-- <p /> -->
</form>
</center>
</body>
</html>
I need some help. I want to convert this iframe into this textarea, so I can be able to write text in it. I try the below code, but it's not working.
Here are my code
$(document).ready(function () {
$(function () {
$("#richTextField").on("load", function () {
var str = $(this).contains().find('html').prop('outerHTML')
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/prof.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript"></script>
<script src="script/Working.js"></script>
</head>
<body onLoad="iFrameOn();">
<div id ="addtext" class="panel">
<form action="my_parse_file.php" name="myform" id="myform" method="post">
<!-- <div id="rte" contenteditable="true" unselectable="off">Write here ....</div>-->
<div id="menu">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
<textarea style="display:none;" name="rte" id="rte" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<br /><input name="myBtn" type="button" value="Submit Data" onClick="javascript:submit_form();"/>
</iframe>
</div>
</div>
</body>
</html>
I was hoping that some can help me.
I am trying to save form input into session variable using ColdFusion. I have tried many methods that I found posted on websites, but none of it is working on my code. Can anyone guide me on this?
Below is my full code.
<html>
<head>
<link rel="STYLESHEET" href="css/iesync2.css" type="text/css">
<link rel="STYLESHEET" href="css/iesync_style(awps).css" type="text/css">
<!--- <link rel="stylesheet" href="css/bootstrap-3.3.6-dist/js/jquery-ui-1.8.10.custom.css" /> --->
<link href="css/bootstrap-3.3.6-dist/js/bootstrap.min.css" rel="stylesheet">
<script src="css/bootstrap-3.3.6-dist/js/jquery-1.11.3.min.js"></script>
<!--- <script src="css/bootstrap-3.3.6-dist/js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/iesync_popup.js"></script> --->
<script language="javascript" src="css/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<cfoutput>
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
/*window.close();*/
}
}
</script>
</cfoutput>
</head>
<body>
<cfoutput>
<cfif structKeyExists(form,"submit")>
<cfset session.brandName = "#form.brandName#">
</cfif>
<center>
<div>
<form name="frmAddModel" action="" method="post" onSubmit="">
<br />
<table border="0" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td colspan="2" align="left" class="cssSubTitleC">Model</td>
</tr>
<tr class="cssLine2L">
<td align="left">Brand Code (optional)</td>
<td><input type="Text" name="brandcode" size="25" class="cssForm" maxlength="10"></td>
</tr>
<tr class="cssLine2L">
<td align="left" class="cssLine2L">Brand Name<font class="cssRequired">*</font></td>
<td><input type="Text" name="brandName" size="25" class="cssForm" maxlength="10"></td>
</tr>
</table>
<table border="0" width="50%" style="padding: 10px;">
<tr>
<td class="cssButtonLine" colspan="2">
<input type="button" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
</td>
</tr>
</table>
</form>
</div>
</center>
</cfoutput>
</body>
</html>
You are never submitting the form in your JavaScript. Add an id to your form and this $("#form-id").submit(); to your function and try again.
Add an id to your form:
<form name="frmAddModel" id="frmAddModel" action="" method="post" onSubmit="">
Then add this $("#frmAddModel").submit(); to your function:
<script language="JavaScript">
function check() {
var f = document.frmAddModel;
if (f.brandName.value.length == 0) {
alert("Please Insert Brand Name");
f.brandName.focus();
return;
} else if (f.brandName.value.length > 0){
$("##frmAddModel").submit();
/*window.close();*/
}
}
</script>
NOTE: you need to use double hash-tags ## because your JavaScript function is currently wrapped by cfoutput tags. Although that does not appear to be necessary as currently written.
Change field type from 'button' to 'submit':
<input type="submit" name="submit" class="btn btn-primary" onclick="check()" value= "Save">
When I click the button, I want append table horizontally instead of vertically
<html>
<head>
<title>Test</title>
<script language="javascript" src="emerchemie/jquery/jquery.js"></script>
<script language="javascript">
function genTbl(){
$('#maintd').append('<table width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3"> </td></tr></table>');
}
</script>
</head>
<body>
<input type="button" onClick="genTbl();" name="e" id="e" value="Submit">
<div style="display:inline" id="maintd"></div>
</body>
</html>
Please add style="float:left;" to your table in append method like this:-
$('#maintd').append('<table style="float:left;" width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3"> </td></tr></table>');
Try this..
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function genTbl()
{
$('#divResults').append('<table style="float:left;" width="500" border="1"><tr><td width="300"> Name</td><td width="150">Address</td></tr><tr><td colspan="3"> </td></tr></table>');
}
</script>
</head>
<body>
<div id="divResults">
</div>
<button onclick="genTbl()">submit</button>
</body>
</html>