使用jQuery在对话框中移动文本字段值

Question

I am having a button and a text field and textarea.Now what i was trying to do is that on click of button move the values of textfield and textarea into a dialog box where both can be edited.

So i wrote the following code for it :

In html :

<div id="dialog"></div>
<input type="button" value="EDIT" id="editbutton" name="editbutton" class="editbutton" style="float: right;"></input>
<input type="text" value="mytextvalue" id="edittitle" name="edittitle" class="edittitle" style="visibilty: hidden;"></input>
<textarea value="mytextarea" id="editsubject" name="editsubject" class="editsubject" style="visibilty: hidden;"></input>

In jquery i did something like this :

$('.editbutton').click(function ()
        {
           $("#dialog").dialog({
                autoOpen: true,
                modal: true,
                title: "Edit Your Question",
                width: 600,
                height: 300,
                resizable: false,
                buttons: { 

                "Edit": function() {
                $(this).dialog("close");

                callback("1");
            },
               "Discard": function() {
                $(this).dialog("close");
                callback("2");
            }

            }            
    });
});

Javascript callback function :

function callback(value,RowId) {

if (value=="1") {
    alert("edit");

} 
else if(value=="2"){

    alert("Rejected");
}
}

But my problem is to show the textfield and textarea in editable form in dialog box.Please help

Answer 1

I modified the code in your last comment from:

var qtitle=$('#questiontitle').val();
var qtext=$('#questiontext').val();
$("#dialog").html("Title: <input id='myquestiontitle' type='text'><br><br>Question : <input id='myquestion' type='text'>");

to:

var qtitle = $('#edittitle').val();
var qtext = $('#editsubject').val();
$("#dialog").html("Title: <input id='myquestiontitle' type='text' value='" + qtitle + "'><br><br>Question : <textarea id='myquestion'>" + qtext + "</textarea>");

This gets the values from the hidden input fields edittitle and editsubject and puts them into the editable input fields in the dialog.

Note how I've changed the second input field in the dialog to a textarea so it's consistent with the hidden input fields.

See here for a Fiddle.

Answer 2

Create dialog outside the click events. onclick just fire those callbacks.