CODEWITHSUNDEEP
javascriptjquery
Kieran Quinn
Kieran Quinn

Reputation: 1115

Zebra_Dialog - Get input texbox value

I'm trying to use a Zebra_Dialog modal window as a small form for user input. However, when retrieving the textbox values, it returns a blank string every time. This is what I'm using to create the pop-up:

new $.Zebra_Dialog("<table><tr><td>Request ID:</td><td><input id='txtRequest' type='text' /></td></tr><tr><td>Request Title:</td><td><input id='txtTile' type='text' /></td></tr></table>", {
    'type': 'information',
    'title': 'Save Estimate',
    'buttons':
        [
            {
                caption: 'Submit', callback: function () {
                    UploadToDB();
                    return false;
                }
            },
            {
                caption: 'Cancel', callback: function () {
                }
            }
        ]
});

When the UploadToDB method fires it has this code to get the value from the dynamically created textboxes:

function UploadToDB() {
    var param = {
        requestID: document.getElementById("txtRequest").value,
        requestTitle: document.getElementById("txtTitle").value
    };
//Other code here.....
}

I've also tried different variations such as requestID: $("#txtRequest").val(),.

Every time though I get a blank string back. Any help appreciated.

Upvotes: 1

Views: 271

Answers (1)

Steve Flitman
Steve Flitman

Reputation: 11

I really like Zebra_Dialog, so I wrote these helper functions. zprompt() is the one you want, it turns out to be a little tricky to get Zebra to handle prompt, and I couldn't get zprompt or zconfirm to act like synchronous Javascript functions prompt or confirm which is why they have callbacks. The OP has the same problem I had, which is that the text input vanishes on closure and jquery cannot get its value, that's why I use the old-fashioned onchange handler below.

function zalert(msg,title,type) {
  $.Zebra_Dialog(msg,"title":title||'Alert',"type":type||'error',"position":['center','top+50']});
}

function zconfirm(msg,title,okproc) {
    $.Zebra_Dialog(msg,{
        'type':     'question',
        'title':    title||'Confirm?',
        'position': ['center','top+50'],
        'buttons':  ['OK','Cancel'],
        'onClose':  function(caption) {
                       if (caption=="OK")
                          okproc();
                    }
    });
}

var zprompt_value='';
function zprompt(msg,deftxt,title,okproc) {
   var len=deftxt.length;
   var wd=len*10;
   if (wd<220) wd=300;
   var size=len || 24;
   $.Zebra_Dialog(msg,{
       'title':    title||'Confirm?',
       'message':  msg+"<br><input type=text onchange='zprompt_value=this.value' value='"+deftxt+"' size="+size+">",
       'width':    wd,
       'position': ['center','top+50'],
       'buttons':  ['OK','Cancel'],
       'onClose':  function(caption) {
                      if (caption=="OK")
                         okproc(zprompt_value);
                   }
});

Here are some examples how they might be called:

zalert("Big mistake!","Report","error");

zconfirm("Are you sure you want to format the drive?","Confirm?",function(){
    format_drive();  //  Ack!
});

zprompt("Enter a funny nickname:","(nickname)","Nickname",function(n){
    set_nickname(n); 
});

Hope that helps someone, it took most of an afternoon to figure it out! If there's a better way to do it, please tell me.

SSF

Upvotes: 1

Related Questions