如何在提示中获取按下按钮的值(即兴)

时间:2015-03-18 02:26:08

标签: javascript jquery html javascript-events

我一直在对我的系统进行编码,我发现在提示中获取按下按钮的值很困难。

这是我在系统中使用的代码。

function confirmme(){
        var ans;
        $.prompt("Open your javascript console to see the answer.", {
            title: "Are you Ready?",
            buttons: { "Yes, I'm Ready": true, "No, Lets Wait": false },
            submit: function(e,v,m,f){
                // use e.preventDefault() to prevent closing when needed or return false. 
                // e.preventDefault(); 
                ans = v;
            }
        });

        if(ans){
            return true;
            alert("Value clicked was: "+ v);
        } else{
            return false;
            alert("Value clicked was: "+ v);
        }
    }

这是我的HTML代码。

<input type="submit" class="add" name="add" id="add-submit" value="ADD" onclick="return confirmme()">

这是我的jsfiddle。 http://jsfiddle.net/mjanthrax/gov5nw6c/

这是我的验证码

var promptText = "The form will be submitted, continue?";
            event.preventDefault(); // Prevent default submit
            var frm = this;
            var validator = new FormValidator('adding_form', [{
            name: 'firstname',
            display: 'First Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'midname',
            display: 'Middle Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'lastname',
            display: 'Last Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'birthmonth',
            display: 'Birth Month',
            rules: 'required'
        }, {
            name: 'birthday',
            display: 'Birth Day',
            rules: 'required'
        }, {
            name: 'birthyear',
            display: 'Birth Year',
            rules: 'required'
        }, {
            name: 'groupcombo',
            display: 'Choose Group',
            rules: 'required'
        }, {
            name: 'addblock',
            display: 'Block',
            rules: 'required|min_length[1]'
        }, {
            name: 'addlot',
            display: 'Lot',
            rules: 'required|min_length[1]'
        }, {
            name: 'addbrgy',
            display: 'Barangay',
            rules: 'required|min_length[2]'
        }, {//surety maker
            name: 'sfirstname',
            display: 'Surety-maker\'s First Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'smidname',
            display: 'Surety-maker\'s Middle Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'slastname',
            display: 'Surety-maker\'s Last Name',
            rules: 'required|min_length[2]|alpha'
        }, {
            name: 'sbirthmonth',
            display: 'Surety-maker\'s Birth Month',
            rules: 'required'
        }, {
            name: 'sbirthday',
            display: 'Surety-maker\'s Birth Day',
            rules: 'required'
        }, {
            name: 'sbirthyear',
            display: 'Surety-maker\'s Birth Year',
            rules: 'required'
        }, {
            name: 'saddblock',
            display: 'Surety-maker\'s Block',
            rules: 'required|min_length[1]'
        }, {
            name: 'saddlot',
            display: 'Surety-maker\'s Lot',
            rules: 'required|min_length[1]'
        }, {
            name: 'saddbrgy',
            display: 'Surety-maker\'s Barangay',
            rules: 'required|min_length[2]'
        }, {
            name: 'loanamount',
            display: 'Loan amount',
            rules: 'required|callback_check_loan'
        }],
         function(errors, evt) {

            /*
             * for promptssssss
             */

            var SELECTOR_ERRORS = $('.error_box'),
                SELECTOR_SUCCESS = $('.success_box');

            if (errors.length > 0) {
                SELECTOR_ERRORS.empty();

                //fethcing error messages
                for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
                    SELECTOR_ERRORS.append(errors[i].message + '<br />');
                }
                if(ageC<18){
                    SELECTOR_ERRORS.append(messC + '<br />');
                }
                if(ageS<18){
                    SELECTOR_ERRORS.append(messS + '<br />');
                }

                SELECTOR_SUCCESS.css({ display: 'none' });
                SELECTOR_ERRORS.fadeIn(200);
                SELECTOR_ERRORS.click(function(){
                    SELECTOR_ERRORS.fadeOut(500);
                });
                //reset values
                $('#resetme').click(function(){
                    reset();
                    SELECTOR_ERRORS.fadeOut(500);
                });
                setTimeout(function(){ SELECTOR_ERRORS.fadeOut(800); }, 10000);
            } else {
                SELECTOR_ERRORS.css({ display: 'none' });
                SELECTOR_SUCCESS.fadeIn(200);
                SELECTOR_SUCCESS.click(function(){
                    SELECTOR_SUCCESS.fadeOut(800);
                });
                setTimeout(function(){ SELECTOR_SUCCESS.fadeOut(800); }, 5000);
            }

            if (evt && evt.preventDefault) {
                evt.preventDefault();
                event.returnValue = true;
            } else if (event) {
                event.returnValue = false;
            }

        });

        // new FormValidator();
        validator.registerCallback('check_loan', function(value) {
            if ((value)>=1000) {
                return true;
            }
            return false;
        })
        .setMessage('check_loan', 'Loan Amount must be atleast \&\#8369 1000.');

我在我的代码中使用了validate.js.

1 个答案:

答案 0 :(得分:0)

问题是确认对话框未阻止,因此单击事件处理程序将在单击确认对话框中的是/否选项之前完成。

所以

<form id="myform" action="">
    <input type="submit" class="add" name="add" id="add-submit" value="ADD" />
</form>

然后

//dom ready handler
jQuery(function () {
    //use the forms submit event instead of the button click also use jQuery events instead of inline handlers
    $('#myform').submit(function (e) {
        var frm = this;

        //by defualt prevent the form submit
        e.preventDefault();

        //do your validation here, if invalid don't show the prompt

        //show the confirm dialog
        $.prompt("Open your javascript console to see the answer.", {
            title: "Are you Ready?",
            buttons: {
                "Yes, I'm Ready": true,
                    "No, Lets Wait": false
            },
            submit: function (e, v, m, f) {
                if (v) {
                    //if confirmed submit the form
                    frm.submit()
                }
            }
        });
    })
})

演示:Fiddle