Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Callback to grab a text field value in a custom prompt box & store it as a global var

    Hello,

    I reallly need your help,

    Regularly a user can use the following to callback a value:

    var x = prompt("Please enter your name:","John Smith")

    I'd very much similarly like to mimic the above code with and writting it to work with my existing dynamic/custom dialog/prompt box. I am very not much familiar with asynchronous javascript:

    var x = alertBox('Enter your firstname','prompt','John Smith')

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    
    <script type="text/javascript">
    function testit() {
    
    var x = alertBox('Enter your firstname','prompt','John Smith')
    
    alert(x)
    
    }
    
    function alertBox(text, type, ptext) {
    
        var button  =   '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
    
        var field   =   '<div><input id="ptext" class="field" type="text"></div>'
    
        if (type == "err") {
            document.getElementById('alertBox_text').innerHTML = text + button
            document.getElementById('alertBox_text').style.color = "#FF0000"
            document.getElementById('alertBox_text').style.top = "50%"
        }
        else if (type == "ok") {
            document.getElementById('alertBox_text').innerHTML = text + button
            document.getElementById('alertBox_text').style.top = "50%"
        }
        else if (type == "prompt") {
            document.getElementById('alertBox_text').innerHTML = text + field + button
            document.getElementById('alertBox_text').style.top = "25%"
            document.getElementById('alertBox_button').value = "OK"
            if (ptext) { document.getElementById('ptext').value = ptext }
    
        }
        else {
            document.getElementById('alertBox_text').innerHTML = text
        }
    
        document.getElementById('alertBox_container').style.visibility = 'visible'
    
    }//end function
    
    function alertBox_hide() {
    
        document.getElementById('alertBox_container').style.visibility = 'hidden'
    
    }
    </script>
    
    
    
    <style type="text/css">
    .field {
        border: 1px solid #808080;
        width: 475px;
        font-family: Arial;
        font-size: 9pt;
        padding-left: 3px;
        font-weight: bold;
        margin: 1px;
    }
    #alertBox {
        height: 100px;
        width: 500px;
        bottom: 50%;
        right: 50%;
        position: absolute;
        font-family: Arial;
        font-size: 9pt;
        visibility: hidden;
    }
    
    #alertBox_container {
        border: 1px solid #808080;
        left: 50%;
        padding: 10px;
        top: 50%;
        margin: 0;
        padding: 0;
        height: 100%;
        border: 1px solid rgb(128,128,128);
        height: 100%;
        position: relative;
        color: rgb(11,63,113);
    }
    
    #alertBox_titlebar {
        cursor: pointer;
        height: 22px;
        width: 100%;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
        line-height:22px;
        font-weight: bold;
    }
    #alertBox_close {
        line-height: 10px;
        width: 17px;
    
        margin-top: 2px;
        margin-right: 2px;
        padding: 1px;
    
        position:absolute;
        top:0;
        right:0;
    
        font-size: 10px;
        font-family: tahoma;
        font-weight: bold;
    
        color: #464646;
        border: 1px solid;
        border-color: #999 #666 #666 #999;
        background-color:#ccc;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7'); 
    }
    #alertBox_close:hover {
        background-color: #ddd;        
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
        color: #000000;
    }
    #alertBox_text {
        position: absolute;
        width: 100%;
        height: auto;
        top: 50%;
        text-align: center;
    }
    .button {
        color:              #464646;
        font-family:        Arial;
        font-size:          9pt;
        height:             23px;
        border:             1px solid;
        border-color:       #999 #666 #666 #999;
        background-color:   #ccc;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
        width: 67px;
    }
    
    }
    .button:hover {
        background-color: #ddd;        
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
        color: #000000;
    }
    </style>
    </head>
    <body>
    
    <input type="button" value="testme" onclick="testit()">
    <br>
        <div id="alertBox">
            <div id="alertBox_container">
                <div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
                <div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
                <div id="alertBox_text"></div>
            </div>
        </div>
    
    </body>
    </html>

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    you can't have a custom dialog behave in a sync fashion without using showModalDialog(), you'll have to use a callback and resume your code execution upon callback invocation. so, you would pass a function to alertbox, perhaps function(data){alert(data);}, and execute that function when a button is clicked in your alertbox getup.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •