On my web application I have a form with two <select>.
One represents the month and another the year.
<form id="reportform" target="_blank">
<table cellpadding="3" cellspacing="14">
<thead>
<th class="report" colspan="2"><spring:message code="label.month"/></th>
<th class="report" colspan="2"><spring:message code="label.year" /></th>
<th colspan="2"></th>
</thead>
<tbody>
<tr>
<td>
<input name="centerId" value="${center.centerId}" type="hidden">
</td>
<td class="date">
<select class="select-input-month-report" id="select-input-month" name="month">
<option selected="selected" value="0"><spring:message code="label.select" /></option>
<option value="1"><spring:message code="label.january" /></option>
<option value="2"><spring:message code="label.february" /></option>
<option value="3"><spring:message code="label.march" /></option>
<option value="4"><spring:message code="label.april" /></option>
<option value="5"><spring:message code="label.may" /></option>
<option value="6"><spring:message code="label.june" /></option>
<option value="7"><spring:message code="label.july" /></option>
<option value="8"><spring:message code="label.august" /></option>
<option value="9"><spring:message code="label.september" /></option>
<option value="10"><spring:message code="label.october" /></option>
<option value="11"><spring:message code="label.november" /></option>
<option value="12"><spring:message code="label.december" /></option>
</select>
</td>
<td></td>
<td class="date">
<select class="select-input-year-report" id="select-input-year" name="year">
<option value="0" selected="selected"><spring:message code="label.select" /></option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
<td align="right">
<input id="go" class="go" type="submit" value="Report">
</td>
</tr>
</tbody>
</table>
</form>
On server side PDF is generated (using iTextPdf) according to month and year selected on UI.
When month and year are correct PDF is generated properly but when user doesn't selects a correct month and year (one of them is zero) then I get an error in my back end.
I would like to check that month or year are different than 0 with javascript code and minimize changes in my #Controller. But I am not able to check values of month and year and call the back-end service using document.reportform.action.
#Controller
public class ReportController {
#RequestMapping(value="/report.pdf", method=RequestMethod.POST)
public ModelAndView getPdfReport(#ModelAttribute ReportRequest request) throws DAOException {
...
return mav;
}
}
I call to service like this:
$(function(){
$('form').submit(function(){
var zeros = checkDate();
if(zeros == '0'){
document.reportform.action = "/report.pdf";
}
});
});
function checkDate(){
var zeros = 0;
if(document.getElementById("select-input-month").value == 0){
zeros++;
}
if(document.getElementById("select-input-year").value == 0){
zeros++;
}
return zeros;
}
Help will be appreciated.
Update:
I get Javascript error: document.reportform.action = "/report.pdf" not defined.
<form id="reportform" target="_blank" method="post">
$(function(){
$('form').submit(function(e){
var zeros = checkDate();
if(zeros == '0'){
$(this).attr("action","/report.pdf");
}
else{
e.preventDefault();
alert('Select month and year');
}
});
});
Fiddle: http://jsfiddle.net/URfkN/1/
#Controller
public class ReportController {
#RequestMapping(value="/report.pdf", method=RequestMethod.POST)
public ModelAndView getPdfReport(#ModelAttribute ReportRequest request, HttpServletRequest httpRequest) throws DAOException {
String month = httpRequest.getParameter("month");
String year= httpRequest.getParameter("year");
....
return mav;
}
}
Using JQuery it is pretty simple:
$(function(){
$('form').submit(function(e){
e.preventDefault();
if($("#select-input-month").val()=='0' || $("#select-input-year").val()=='0')
{
document.reportform.action = "/report.pdf";
}
});
});
Related
How can I open different pages from a single button by using a pair of two different dropdown menus?
<table style="font-style:nunito; background-color:#FFEBF6;border:none;">
<tr>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;">
<label style="font-size:20px; padding-bottom:10px;">My credit score is</label>
<select id="selectBox1">
<option value="excellent">Excellent (720 - 850) </option>
<option value="good">Good (690 - 719)</option>
<option value="average">Average (630 - 689)</option>
<option value="poor">Poor (350 - 629)</option>
</select>
</td>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;">
<label style="font-size:20px; padding-bottom:10px;">I care most about</label>
<select id="selectBox2">
<option value="a">Cash Back</option>
<option value="b">Rewards</option>
<option value="c">Travel</option>
<option value="d">Balance Transfer</option>
<option value="e">Low Interest</option>
<option value="f">Building My Credit</option>
</select>
</td>
<td style="font-style:nunito; background-color:#FFEBF6;border:none;"><br/>
<input id="click" onclick="Redirect()" type="button" value="Find Cards" style="width:200px; height:45px; margin-top:5px;background-color: #2832C2;border:#415BA4;color:#ffffff; font-weight:bold;"/>
</td>
</tr>
</table>
The Find Cards button is not clickable. What is wrong with this code?
onclick of button this function will opens multiple pages
function Redirect() {
window.open('url here', '_blank');
window.open('url here', '_blank');
}
for this you have to make code with condition statement and when 2 value combination match it will open your desire url
try out this code
function Redirect(e) {
e.preventDefault()
var value1 =$('#selectBox1').val();
var value2 = $('#selectBox2').val();
if(value1 == "your value" && value2 == "your value"){
window.open('your url', '_blank');
}
// repeate this if with your all combination of your value and chage url
}
Hi I am trying to make a single page angular js application but while adding to the list "schedulelist" only the latest record are getting pushed into the list and all the previous records are getting replaced by the latest record
This is my Html:
<table class="table1" cellspacing=2 cellpadding=5 border=0>
<div ng-repeat="scheduleDTO in schedules">
<tr>
<td>
<SELECT id="days" name="days" class="form-right" style="width:90%" ng-model="scheduleDTO.day_of_the_week" required>
<OPTION selected value="Monday">Monday</OPTION>
<OPTION value="Tuesday">Tuesday</OPTION>
<OPTION value="Wednesday">Wednesday</OPTION>
<OPTION value="Thursday">Thursday</OPTION>
<OPTION value="Friday">Friday</OPTION>
<OPTION value="Saturday">Saturday</OPTION>
<OPTION value="Sunday">Sunday</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start_time" name="Start" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION selected value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="start" name="am" class="form-right" style="width:90%" ng-model="scheduleDTO.start_time_meridiem"required>
<OPTION selected value="AM">AM</OPTION>
<OPTION value="PM">PM</OPTION>
</SELECT>
<td><SELECT id="end_time"class="form-right" name="end" style="width:90%" ng-model="scheduleDTO.end_time" required>
<OPTION value="1:00">01:00</OPTION>
<OPTION value="2:00">02:00</OPTION>
<OPTION value="3:00">03:00</OPTION>
<OPTION value="4:00">04:00</OPTION>
<OPTION selected value="5:00">05:00</OPTION>
<OPTION value="6:00">06:00</OPTION>
<OPTION value="7:00">07:00</OPTION>
<OPTION value="8:00">08:00</OPTION>
<OPTION value="9:00">09:00</OPTION>
<OPTION value="10:00">10:00</OPTION>
<OPTION value="11:00">11:00</OPTION>
<OPTION value="12:00">12:00</OPTION>
</SELECT>
</td>
<td>
<SELECT id="end" name="pm" class="form-right" style="width:90%" ng-model="scheduleDTO.end_time_meridiem" required>
<OPTION value="AM">AM</OPTION>
<OPTION selected value="PM">PM</OPTION>
</SELECT>
</td>
<td><input type="button" class="addSch" ng-click="add(scheduleDTO)" value="Add Schedule" style="width:90%"> <!-- add_schedule(); -->
</td>
</tr>
</div>
</table>
<table align='center' class="table1" cellspacing=2 cellpadding=5 id="table" border=0>
<tr ng-repeat="ScheduleDTO in schedulelist">
<td>{{scheduleDTO.day_of_the_week}}</td>
<td>{{scheduleDTO.start_time}}</td>
<td>{{scheduleDTO.start_time_meridiem}}</td><td>To</td>
<td>{{scheduleDTO.end_time}}</td>
<td>{{scheduleDTO.end_time_meridiem}}</td>
<td><input type='button' value='Delete' class='delete' ng-click="remove(scheduleDTO)"></td>
</table>
This is rthe controller:
$scope.schedulelist = [
];
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};
Use Angular#copy to avoid reference copy in the modal,
which is the same one getting used again and data is overwritten.
$scope.schedulelist.push({"ScheduleDTO":angular.copy(schedule)});
there is only one instance of an object in javascript if you create an object there will be single reference to it, i.e if you change in the object all the values will be changed so even you are changing the value every time it all the values pushed in the array will refer to the same object.
better solution will be
$scope.add = function (scheduleValue)
{
var schedule=angular.copy(scheduleValue);
schedule.volunteer_id="";
schedule.sid="";
$scope.schedulelist.push({"ScheduleDTO":schedule});
alert(angular.toJson($scope.schedulelist));
};
The problem is in this line
$scope.schedulelist.push({"ScheduleDTO":schedule});
each team a record is pushed to the ScheduleDTO property of the object and each time new entry replaces the old one.
You can do something like this
$scope.add = function (schedule)
{ schedule.volunteer_id="";
schedule.sid="";
//Create an array of ScheduleDTO
if( $scope.schedulelist.ScheduleDTO instanceof Array == false) {
$scope.schedulelist.ScheduleDTO = []
}
//Push the schedule into the array
$scope.schedulelist.ScheduleDTO.push(schedule);
alert(angular.toJson($scope.schedulelist));
};
Use angular copy and and also change variable name from select box and list. Please check this fiddle
(function($){
try{
var demoApp = angular.module('demoApp',[]);
demoApp.controller('demoController',['$scope',function($scope){
$scope.schedulelist = [
];
$scope.add = function (scheduleObject) {
var schedule = angular.copy(scheduleObject)
schedule['volunteer_id']="";
schedule['sid']="";
$scope.schedulelist.push(
{"ScheduleDTO":schedule}
);
};
$scope.remove = function(schedule) {
var index = $scope.schedulelist.indexOf(schedule);
$scope.schedulelist.splice(index, 1);
alert(angular.toJson($scope.schedulelist));
};
}])
}catch(e){
console.log(e)
}
})(jQuery)
I'm working on a form that uses javascript-coder's gen_validatorv4 script. (Have used it in the past to great success). This form is so that tellers at the bank I work at can put information in on voided checks, to send back to our accounting department and get kicked out as a csv for Foxtrot.
I have tested the script in Firefox and Chrome, with no problems. However, in IE 8 and 9, I get the message "Line #1: Your account Number must be a number!", which is a validation error for not putting a number in that line, and as far as I can figure, it's because I'm using an array. It will repeat again with an error when attempting to do it under maxlen as well. I'm using the array (which is created by the previous form) as there is a variable set of number of checks which may be submitted at any given time.
Anyone have any ideas how to make it work in Internet Explorer properly?
Update: http://jsfiddle.net/syran/xL2EB/10/
I added the array-0.9.js file from js-methods, and that has slightly fixed the issue. It now properly validates the first line of items up to the radio button, but fails at that point. If I remove the radio button check, it will then fail on the 2nd row on num and maxlen verification. Please check the fiddle for the updated code, and an added second line.
HTML Code:
<form name="checkvoid" method="post">
<table id="mytable" border="1">
<tbody>
<tr>
<td nowrap>Branch Number:
<input type="text" name="bid" value="1" size="3">
</td>
<td colspan="6">
<input type="submit" value="Submit Voided Checks">
</td>
</tr>
<tr>
<td align="center">Date</td>
<td align="center">Account #</td>
<td align="center">Serial #</td>
<td align="center">Amount</td>
<td>MO</td>
<td>CC</td>
</tr>
<tr class="check">
<td>
<select name="1[date][month]">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4" selected>Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="1[date][day]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29" selected>29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="1[date][year]">
<option value="2012">2012</option>
<option value="2013" selected>2013</option>
</select>
</td>
<td>
<input type="text" name="1[actnum]" size="10" value="1">
</td>
<td>
<input type="text" name="1[serial]" size="10" value="1">
</td>
<td>$
<input type="text" name="1[amount]" size="10" value="1">
</td>
<td>
<input type="radio" name="1[type]" value="1" CHECKED>
</td>
<td>
<input type="radio" name="1[type]" value="2">
</td>
<tr>
<td colspan="6">
<input type="checkbox" name="certify" value="1">I certify that all the information above is correct.</td>
</tr>
</tbody>
</table>
<input type="hidden" name="action" value="process">
Javascript:
var frmvalidator = new Validator("checkvoid");
frmvalidator.addValidation("bid", "req", "Please enter your Branch Number!");
frmvalidator.addValidation("bid", "num", "Your Branch Number should be a Number!");
frmvalidator.addValidation("1[actnum]", "req", "Line #1: You must enter an account number!");
frmvalidator.addValidation("1[actnum]", "num", "Line #1: Your Account Number must be a number!");
frmvalidator.addValidation("1[actnum]", "maxlen=8", "Line #1: Your Account Number cannot exceed 8 numbers!");
frmvalidator.addValidation("1[serial]", "req", "Line #1: You must enter a serial number!");
frmvalidator.addValidation("1[serial]", "num", "Line #1: Your Serial Number must be a number!");
frmvalidator.addValidation("1[serial]", "maxlen=10", "Line #1: Your Serial Number cannot exceed 10 numbers!");
frmvalidator.addValidation("1[amount]", "req", "Line #1: You must enter an amount!");
frmvalidator.addValidation("1[amount]", "num", "Line #1: Your Amount must be a number!");
frmvalidator.addValidation("1[type]", "selone", "Line #1: You must select either Money Order or Cashier's Check!");
frmvalidator.addValidation("certify", "shouldselchk", "Your must certify that the form is correct!");
I have it working without using an array in IE: http://jsfiddle.net/syran/xL2EB/4/
Worked fine after I removed the [] brackets that you have wrapping your name property value.
<input type="text" name="1[actnum]" size="10" value="1"> to <input type="text" name="1actnum" size="10" value="1">
You obviously have to update your js to reflect this.
Issue was caused by using a number as the datatype. IE didn't know how to handle it. Someone else gave me that tidbit, and I was able to fix it by creating a 2D array.
http://jsfiddle.net/syran/xL2EB/12/
stuff[#][fieldname]
frmvalidator.addValidation("stuff[1][actnum]", "req", "Line #1: You must enter an account number!");
i have same problem and i change the add_validation function .
you can replace the add_validation function in gen_validatorv4.js to this :
function add_validation(itemname, descriptor, errstr)
{
var condition = null;
if (arguments.length > 3)
{
condition = arguments[3];
}
if (!this.formobj)
{
alert("Error: The form object is not set properly");
return;
}
var itemobj = this.formobj[itemname];
var i=0;
for (var key in itemobj)
{
i=parseInt(i)+1;
var errtmp="";
if(typeof(itemobj[key]) !="object" || itemobj[key]==null || itemobj[key].name==null ) continue;
if(itemobj[key].name.toString().indexOf("[]") >1 )
{
if (itemobj[key].length && isNaN(itemobj[key].selectedIndex))
//for radio button; don't do for 'select' item
{
// itemobj[key] = itemobj[key][0];
}
if (!itemobj[key])
{
alert("Error: Couldnot get the input object named: " + itemname);
return;
}
if (true == this.validate_on_killfocus)
{
itemobj[key].onblur = handle_item_on_killfocus;
}
if (!itemobj[key].validationset)
{
itemobj[key].validationset = new ValidationSet(itemobj[key], this.show_errors_together);
}
if(typeof(itemobj[key].validationset.add)=="function")
{
var errtmp=errstr.replace("{num}",i) ;
itemobj[key].validationset.add(descriptor, errtmp, condition);
itemobj[key].validatorobj = this;
}
}
else
{
var itemobj = this.formobj[itemname];
if (itemobj.length && isNaN(itemobj.selectedIndex))
//for radio button; don't do for 'select' item
{
itemobj = itemobj[0];
}
if (!itemobj)
{
alert("Error: Couldnot get the input object named: " + itemname);
return;
}
if (true == this.validate_on_killfocus)
{
itemobj.onblur = handle_item_on_killfocus;
}
if (!itemobj.validationset)
{
itemobj.validationset = new ValidationSet(itemobj, this.show_errors_together);
}
itemobj.validationset.add(descriptor, errstr, condition);
itemobj.validatorobj = this;
break;
}
}
}
I have javascript function where if values "abc", "abcd" or "abcde" has been chosen from the dropdown menu "optionDrop", then display the other dropdown menu "numberDrop", else output "N/A". The problem is that the "numberDrop" down menu is not appearing at all. What have I done wrong?
Below is javascript function:
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementById("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop.value = "abc" || optionDrop.value = "abcd" || optionDrop.value = "abcde"){
numberDrop.style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Below is html dropdown menus is form:
<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td id="noOfAnswers">
<select name="numberDrop" id="numberDropId">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
CSS code:
/*css for QandATable.php*/
#numberDropId{
display:none;
}
Try:
if (optionDrop.value === "abc")
=== is exact match of same type. So it would have to match abc. = is for assignment.
Change your javascript function as bellow.
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementsByName("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Good luck.
Prasad
Hi been wrestling this form and the last step (actually submitting) has me scratching my head. What I have so far is the form:
<form id="theForm" method='post' name="emailForm">
<table border="0" cellspacing="2">
<td>Email <span class="red">*</span></td><td><input type='text'class="validate[required,custom[email]]" size="30"></td></tr>
<td>First Name:</td><td><input type='text' name='email[first]' id='first_name' size=30></td></tr>
<tr height="30">
<td cellpadding="4">Last Name:</td><td><input type='text' name='email[last]' id='e_last_name' size=30>
<td>Birthday</td>
<td><select name='month' style='width:70px; margin-right: 10px'>
<option value=''>Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
....
</select><select name='day' style='width:55px; margin-right: 10px'>
<option value=''>Day</option>
<option value="1">1</option>
<option value="2">2</option>
...
<option value="31">31</option>
</select><select name='year' style='width:60px;' >
<option value=''>Year</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
...
</select>
<input type='image' src='{{skin url=""}}images/email/signUpButt.gif' value='Submit' onClick="return checkAge()" />
<input type="hidden" id= "under13" name="under13" value="No">
and a script that checks the age and sets a cookie/changes display
function checkAge()
{
var min_age = 13;
var year = parseInt(document.forms["emailForm"]["year"].value);
var month = parseInt(document.forms["emailForm"]["month"].value) - 1;
var day = parseInt(document.forms["emailForm"]["day"].value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
if ( (today.getTime() - theirDate.getTime()) < 0) {
var el = document.getElementById('emailBox');
if(el){
el.className += el.className ? ' youngOne' : 'youngOne';
}
document.getElementById('emailBox').innerHTML = "<style type=\"text/css\">.formError {display:none}</style><p>Good Bye</p><p>You must be 13 years of age to sign up.</p>";
createCookie('age','not13',0)
return false;
}
else {
createCookie('age','over13',0)
return true;
}}
that all seems to be working well.. just missing kind of a crucial step of actually submitting the form if it validates (if they pass the age question). So I am thinking that this will be wrapped in that script.. something in here :
else {
createCookie('age','over13',0)
return true;
}
Can someone please help me figure out how I could handle this submit?
You would call
var form = document.getElementById('theForm');
if(form != null)
form.submit();
And that would post the data to the server.