Getting value to dialog box

Question

I have a span which is used to add some content to DB with the help of a popup box. My problem is that I don't know how to pass ID to dialog box.

HTML:

<span class="block"><span class="uid" style="display:none">1</span></span>

JS:

 $(document).ready(function() {
      $(function() {
           $("#Relation").dialog({
                autoOpen: false
           });
           $(".addRelation").on("click", function() {
                var uid = $(this).find('span').html();                                     
                $("#Relation").dialog("open");
           });
      });
 });

This function opens a dialog box which used for adding datas.

 <div id="Relation" title="Add Relation">
      <form action="#" method="post" enctype="multipart/form-data">
           <div class="input-group">
                <input class="form-control" name="userId" id="userId" value="userId" type="hidden" placeholder="Enter e-mail Id">
                <input class="form-control" name="rq_id" id="rq_id" value="rq_id" type="hidden">
                <input class="form-control" name="rltn_name" id="rltn_name" type="text" placeholder="Enter Name">
                <input class="form-control" name="email_id" id="email" type="text" placeholder="Enter e-mail Id">
                <input class="form-control" name="phone" id="phone" type="text" placeholder="Enter phone no">
                <input class="" name="newpic" id="newpic" type="file">
                <input type="radio" name="live_status" class="live_status" value="1">Alive&nbsp;&nbsp;<input type="radio" class="live_status" name="live_status" value="0">not Alive
                <input class="btn btn-info" type="submit" name="submit" value="Add Now"/>
           </div>
      </form>
 </div>

When I click the span , the span data inside the dialog box. I don't know how to implement this.

Answer 1

Then add an hidden field like

<input class="form-control" name="uid" id="r_uid" value="111" type="hidden">

then set the value of the hidden field before opening it

$(function () {
    $("#Relation").dialog({
        autoOpen: false
    });
    $(".addRelation").on("click", function () {
        var uid = $(this).find('span').html();
        $('#r_uid').val(uid)
        $("#Relation").dialog("open");

    });
});

Answer 2

If you want the span value in <input class="form-control" name="userId" id="userId" value="userId" type="hidden" placeholder="Enter e-mail Id"> , try this.

$(document).ready(function() {
      $(function() {
           $("#Relation").dialog({
                autoOpen: false
           });
           $(".addRelation").on("click", function() {
                var uid = $(this).find('span.uid').html(); 
                $('#userId').val(uid);                               
                $("#Relation").dialog("open");
           });
      });
 });