I am trying to debug a function call in my JSP program and really confused on the ordering of how things worked. I am using NetBeans. When I run the project in debug mode, it goes into my '$("#searchEFT").mouseup(function ()' function and trace through all of it. 'searchEFT' is a button that I am using to access my servlet. When I process the page and then click the 'searchEFT' button, it hits the function call based on getting the right alert but doesn't trace in the debug. Why is it doing that? Is the first call of the function on load setting up the check when the user does the mouseclick?
This function is outside of the '$(document).ready(function ()' at the top and the function call is after the button declaration in the JSP.
EDIT: here is the JSP code:
<head>
<script>
$(document).ready(function ()
{
$(function ()
{
$("#CMDCreationDate").datepicker({
dateFormat: "yy-mm-dd"
});
});
}) ;
window.onbeforeunload = confirmExit;
function confirmExit()
{
alert("Alert-- leaving this page.");
}
function numbersonly(myfield, e, dec) {
//function to check that only numeric values are entered
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27))
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == ".")) {
myfield.form.elements[dec].focus();
return false;
} else
return false;
}
</script>
</head>
<body>
<header>
<?audit suppress oracle.ide.xml.validation-error?>
<div class="floatL appTTL">SAMS - EFT Schedule Number Search/Update Screen</div>
<div id="navWrap">
<nav class="floatR">
<ul>
<li>
Home
</li>
<li>
Search
</li>
<li>
Help
</li>
<li>
Help
</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</header>
<main class="mainWrapper">
<form id="formID" method="POST" action="EFTscreen?action=searchEFT" >
<div class="commandcontainer">
<div id="divBox">
<h1 class="formTTL">Please Enter Schedule Number/Contract Year or either Schedule
Status/Creation Date value</h1>
<label class="labelTTL">Schedule Number</label>
<label class="labelTTL3">Contract Year</label>
<label class="labelTTL3">Status</label>
<label class="labelTTL">Creation Date</label>
<br/>
<input id="CMDScheduleNumber" name="CMDScheduleNumber" type="number" class="textsmall" maxlength="5"
value="${ScheduleNum}" onKeyPress="return numbersonly(this, event)"/>
<input id="CMDContractYear" name="CMDContractYear" type="number" class="textsmall" maxlength="4"
value="${ContractYear}" onKeyPress="return numbersonly(this, event)"/>
<select size="1" id="CMDSchedStatus" name="CMDSchedStatus" class="combosmall">
<c:forEach items="${statusList}" var="current">
<option value="${current}"
<c:if test="${current == Status}"> selected="selected"</c:if>
>${current}</option>
</c:forEach>
</select>
<input id="CMDCreationDate" name="CMDCreationDate" type="text" class="textsmall"
value="${CreationDate}" maxlength="10"/>
<br/>
<button id="searchEFT" class="btn smBtn">Search</button>
</div>
<div id="divButton">
<button id="searchMEFTS" type="submit" formaction="EFTscreen?action=searchMEFTS&screen=mainEFT"
class="btn midBtn">Update Schedule Status</button>
<button id="clearMenu" type="submit" formaction="EFTscreen?action=clearMenu"
class="btn midBtn Space">Return to Menu</button>
</div>
<div id="clear"></div>
</div>
<article class="divBoxdet">
<fmt:formatNumber var="trdettotal" value="${detResults.getTOTAL_AMOUNT()}" pattern="$##,###,##0.00"/>
<label class="labelTTLdet floatL">
Schedule Number
<input id="txtScheduleNumber" type="number" class="textdet"
value="${detResults.getSCHEDULE_NUMBER()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Contract Year
<input id="txtContractYear" type="number" class="textdet"
value="${detResults.getEFT_CONTRACT_YEAR()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Date Created
<input id="txtCreationDate" type="text" class="textdet"
value="${detResults.getCREATION_DATE()}" readonly/>
</label>
<div class="clear"></div>
<br/>
<br/>
<label class="labelTTLdet floatL">
Num of Records
<input id="txtNumRecords" type="number" class="textdet"
value="${detResults.getNUM_OF_PAY_RECORDS()}" readonly/>
</label>
<label class="labelTTLdet floatL">
Status
<br/>
<input id="txtStatus" type="text" class="textdet"
value="${detResults.getSTATUS()}" maxlength="2"/>
</label>
<label class="labelTTLdet floatL">
Status Date
<input id="txtStatusDate" type="text" class="textdet"
value="${detResults.getSTATUS_DATE()}" maxlength="10"/>
</label>
<div class="clear"></div>
<br/>
<br/>
<label class="labelTTLdet floatL">
Schedule Total
<input id="txtScheduleTotal"
type="text" class="textdet" value="${trdettotal}" readonly/>
</label>
<label class="labelTTLdet floatL">
Schedule Post Date
<input id="txtPostDate" type="text" class="textdet"
value="${detResults.getSCHEDULE_POST_DATE()}" maxlength="10"/>
</label>
<label class="labelTTLdet floatL">
Reel Number
<input id="txtReelNumber" type="text" class="textdet"
value="${detResults.getREEL_NUMBER()}" maxlength="8"/>
</label>
<div class="clear"></div>
<br/>
<br/>
<button id="pullMEFTD"
class="btn largeBtn Space floatL">Update Schedule Payment Status</button>
<script>
$("#searchEFT").mouseup(function ()
{
var Cmd_Sched_Number = $('#CMDScheduleNumber').val();
var schedLen = Cmd_Sched_Number.length;
//var Cmd_Contract_Year = document.getElementById("CMDContractYear").value;
var Cmd_Contract_Year = $('#CMDContractYear').val();
var yearLen = Cmd_Contract_Year.length;
//var Cmd_Status = document.getElementById("CMDSchedStatus").value;
var Cmd_Status = $('#CMDSchedStatus').val();
var statStr = Cmd_Status.replace(/\s/g, "");
var statLen = statStr.length;
//var Cmd_Creation_Date = document.getElementById("CMDCreationDate").value;
var Cmd_Creation_Date = $('#CMDCreationDate').val();
var createLen = Cmd_Creation_Date.length;
if ((schedLen > 0 && yearLen === 0) || (schedLen === 0 && yearLen > 0))
{
alert("Schedule Number and EFT Contract Year must be both populated");
}
;
if ((statLen === 0) && (createLen === 0) && (schedLen === 0) && (yearLen === 0))
{
var r = confirm("Are you sure you want to pull all EFT schedule numbers?");
if (r === false)
{
alert("Please enter information in any of the command line fields");
return false;
}
else
{
$('#formID').submit();
}
} ;
});
$("#pullMEFTS").mouseup(function ()
{
var Det_Sched_Number = $('#txtScheduleNumber').val();
var detschedLen = Det_Sched_Number.length;
//var Cmd_Contract_Year = document.getElementById("CMDContractYear").value;
var Det_Contract_Year = $('#txtContractYear').val();
var detyearLen = Det.length;
var Det_Status = $('#txtStatus').val();
if (detschedLen > 0)
{
alert("Schedule Number not found. Please investigate");
}
;
if ( holdStatus.matches("RP") ||
holdStatus.matches("VP") ||
holdStatus.matches("CP") )
{
alert("User can only update schedule number in NP status");
}
});
</script>
</article>
</form>
</main>
</body>
Thanks
The line:
$("#searchEFT").mouseup(function ()
is the function call that sets the mouseup handler; it is not the mouseup handler itself.
If you want to break inside the mouseup handler then you need to set a breakpoint somewhere inside the handler function itself, e.g.,
// First executable line of the mouseup handler
var Cmd_Sched_Number = $('#CMDScheduleNumber').val();
Unrelated, but I would break up the handler function into much smaller pieces, roughly:
function getFormData() {
return {
number: $('#CMDScheduleNumber').val().trim(),
year: $('#CMDContractYear').val().trim(),
status: $('#CMDSchedStatus').val().replace(/\s/g, '').trim(),
date: $('#CMDCreationDate').val().trim()
};
}
function invalidNumberAndYear(formData) {
return ((formData.number !== '') && (formData.year === '')) ||
((formData.year !== '') && (formData.number === ''));
}
function isPullAll(formData) {
return formData.number === '' &&
formData.year === '' &&
formData.status === '' &&
formData.date === '';
}
function searchEftMouseup(e) {
e.preventDefault();
var formData = getFormData();
if (invalidNumberAndYear(formData)) {
alert('Schedule Number and EFT Contract Year must be both populated');
return;
}
if (isPullAll(formData)) {
if (confirm('Are you sure you want to pull all EFT schedule numbers?')) {
$('#formID').submit();
} else {
alert('Please enter information in any of the command line fields');
}
}
}
$('#searchEFT').on('mouseup', searchEftMouseup);
This allows small stuff to be thought about easily, and begins to reveal your validation needs, and suggests a shape for your remaining code.
(Most of which, btw, was not relevant to the question–it's good to post only the minimum amount necessary to help people understand the issue :)
Related
On my order site, I have 2 options: pick up and delivery.
When choosing pick up, nothing happens, but when choosing delivery, the delivery address will appear for the user to fill in.
I want to use JS to notify you that you need to enter your shipping address only I you tick the delivery box.
Thank you.
/*Notify when information is invalid.*/
function validate() {
var pickup = document.getElementById("pickup").checked;
var delivery = document.getElementById("delivery").checked;
var deladd = document.getElementById("delivery_address").value;
var biladd = document.getElementById("billing_address").value;
if ((pickup == "") && (delivery == "")) {
errMsg += "Select an option. \\n";
}
if ((deladd == false) && (deladd == "")) {
errMsg += "Delivery address can not be empty.\\n";
if (errMsg != "") {
alert(errMsg);
result = false;
}
return result;
}
function init() {
var regForm = document.getElementById("form");
regForm.onsubmit = validate;
}
window.onload = init;
<div class="box">Select an option:
<input type="radio" id="pickup" name="option" value="pickup" class="radio" onclick="hideAddress()">
<label for="pickup" class="check">Pick Up</label>
<input type="radio" id="delivery" name="option" value="delivery" class="radio" onclick="showAddress()">
<label for="delivery" class="check">Delivery</label>
</div><br>
<div class="show" id="show">
<!--Delivery address.-->
<input type="text" placeholder="delivery address:" class="box" id="delivery_address" name="delivery_address">
<!--Check the same as the delivery address or not.-->
<label for="checkbox"> billing address same as delivery address</label>
<input type="checkbox" id="same_address" name="same_adsress_or_not" value="same_adress" onclick="autoFill()">
</div>
/*Notify when information is invalid.*/
function validate() {
var pickup = document.getElementById("pickup").checked;
var delivery = document.getElementById("delivery").checked;
var deladd = document.getElementById("delivery_address").value;
var biladd = document.getElementById("billing_address").value;
if ((pickup == "") && (delivery == "")) {
errMsg += "Select an option. \\n";
}
if ((deladd == false) && (deladd == "")) {
errMsg += "Delivery address can not be empty.\\n";
if (errMsg != "") {
alert(errMsg);
result = false;
}
return result;
}
}//closed here
function init() {
var regForm = document.getElementById("form");
regForm.onsubmit = validate;
}
window.onload = init;
<div class="box">Select an option:
<input type="radio" id="pickup" name="option" value="pickup" class="radio" onclick="hideAddress()">
<label for="pickup" class="check">Pick Up</label>
<input type="radio" id="delivery" name="option" value="delivery" class="radio" onclick="showAddress()">
<label for="delivery" class="check">Delivery</label>
</div><br>
<div class="show" id="show">
<!--Delivery address.-->
<input type="text" placeholder="delivery address:" class="box" id="delivery_address" name="delivery_address">
<!--Check same as delivery address or not.-->
<label for="checkbox"> billing address same as delivery address</label>
<input type="checkbox" id="same_address" name="same_adsress_or_not" value="same_adress" onclick="autoFill()">
</div>
In your code, you appear to have forgotten to close the function validate()'s
curly brackets (never closed the bracket "{").
Always remember to close your brackets.
Hope this helps :).
(still shows errors because incomplete code)
i want to create 2 text boxes.I want to write something on those text boxes ,and save the value of each in an array or somewhere.There are only char characters.I have and reset to delete a value if it needs.I did a lot work,but it didn't worked.
AM: <input type="text" id="myText" value="GiveAm" size="10" id="myInput">
<button onclick="document.getElementById('myInput').value = ''">Reset</button>
<button onclick="myFunction()">Kataxwrisi</button>
<br>
Surname <input id='charInput' type="text" value="" size="10%">
<button onclick="myFunction()">Kataxwrisi</button>
</br>
<script>
function myFunction() {
document.getElementById("myText").value = "Johnny Bravo";
}
function getChar(event){
if(event.which == null){
return String.fromCharCode(event.keyCode);
}else if(event.which !-0 && event.charCode != 0){
return String.fromCharCode(event.which);
}else{return null; }
}
document.getElementById('charInput').onkeypress=
function(event){
var char =getChar(event || window.event)
if(!char) return false;
document.getElementById('keyData').innerHTML =char + "was clicked";
return true;
}
</script>
Not 100% sure what you are trying to do here. But this is my best guess at a solution. When a user presses the 'enter' key in a text box, the current value of that text box is stored in an array.
var arrSavedValues = [];
function setInputValue(argInputID, argNewValue) {
document.getElementById(argInputID).value = argNewValue;
}
function saveValue(e){
if(e.keyCode === 13){
e.preventDefault();
var caller = e.target || e.srcElement;
arrSavedValues.push(caller.value);
alert("Saved " + caller.value + " to arrSavedValues.");
}
}
<div>
<label>AM:</label>
<input id="txtAM" type="text" value="GiveAm" size="10" onkeypress="saveValue(event)" />
<button onclick="setInputValue('txtAM','')">Reset</button>
<button onclick="setInputValue('txtAM','Johnny Bravo')">Kataxwrisi</button>
</div>
<div>
<label>Surname:</label>
<input id="txtSurname" type="text" value="" size="10" onkeypress="saveValue(event)" />
<button onclick="setInputValue('txtSurname','Johnny Bravo')">Kataxwrisi</button>
</div>
I have a sample form with the following code (stripped for JSFiddle)
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">
The jQuery code follows (stripped for JSFiddle)
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();
if (a == "" && b !== "" && c!=="") {
$("#e1").show();
} else if (a !== "" && b == "" && c=="") {
$("#e2").show();
$("#e3").show();
} else if (a !== "" && b !== "" && c=="") {
$("#e3").show();
}else if (a == "" && b == "" && c=="") {
$("#e1").show();
$("#e2").show();
$("#e3").show();
}
});
I am trying to validate the fields with possible combinations. It will show or hide the last three text fields (with id e*)accordingly if the fields are blank or not. For example, if the 1st field is empty and others are not, then e1 should be shown and others are hidden. Same of others like a typical form field were all fields are mandatory. If I write the above code, it is too long and complex. Is there any simple solution for this kind of scenario ?
Thanks
This will do what you want...
$(document).ready(function(){
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
$("input[id*=i]").each(function(i){
if($(this).val()=="") $("#e"+(i+1)).show();
else $("#e"+(i+1)).hide();
});
});
});
$(function(){
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
$("#submit").click(function(){
var a = $("#i1").val();
var b = $("#i2").val();
var c = $("#i3").val();
if (a == "") {
$("#e1").show();
}if (b == "") {
$("#e2").show();
}if (c == "") {
$("#e3").show();
}
});
})
<input type="text" id="i1" />
<input type="text" id="i2" />
<input type="text" id="i3" />
<input type="text" id="e1"/>
<input type="text" id="e2" />
<input type="text" id="e3" />
<input type="button" id="submit" value="Submit">
Demo
Can someone help me make this alert look much nicer? Like Maybe split up Each text box on its own line? I can not figure out how to make this look a lot cleaner and not just all piled on one line.
To see alert hit Lien radio button and then hit next without filling textboxes
http://jsfiddle.net/t4Lgm0n2/9/
function validateForm(){
var QnoText = ['lien']; // add IDs here for questions with optional text input
var ids = '';
flag = true;
for (i=0; i<QnoText.length; i++) {
CkStatus = document.getElementById(QnoText[i]).checked;
ids = QnoText[i]+'lname';
var eD = "";
if (CkStatus && document.getElementById(ids).value == '') {
eD = eD+' lienholder name';
document.getElementById(ids).focus();
flag = false;
}
ids2 = QnoText[i]+'laddress';
if (CkStatus && document.getElementById(ids2).value == '') {
eD=eD+' lienholder address';
document.getElementById(ids2).focus();
flag = false;
}
ids3 = 'datepicker2';
if (CkStatus && document.getElementById(ids3).value == '') {
eD=eD+' lien date';
document.getElementById(ids3).focus();
flag = false;
}
if(eD!="") alert("Please enter "+eD);
}
return flag;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" value="Yes" name="lien" id="lien" required="yes" onchange="showhideForm(this.value);"/><label for="lien">Lien</label>
<input type="radio" value="None" name="lien" id="nolien" onchange="showhideForm(this.value);"/><label for="nolien">No Lien</label>
<script type="text/javascript">
function showhideForm(lien) {
if (lien == "Yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
else if (lien == "None") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
$("#div1 > .clearfix input:text").val("");
}
}
</script>
<div id="div1" style="display:none">
<div class="clearfix">
<label for="lname">Lienholder Name:</label>
<input type="text" name="lienlname" validateat="onSubmit" validate="maxlength" id="lienlname" size="54" maxlength="120" message="Please enter lienholder name." value="">
</p>
<p>
<label for="laddress">Lienholder Address:</label>
<input type="text" name="lienladdress" validateat="onSubmit" validate="maxlength" id="lienladdress" size="54" maxlength="120" message="Please enter lienholder address." value="">
</p>
<p>
<label for="ldate">Date of Lien:</label>
<input type="text" name="lienldate" id="datepicker2" mask="99/99/9999" value="">
</div>
</div>
<div id="div2" style="display:none">
<!---You are not qualified to see this form.--->
</div>
<input type="submit" name="submit" value="Next" onclick="validateForm()">
You can use new line characters \n to make text more readable:
var eD = [];
if (CkStatus && document.getElementById(ids).value == '') {
eD.push('Please enter lienholder name');
document.getElementById(ids).focus();
flag = false;
}
// ...
if (eD.length) alert(eD.join('\n'));
As you can see I'm also pushing error messages into ed array, which makes it more convenient to concatenate resulting message using .join() method.
Demo: http://jsfiddle.net/t4Lgm0n2/11/
bit of a noob with form validation. I'm trying to get this form to validate on the required fields, and something's amiss. Here's what I'm working with:
html:
<form action="../visit/thankyou.html" method="post" id="vsurvey">
<input type="hidden" name="id" value="503" />
<fieldset>
<legend>Group and Coordinator Information</legend>
<label><span>Group Leader Name<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8149" />
</label>
<label><span>Email<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8155" />
</label>
<label><span>Phone<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8156" />
</label>
<label><span>School/Organization<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8159" />
</label>
<label><span>Program</span>
<input type="text" name="question_8180" />
</label>
<label><span>Grade(s)</span>
<input type="text" name="question_8181" />
</label>
<label><span>Number of Participants<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8182" />
</label>
</fieldset>
<fieldset>
<label><span>Preferred Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8185" name="question_8185" />
</label>
<label><span>Second Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8186" name="question_8186" />
</label>
<label><span>Third Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8187" name="question_8187" />
</label>
<label>Special Accommodations
<input type="text" name="question_8174" />
</label>
</fieldset>
<label>What is the purpose or desired outcome of this visit?
<textarea name="question_13026"></textarea>
</label>
<label>How did you learn about our Group Visit Program?
<textarea name="question_8176"></textarea>
</label>
<label>Comments
<textarea name="question_8184"></textarea>
</label>
<input type="submit" id="sbutton" value="Submit Request" />
</form>
js:
function validateForm() {
var x = document.forms["vsurvey"]["question_8149"].value;
if (x == null || x == "") {
alert("Please fill in the Group Leader's name.");
return false;
}
var x = document.forms["vsurvey"]["question_8155"].value;
if (x == null || x == "") {
alert("Please fill in the email field.");
return false;
}
var x = document.forms["vsurvey"]["question_8156"].value;
if (x == null || x == "") {
alert("Please fill in the phone field.");
return false;
}
var x = document.forms["vsurvey"]["question_8159"].value;
if (x == null || x == "") {
alert("Please fill in the School/Organization field.");
return false;
}
var x = document.forms["vsurvey"]["question_8182"].value;
if (x == null || x == "") {
alert("Please indicate the number or participants.");
return false;
}
var x = document.forms["vsurvey"]["question_8185"].value;
if (x == null || x == "") {
alert("Please enter your preferred date.");
return false;
}
var x = document.forms["vsurvey"]["question_8186"].value;
if (x == null || x == "") {
alert("Please enter your second date preference.");
return false;
}
var x = document.forms["vsurvey"]["question_8187"].value;
if (x == null || x == "") {
alert("Please enter your third date preference.");
return false;
}
}
http://jsfiddle.net/blackessej/9a6BJ/1/
Currently the form submits the info anyway, but without sending the user to the thankyou page, if all required fields aren't filed in. If all required fields are filed, the thankyou page gets called.
You're not calling validatorForm. Your input button needs to be the following
<input type="submit" id="sbutton" value="Submit Request" onclick="return validateForm()" />
Or use the onsubmit event of your form
<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()">
You need to create an onSubmit event to call validateForm:
document.getElementById('vsurvey').onsubmit = validateForm;