jQuery onClick一次带有开/关开关

Question

I am trying to figure out how to do something but can not figure out the correct terminology to do so.

What I am trying to do is have a textbox (#price) that when clicked once it will open up a pdf calculator that will then either prefill the textbox when completed or will then allow the user to enter the amount in. But I also want this to work if the textbox is "tabbed" over to also instead of the onClick. (Maybe onBlur) Basically anytime that textbox is used I need it to work like that. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?

What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.

Does anyone have any suggestions or pointers in how I can achieve this goal?

Answer 1

Bind event handler to focus event ( blur is for when control looses focus).

$("#price").on({
 "focus": eventHandler
})

Then in your eventHandler() check if calculator needs to be invoked, by checking if it's already opened: $("#calculatorDiv").is(":visible") , and checking if your checkbox is 'checked': $("#checkboxId").is(':checked') , and depending on that open it.

Answer 2

The event(s) you are looking for is onFocus and onBlur. I would bind a function to the onFocus event that first checks if the corresponding checkbox has a "true" (or "checked") value, then continue if it does and do nothin if it doesn't.

I'd create an example in jsfiddle for you if I wasn't answering this from my phone.

Answer 3

1. A textbox (#price) that when click once it will open up a pdf calculator

Use jQuery's click() handler or bind("click", ...)

var $price = $("#price");
$price.click(function() {
    $("#pdf_calculator").fadeIn();
});

2. But I also want this to work if the textbox is "tabbed" over to also

Use the focus event to know when an input is active (ie, has been "tabbed" to). Alternatively, the blur event can be used if you want to know when a user is "leaving" the input field. ('blur' is the opposite of 'focus')

$price.on("focus click", function() {
    $("#pdf_calculator").fadeIn();
});

3. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?

Grab the amount typed in by the user, convert it to a numerical value, then perform your validation steps.

$price.on("focus click", function() {
    // Do some validation checking on the amount entered.
    var enteredValue = parseFloat($price.val());
    if (!isNaN(enteredValue) && enteredValue > 0) {
        $("#pdf_calculator").fadeIn();
    }
});

4. What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.

Simply check that the checkbox is checked using jQuery's is(":checked") then combine the steps above, and your fully working code looks like this:

var $price = $("#price");

$price.on("focus click blur", function() {

    // your checkbox element
    var checkbox = $("#show_calculator");

    // Check if the checkbox is checked
    if (checkbox.is(":checked")) {

        // convert the entered string to a number
        // then validate it according to your needs
        var enteredValue = parseFloat($price.val());
        if (!isNaN(enteredValue) && enteredValue > 0) {

            // if all conditions are met, 
            // show the pdf calculator
            $("#pdf_calculator").fadeIn();
        }
    }
});

Click here to review a working jsfiddle of these ideas.

As for the pdf form (and getting values in and out again of a pdf form) there isn't a straight-forward method that doesn't involve a 'hack' (that may or may not work across different browsers). If the pdf only has ONE input, then you can capture the keyboard events on your form popup, and send them back to the HTML form (which is an ugly hack), but if this were my project, I would just convert the pdf functionality to javascript, and then you have all the freedom you need, and your calculator is 100% compatible with the rest of your application.

Hope this helps!