抓取jQuery Promtbox值并存储到var中

时间:2013-10-25 03:25:09

标签: javascript jquery

我需要你的帮助,

出于某种原因,一旦调用了jQuery Prompt框,我就无法设置“myvar”的值。此文件的代码位于:http://pastebin.com/40hD3Q8e

如何修改以下代码,以便我能够设置提示框文本的myvar值。

<!DOCTYPE HTML>
<html>

<head>


        <style type="text/css">

            /* Custom dialog styles */
            #popup_container.style_1 {
                font-family: Georgia, serif;
                color: #A4C6E2;
                background: #005294;
                border-color: #113F66;
            }

            #popup_container.style_1 #popup_title {
                color: #FFF;
                font-weight: normal;
                text-align: left;
                background: #76A5CC;
                border: solid 1px #005294;
                padding-left: 1em;
            }

            #popup_container.style_1 #popup_content {
                background: none;
            }

            #popup_container.style_1 #popup_message {
                padding-left: 0em;
            }

            #popup_container.style_1 INPUT[type='button'] {
                border: outset 2px #76A5CC;
                color: #A4C6E2;
                background: #3778AE;
            }

        </style>

        <!-- Core files -->
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery.alerts.js" type="text/javascript"></script>
        <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
function test(){
var myvar
    alert("working")

    jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    //if( r ) { alert('You entered ' + r) }
    myvar = r
    });

    alert(myvar)
}

</script>

    </head>

    <body>

                <input id="alert_button" type="button" value="Show Alert" />

                <input id="confirm_button" type="button" value="Show Confirm" />

                <input id="prompt_button" type="button" value="Show Prompt" />

                <input id="alert_button_with_html" type="button" value="Show Alert" />

                <input id="style_1" class="alert_style_example" type="button" value="Style 1" />

                <br>

                <input type="button" onclick="test()" value="testthis"/>


    </body>

</html>

1 个答案:

答案 0 :(得分:1)

它无效,因为您的alert(myvar);jPropmt()的回调之前执行,如:

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    //if( r ) { alert('You entered ' + r) }
    myvar = r;
});

alert(myvar); //这会在jPrompt()的回调之前执行,因此你可以在html中创建一个带有一些id的隐藏字段,比如prompt_val,然后执行:

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) { 
        $("#prompt_val").val(r);
    }
});

并从隐藏字段中获取值