Results 1 to 3 of 3

Thread: Creating a custom prompt dialog box to retrieve value of text field & store as a var

  1. #1
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Creating a custom prompt dialog box to retrieve value of text field & store as a var

    Hello World of Gurus and Infinite Wizards of Excellence:

    I frantically really need your help with this,

    As we all know it, the variable "x" can normally be set using the following default method below:

    Code:
    var x = prompt("Please enter your name:","John Smith")
    I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript mind and have little experience in that near almost impossible department.

    Expected result:
    Code:
    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. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    a standard alert will halt the javascript until the alert is closed, a custom alert will not

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    
    <script type="text/javascript">
    function testit() {
    
     alertBox('Enter your firstname','prompt','John Smith')
    
    
    }
    
    function alertReturn(r) {
     alert(r)
    }
    
    function alertBox(text, type, text) {
    
        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"
            document.getElementById('alertBox_button').onclick = function(){ alertReturn(document.getElementById('ptext').value); alertBox_hide() }
            if (text) { document.getElementById('ptext').value = text }
    
        }
        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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2011
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Wow!

    The code works flawlessly!!!

    Thanks so much for all your expertise and wonderful help Phil.

    I think it is best sometimes to have a second set of fresh eyes review and approach a problem from a totally different perspective. I appreciate all your effort on this one. You just made my day.

    Cheers and have an awesome day! =)

    Jay

Similar Threads

  1. Replies: 2
    Last Post: 03-22-2012, 02:18 PM
  2. Resolved Creating an sql database to store an ip adress
    By keyboard in forum MySQL and other databases
    Replies: 18
    Last Post: 07-25-2011, 10:16 PM
  3. How to Store/Edit/Retrieve Central Data for Free?
    By Alice Moore in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-14-2010, 09:10 AM
  4. Creating Text Field
    By jfreak53 in forum Flash
    Replies: 1
    Last Post: 03-07-2009, 10:59 PM
  5. Replies: 8
    Last Post: 09-29-2007, 09:26 AM

Bookmarks

Posting Permissions

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