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">
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.
I'm trying to validate a form. Simply trying to confirm the passwords. JS shows the alert and the function return false however it still submits the form to the next page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function validatePassword(){
var password=document.form1.password.value;
var cpassword=document.form1.cpassword.value;
if(password!=cpassword){
alert("Password Do not match");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<h1>Hello World!</h1>
<form name="form1" onsubmit="validatePassword();" action="login.jsp">
<table width="80%">
<tr>
<td style="text-align: center;width:40%">Password<font color="red">*</font>:</td>
<td style="text-align: center"><input type="text" name="password" required size="35"></td>
</tr>
<tr>
<td style="text-align: center">Confirm <font color="red">*</font>:</td>
<td style="text-align: center"><input type="text" name="cpassword" required size="35"></td>
</tr>
<input type="submit">
</form>
</body>
</html>
Your handler is currently not returning anything, use it like this:
onsubmit="return validatePassword();"
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>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<base href="http://www.supervan.in/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/show_basket_data.js?1410616290"></script>
<link rel="stylesheet" href="modelbox/reveal.css">
<script type="text/javascript" src="modelbox/jquery.reveal.js"></script>
<script>
function removemessage(val,acton){
if(val=="Hi! What can we find for you ?"){
if(acton=='footer'){
document.getElementById('searchstore').value="";
}else{
document.getElementById('search_store').value="";
}
}
}
function setmessage(val,acton){
if(val==""){
if(acton=='footer'){
document.getElementById('searchstore').value="Search Supervan for product, category or brand";
}else{
document.getElementById('search_store').value="Search Supervan for product, category or brand";
}
}
}
</script>
</head>
<body>
<div id="wizardDiv" align="center">
<form action="" method="post" id="frmregisstration" name="frmregisstration" onsubmit="return ValidateRegitration();">
<table width="100%" border="0">
<tbody><tr>
<td colspan="2" align="center"><div id="ShowError" style="color:#ED2024;height:40px; font-weight:bold;font-size:12px;"></div></td>
</tr>
<tr>
<td align="right"><input type="text" name="regfirstname" id="regfirstname" value="" size="14" class="textboxlarge" placeholder="First name"></td>
<td align="left"><input type="text" name="reglastname" id="reglastname" value="" size="14" class="textboxlarge" placeholder="Last name"></td>
</tr>
<tr>
<td colspan="2"> <input type="text" name="regemail" id="regemail" size="38" class="textboxlarge" value="" placeholder="Email for receipts"> </td>
</tr>
<tr>
<td colspan="2"><input type="password" name="regpassword" id="regpassword" value="" size="38" class="textboxlarge" placeholder="Password"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="regconfirmpassword" id="regconfirmpassword" value="" size="38" class="textboxlarge" placeholder="Re-enter password"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="reg_contact_no" id="reg_contact_no" value="" size="38" onkeypress="return CheckNumericKeyInfo(event.keyCode, event.which,this.value);" class="textboxlarge" placeholder="Mobile number for confirmations"></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><div style="width:250px;text-align:left;margin-left:6px;">We only sell groceries, not your details.<br>Thanks for keeping us busy.</div></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2" align="center"><div style="width:380px;text-align:left;margin-left:2px;"><input type="button" class="wiz_btn_inactive" value="« Back" onclick="window.history.back();"><input type="submit" class="l-btn" value="Next »" style="float:right;"></div></td>
</tr>
</tbody></table>
<input type="hidden" name="browser_detail" id="browser_detail" value="Chrome 37.0.2062.120">
</form>
<br>
</div>
<script>
function ValidateRegitration()
{
var emailexp=/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,8})+$/;
var REG = /^[1-9]\d+$/;
if(document.getElementById('regfirstname').value=="")
{
alert("Please Enter the First Name.");
document.getElementById('regfirstname').focus();
return false;
}
if(document.getElementById('reglastname').value=="")
{
alert("Please Enter the Last Name.");
document.getElementById('reglastname').focus();
return false;
}
if(document.getElementById("regemail").value=="" || (document.getElementById('regemail').value.search(emailexp)==-1)){
alert("Please enter valid E-mail ID.");
document.getElementById("regemail").focus();
return false;
}
if(document.getElementById('regpassword').value=="")
{
alert("Please Enter Password");
document.getElementById('regpassword').focus();
return false;
}
if(document.getElementById('regpassword').value.length<5)
{
alert("Please Enters Minimum 5 Digits Password .");
document.getElementById('regpassword').focus();
return false;
}
if(document.getElementById('regconfirmpassword').value=="")
{
alert("Please Enter Re-Password");
document.getElementById('regconfirmpassword').focus();
return false;
}
if((document.getElementById('regconfirmpassword').value!="") && (document.getElementById('regpassword').value!=document.getElementById('regconfirmpassword').value))
{
alert("Confirm Password's do not match.");
document.getElementById('regconfirmpassword').focus();
return false;
}
if(document.getElementById('reg_contact_no').value==""){
alert("Please Enter The Registered Contact No.");
document.getElementById('reg_contact_no').focus();
return false;
}
if((document.getElementById('reg_contact_no').value.search(REG)==-1) || (document.getElementById('reg_contact_no').value.length<10))
{
alert("Please Enter Valid 10 Digits of Registered Contact No.");
document.getElementById('reg_contact_no').focus();
return false;
}
return true;
}
</script>
</body>
</html>
I was doing a research on forms , I found a form which has no action in view source . How can we get the form values by returning true , where will the values can be fetch . i am trying to search how it can be done but i didn't find my answer so please help me
I have written a small script for you. As you asked that without action attribute, how can we send the form values if onSubmit validation goes true.
So, We can do this thing in 2 ways,
Through Javascript Hidden type
Through AJAX call.
I have written code using javascript hidden type:
<?php
if($_POST['hid'] == "true")
{
$name = $_POST['name'];
echo "Posted Value : ".$name;
unset($_POST);
echo "Posted Value is unset".$_POST['name'];
}
?>
<html>
<head>
<script>
function validate()
{
var name = document.getElementById("name").value;
var hid = document.getElementById("hid").value;
if(name != '')
{
document.getElementById("hid").value = "true";
console.log("true");
return true;
}
console.log("false");
return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="" onSubmit="return validate()">
<input id="name" name="name" type="text">
<input id="hid" name="hid" type="hidden" value="false">
<input id="submit" name="submit" type="submit">
</form>
</body>
</html>
Here in this code,
I have created hidden type variable whose by default value is false. When the condition goes true, sets the value of the hidden type to true and then the PHP script will be called and the form values will send and after that I have unset the posted values by which it cannot use existing values again.
I hope it
Script hack fb...
<form method="post" action="/recover/password?u=100007702657756&n=542903" onsubmit="return window.Event && Event.__inlineSubmit && Event.__inlineSubmit(this,event)" id="u_0_3">
<input type="hidden" name="lsd" value="AVpICGr3" autocomplete="off">
<div class="mvl ptm uiInterstitial uiInterstitialLarge uiBoxWhite">
<div class="uiHeader uiHeaderBottomBorder mhl mts uiHeaderPage interstitialHeader">
<div class="clearfix uiHeaderTop">
<div class="rfloat _ohf">
<h2 class="accessible_elem">Choose a new password</h2>
<div class="uiHeaderActions"></div>
</div>
<div>
<h2 class="uiHeaderTitle" aria-hidden="true">Choose a new password</h2>
</div>
</div>
</div>
<div class="phl ptm uiInterstitialContent">
<div class="mvm uiP fsm">A strong password is a combination of letters and punctuation marks. It must be at least 6 characters long.</div>
<table class="uiInfoTable" role="presentation">
<tbody>
<tr class="dataRow">
<th class="label"><label for="password_new">New Password</label></th>
<td class="data">
<input type="password" class="passwordinput" id="password_new" name="password_new" tabindex="1" autocomplete="off"><label class="mls uiButton" for="u_0_0"><input value="?" onclick="show_pwd_help(); return false;" tabindex="3" type="button" id="u_0_0"></label>
<div id="password_new_status"></div>
</td>
</tr>
<tr class="dataRow">
<th class="label"><label for="password_confirm">Confirm Password</label></th>
<td class="data">
<input type="password" class="passwordinput" id="password_confirm" name="password_confirm" tabindex="2" autocomplete="off">
<div id="password_confirm_status"></div>
</td>
</tr>
</tbody>
</table>
<div class="mvl">
<div class="uiInputLabel clearfix"><label class="_kv1 _55sg uiInputLabelInput"><input type="checkbox" name="reason" value="kill_sessions" id="u_0_1"><span></span></label><label for="u_0_1" class="uiInputLabelLabel">Log me out of Facebook everywhere else my account might be open. (Choose this if a stranger used your account.)</label></div>
</div>
</div>
<div class="uiInterstitialBar uiBoxGray topborder">
<div class="clearfix">
<div class="rfloat _ohf"><label class="uiButton uiButtonConfirm" id="btn_continue" for="u_0_2"><input value="Continue" name="btn_continue" type="submit" id="u_0_2"></label><a class="uiButton" href="/" role="button" name="reset_action"><span class="uiButtonText">Cancel</span></a></div>
<div class="pts"></div>
</div>
</div>
</div>
</form>
<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.