I'm just getting into javascript and so far enjoying the logic behind it but i have an issue with Firefox. basicly im generating my javascript from within a php function and its a NON SECURE pin code auth script.
So my php creates a call that passes variables pin number included, when called a modal popup with pinpad opens and the user inputs 4 digits, the pinpad onclick function adds the digits into a password field and after 4 clicks it compares it to a hidden field on the pinpad form, if it matches it calls another generated function to complete the success action, if no match pinpad frame turns red and a bypass button is enabled or they can try again.
This all works fine in Chrome, Opera and even IE but in Firefox it calls the success function after 4 digits even if they don't match the pin field.
Why could this be? Below is the function, but please remember I'm new so it could possibly be better written.
function add(text) {
var TheTextBox = document.pinform.elements['pin'];
var pincheckbox = document.pinform.elements['pincheck'];
var sidbox = document.pinform.elements['sid'];
TheTextBox.value = TheTextBox.value + text;
if (TheTextBox.value.length == 4) {
if (pinform.pin.value == pinform.pincheck.value) {
var pinn = document.getElementById('sid').value;
eval('pinpass' + pinn + '();');
} else {
document.getElementById("bypass").innerHTML = "Bypass";
document.getElementById("bypass").disabled = false;
document.getElementById("calc").style.backgroundColor = 'red';
TheTextBox.value = '';
return false;
}
}
}
Found the answer by trial and error as usual lol.
i need to add document. in front of pinform.pincheck.value and pinform.pin.value
Thanks for the help offered.
Nick
if (TheTextBox.value.length == 4) {
if (doucment.pinform.pin.value == document.pinform.pincheck.value) {
var pinn = document.getElementById('sid').value;
eval('pinpass' + pinn + '();');
} else {
Related
I'm trying to work on updating some code for a mobile web app, and I'm having difficulty getting a button to cause a pop-up as it should. I have the following (relevant) code:
#(Html.Kendo().MobileButton().Name("DropoffDone").Text("Confirm Dropoff").Url("ConfirmDropoff", "Drop", new {id = Model.DeliveryLocationId}).Events(ev => ev.Click("onClick")))
and, later in the same file under tags:
function onClick(ev) {
var currentDate = new Date();
var minuteToday = currentDate.getHours*60 + currentDate.getMinutes;
var minuteDeliv = #Model.DropTime.Hour*60 + #Model.DropTime.Minute;
var difference = minuteDeliv-minuteToday;
var r = false;
if(difference>15){
r = confirm("Message Here");
if(!r){
ev.preventDefault();
}
}
}
The button works fine and it seems to call the javaScript (I tested with a sample alert) but it never seems to actually get to the inside of the 'if' statement. I would like it to pop up with a confirm message, allowing the user to cancel the action. Where is the code not functioning properly? Thank you all in advance for your help.
I'm working on a form that has multiple stages inside tags.
The problem is when the user gets to the 3rd stage and they click continue , it resets them back to the 1st stage.
I believe this to be an issue with the java script although I'm not sure. If I change the if() part to something like if(phone = 11) (if the number entered has 11 digits) then it works , but it wont work with the validation.
Here is the java script to process the 3rd stage:
function processPhase3() {
var validmail = ( /[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/.test(email) ); //JUST A TEST
//phone.length = 11 && validmail
phone = _("Ctelephone").value;
mobile = _("Cmobile").value;
email = _("Cemail").value;
if (validmail) {
_("phase3").style.display = "none";
_("phase4").style.display = "block";
_("progressBar").value = 99;
_("status").innerHTML = "Step 4";
} else {
}
}
You need to adjust your button to not submit the form by setting the type of the button to "button".
Like this:
<button type="button" onclick="processPhase3()">Continue</button>
guys. I am trying to create a web-based calculator with basic operations using jQuery. I already have implemented the addition operation. Now, I am hooked in subtraction.
Here is a code snippet when you click on the minus button:
$("#btnSub").click(function () {
holdValue = $("#result").val();
currentValue = $("#result").val("0");
flagSub = "1";
flagNotEmpty = "0";
flagDecimal = "0";
});
Here is a code snippet when you click the equals button:
$("#btnEquals").click(function () {
if (flagNotEmpty == "0") {
alert("Missing Value.");
} else {
if (flagAdd == "1") {
currentValue = $("#result").val();
var output = parseFloat(holdValue) + parseFloat(currentValue);
$("#result").val(parseFloat(output));
} else if (flagSub == "1") {
currentValue = $("#result").val();
var output2 = parseFloat(holdValue) - parseFloat(currentValue);
$("#result").val(parseFloat(output2));
}
}
flagSub = "0";
flagAdd = "0";
flagNotEmpty = "0";
flagDecimal = "0";
});
Variables functions:
flagSub: used to determine that the operation choosen is subtraction
flagNotEmpty: used to determine if a number is pressed after selecting an operator. Displays error message if equal sign is clicked on right after the operator button.
flagDecimal: used to tell the program that a decimal has already been entered. Display error message for decimal point duplication.
Problem with this program is that it cannot perform subtraction when it is the first operation you do. That is, when the browser loads the UI and you do subtraction, nothing happens. BUT, when you do, for example, click 1 + 2 = then the program displays 3 in the textbox. Without refreshing the page, click - 10 =. Difference is displayed.
To start from the beginning, please refresh the page; will just add the CLEAR button after I am done with all the operations.
Just want to know what is wrong with my algorithm. For the complete code with html and css, here is its fiddle.
By the way, I have just started learning jQuery so please forgive me for the kind of messy and might be inefficient way of coding. Help is really much appreciated. Thanks in advance.
flagAdd needs to be initialized, you can alter the btnSub handler to do that
$("#btnSub").click(function () {
holdValue = $("#result").val();
currentValue = $("#result").val("0");
flagAdd = "0";
flagSub = "1";
flagNotEmpty = "0";
flagDecimal = "0";
});
alternatively you could initialize it in the document ready handler Fiddle
I have been looking around and I cannot seem to figure out how to do this, although it seems like it would be very simple.(mobile development)
What I am trying to do is display a message (kind of like an alert, but not an alert, more like a dialog) while a calculation is being made. Simply like a Loading please wait. I want the message to appear and stay there while the calculation is being done and then be removed. I just cannot seem to find a proper way of doing this.
The submit button is pressed and first checks to make sure all the forms are filled out then it should show the message, it does the calculation, then hides the message.
Here is the Calculation function.
function scpdResults(form) {
//call all of the "choice" functions here
//otherwise, when the page is refreshed, the pulldown might not match the variable
//this shouldn't be a problem, but this is the defensive way to code it
choiceVoltage(form);
choiceMotorRatingVal(form);
getMotorRatingType();
getProduct();
getConnection();
getDisconnect();
getDisclaimer();
getMotorType();
//restore these fields to their default values every time submit is clicked
//this puts the results table into a known state
//it is also used in error checking in the populateResults function
document.getElementById('results').innerHTML = "Results:";
document.getElementById('fuse_cb_sel').innerHTML = "Fuse/CB 1:";
document.getElementById('fuse_cb_sel_2').innerHTML = "Fuse/CB 2:";
document.getElementById('fuse_cb_result').innerHTML = "(result1)";
document.getElementById('fuse_cb_res_2').innerHTML = "(result2)";
document.getElementById('sccr_2').innerHTML = "<b>Fault Rating:</b>";
document.getElementById('sccr_result').innerHTML = "(result)";
document.getElementById('sccr_result_2').innerHTML = "(result)";
document.getElementById('contactor_result').innerHTML = "(result)";
document.getElementById('controller_result').innerHTML = "(result)";
//Make sure something has been selected for each variable
if (product === "Choose an Option." || product === "") {
alert("You must select a value for every field. Select a Value for Product");
**************BLAH************
} else {
//valid entries, so jump to results table
document.location.href = '#results_a';
******This is where the message should start being displayed***********
document.getElementById('motor_result').innerHTML = motorRatingVal + " " + motorRatingType;
document.getElementById('voltage_res_2').innerHTML = voltage + " V";
document.getElementById('product_res_2').innerHTML = product;
document.getElementById('connection_res_2').innerHTML = connection;
document.getElementById('disconnect_res_2').innerHTML = disconnect;
if (BLAH) {
}
else {
}
populateResults();
document.getElementById('CalculatedResults').style.display = "block";
} //end massive else statement that ensures all fields have values
*****Close out of the Loading message********
} //scpd results
Thank you all for your time, it is greatly appreciated
It is a good idea to separate your display code from the calculation code. It should roughly look like this
displayDialog();
makeCalculation();
closeDialog();
If you are having trouble with any of those steps, please add it to your question.
Computers are fast. Really fast. Most modern computers can do several billion instructions per second. Therefore, I'm fairly certain you can rely on a a setTimeout function to fire around 1000ms to be sufficient to show a loading message.
if (product === "Choose an Option." || product === "") {
/* ... */
} else {
/* ... */
var loader = document.getElementById('loader');
loader.style.display = 'block';
window.setTimeout(function() {
loader.style.display = 'none';
document.getElementById('CalculatedResults').style.display = "block";
}, 1000);
}
<div id="loader" style="display: none;">Please wait while we calculate.</div>
You need to give the UI main thread a chance to render your message before starting your calculation.
This is often done like this:
showMessage();
setTimeout(function() {
doCalculation();
cleanUp()
}, 0);
Using the timer allows the code to fall through into the event loop, update the UI, and then start up the calculation.
You're already using a section to pop up a "results" page -- why not pop up a "calculating" page?
Really, there are 4,000,000 different ways of tackling this problem, but why not try writing a "displayCalculatingMessage" function and a "removeCalculatingMessage" function, if you don't want to get all object-oriented on such a simple thing.
function displayCalculatingMessage () {
var submit_button = getSubmitButton();
submit_button.disabled = true;
// optionally get all inputs and disable those, as well
// now, you can either do something like pop up another hidden div,
// that has the loading message in it...
// or you could do something like:
var loading_span = document.createElement("span");
loading_span.id = "loading-message";
loading_span.innerText = "working...";
submit_button.parentElement.replaceChild(loading_span, submit_button);
}
function removeCalculatingMessage () {
var submit_button = getSubmitButton(),
loading_span = document.getElementById("loading-message");
submit_button.disabled = false;
loading_span.parentElement.replaceChild(submit_button, loading_span);
// and then reenable any other disabled elements, et cetera.
// then bring up your results div...
// ...or bring up your results div and do this after
}
There are a billion ways of accomplishing this, it all comes down to how you want it to appear to the user -- WHAT you want to have happen.
I'm trying to access control's properties and although it works great in IE6, in FF3, it fails. I'm doing:
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
And the first one shows a blank popup while the second shows 'undefined'.
I do
alert(document.getElementById(gridViewCtlId).id);
and I get the proper ID of the box along with:
alert(document.getElementById(gridViewCtlId));
and I get that in an HTML table.
This works perfectly in IE but not FF. What do I need to do to get this functioning?
Edit: gridViewCtlId is defined as:
var gridViewCtlId = '<%=GridView.ClientID%>';
Here is the full code:
var itemVisible= '<%=ItemVisible.ClientID%>';
function onGridViewRowSelected(rowIdx)
{
alert(document.getElementById(gridViewCtlId).style.display);
alert(document.getElementById(gridViewCtlId).style);
if (document.getElementById(gridViewCtlId).disabled == false)
{
alert("hi1");
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
alert("hi2");
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
alert("hi");
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
alert("new");
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = 'Red';
}
}
}
It's pretty much an onClick where I have to call that function to turn it back to its original color (using alternating color rows). IE, this works fine. If i do the first alert
alert(document.getElementById(gridViewCtlId).disabled);
I would get either true or false.
The reason it's like this is because someone is going to enter something in a text box and the first gridview is going to populate depending on whats in that textbox. Then when someone selected something in the first gridview, that gridview is going to become disabled and then populate a second. So i'm having an issue checking for the disabled part of the gridview.
<div id="test">
</div>
<script type="text/javascript">
var gridViewCtlIdCCA = 'test';
alert(document.getElementById(gridViewCtlIdCCA).style);
</script>
Alerts [object CSSStyleDefintion] in Firefox 2 and 3.
If .style where undefined, .style.display would produce an error, not alert an empty dialog (unless you are capturing window.onerror).
Can you create an SSCCE that demonstrates the problem. More information about SSCCE available here.