Bootstrap Password Revealer進入Bug

Question

Bootstrap密碼啓示器，當我懸停眼睛按鈕時，會使PC掛起。即使沒有代碼來添加輸入，它也會自動添加輸入。 輸入已自動增加，它使我的bowser繼續，然後是我的整個PC。 這有什麼可能的原因和解決方案？這會導致我的電腦掛起。

的jsfiddle：https://jsfiddle.net/aice09/76b99w4m/

//Password Revealer 
 
$(".reveal").mousedown(function() { 
 
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'text')); 
 
    }) 
 
    .mouseup(function() { 
 
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password')); 
 
    }) 
 
    .mouseout(function() { 
 
    $(".pwd").replaceWith($('.pwd').clone().attr('type', 'password')); 
 
    });

.btn-primary { 
 
    color: #0275d8; 
 
    background-image: none; 
 
    background-color: transparent; 
 
    border-color: #0275d8; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #0275d8; 
 
    color: white; 
 
    border-color: #0275d8; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.3.min.jshttps://code.jquery.com/jquery-1.12.3.min.js"></script> 
 

 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
    <div class="form-group"> 
 
    <label for="em_password">Password</label> 
 
    <div class="input-group"> 
 
     <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8"> 
 
     <span class="input-group-btn"> 
 
             <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button> 
 
            </span> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- // Modal -->

Answer 1

我只是想設置的密碼輸入的type到text當你點擊.reveal

//Password Revealer 
 
$(".reveal").on('click',function() { 
 
\t $('#em_password').attr('type','text'); 
 
})

.btn-primary { 
 
    color: #0275d8; 
 
    background-image: none; 
 
    background-color: transparent; 
 
    border-color: #0275d8; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #0275d8; 
 
    color: white; 
 
    border-color: #0275d8; 
 
} 
 

 
.btn-success { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
} 
 

 
.btn-success:hover { 
 
    color: #fff; 
 
    background-color: #449d44; 
 
    border-color: #419641; 
 
} 
 

 
.btn-info { 
 
    color: #fff; 
 
    background-color: #5bc0de; 
 
    border-color: #5bc0de; 
 
} 
 

 
.btn-info:hover { 
 
    color: #fff; 
 
    background-color: #31b0d5; 
 
    border-color: #2aabd2; 
 
} 
 

 
.btn-warning { 
 
    color: #fff; 
 
    background-color: #f0ad4e; 
 
    border-color: #f0ad4e; 
 
} 
 

 
.btn-warning:hover { 
 
    color: #fff; 
 
    background-color: #ec971f; 
 
    border-color: #eb9316; 
 
} 
 

 
.btn-danger { 
 
    color: #fff; 
 
    background-color: #d9534f; 
 
    border-color: #d9534f; 
 
} 
 

 
.btn-danger:hover { 
 
    color: #fff; 
 
    background-color: #c9302c; 
 
    border-color: #c12e2a; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="navigation"></div> 
 

 
<!-- Content Section --> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <h1>Employee</h1> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <div class="pull-right"> 
 
     <button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb"> 
 
     <div class="records_content"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /Content Section --> 
 

 
<!-- Bootstrap Modals --> 
 
<!-- Modal - Add New Record/User --> 
 
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Add New Employee</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_firstname">First Name</label> 
 
       <input type="text" id="em_firstname" placeholder="First Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_middlename">Middle Name</label> 
 
       <input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_lastname">Last Name</label> 
 
       <input type="text" id="em_lastname" placeholder="Last Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_id">System ID</label> 
 
       <input type="text" id="em_id" placeholder="System ID" class="form-control" readonly /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
 
      <div class="form-group"> 
 
       <label for="em_email">Email</label> 
 
       <input type="text" id="em_email" placeholder="Email" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_position">Position</label> 
 
       <select name="em_position" id="em_position" class="form-control" required="required"> 
 
       <option value="Position 1">Position 1</option> 
 
       <option value="Position 2">Position 2</option> 
 
       <option value="Position 3">Position 3</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_department">Department</label> 
 
       <select name="em_department" id="em_department" class="form-control" required="required"> 
 
       <option value="Department 1">Department 1</option> 
 
       <option value="Department 2">Department 2</option> 
 
       <option value="Department 3">Department 3</option> 
 
       <option value="Department 4">Department 4</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_password">Password</label> 
 
       <div class="input-group"> 
 
       <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8"> 
 
       <span class="input-group-btn"> 
 
             <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button> 
 
            </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- // Modal --> 
 

 
<!-- Modal - Update User details --> 
 
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Update</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_firstname">First Name</label> 
 
       <input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_middlename">Middle Name</label> 
 
       <input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_lastname">Last Name</label> 
 
       <input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_id">System ID</label> 
 
       <input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
 
      <div class="form-group"> 
 
       <label for="em_email">Email</label> 
 
       <input type="text" id="update_em_email" placeholder="Email" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_position">Position</label> 
 
       <select name="update_em_position" id="update_em_position" class="form-control" required="required"> 
 
       <option value="Position 1">Position 1</option> 
 
       <option value="Position 2">Position 2</option> 
 
       <option value="Position 3">Position 3</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_department">Department</label> 
 
       <select name="update_em_department" id="update_em_department" class="form-control" required="required"> 
 
       <option value="Department 1">Department 1</option> 
 
       <option value="Department 2">Department 2</option> 
 
       <option value="Department 3">Department 3</option> 
 
       <option value="Department 4">Department 4</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_password">Password</label> 
 
       <div class="input-group"> 
 
       <input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11"> 
 
       <span class="input-group-btn"> 
 
             <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button> 
 
            </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button> 
 
     <input type="hidden" id="hidden_user_id"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

以下是我將如何處理您的原始活動。

//Password Revealer 
 
$passwd = $('#em_password'); 
 

 
$(".reveal").mousedown(function() { 
 
    $passwd.attr('type', 'text'); 
 
    }) 
 
    .mouseup(function() { 
 
    $passwd.attr('type', 'password'); 
 
    }) 
 
    .mouseout(function() { 
 
    $passwd.attr('type', 'password'); 
 
});

.btn-primary { 
 
    color: #0275d8; 
 
    background-image: none; 
 
    background-color: transparent; 
 
    border-color: #0275d8; 
 
} 
 

 
.btn-primary:hover { 
 
    background-color: #0275d8; 
 
    color: white; 
 
    border-color: #0275d8; 
 
} 
 

 
.btn-success { 
 
    color: #fff; 
 
    background-color: #5cb85c; 
 
    border-color: #5cb85c; 
 
} 
 

 
.btn-success:hover { 
 
    color: #fff; 
 
    background-color: #449d44; 
 
    border-color: #419641; 
 
} 
 

 
.btn-info { 
 
    color: #fff; 
 
    background-color: #5bc0de; 
 
    border-color: #5bc0de; 
 
} 
 

 
.btn-info:hover { 
 
    color: #fff; 
 
    background-color: #31b0d5; 
 
    border-color: #2aabd2; 
 
} 
 

 
.btn-warning { 
 
    color: #fff; 
 
    background-color: #f0ad4e; 
 
    border-color: #f0ad4e; 
 
} 
 

 
.btn-warning:hover { 
 
    color: #fff; 
 
    background-color: #ec971f; 
 
    border-color: #eb9316; 
 
} 
 

 
.btn-danger { 
 
    color: #fff; 
 
    background-color: #d9534f; 
 
    border-color: #d9534f; 
 
} 
 

 
.btn-danger:hover { 
 
    color: #fff; 
 
    background-color: #c9302c; 
 
    border-color: #c12e2a; 
 
}

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div id="navigation"></div> 
 

 
<!-- Content Section --> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <h1>Employee</h1> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <div class="pull-right"> 
 
     <button class="btn btn-success addnewemployee" data-toggle="modal" data-target="#add_new_record_modal">Add New Job</button> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sales_individual_tb"> 
 
     <div class="records_content"></div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- /Content Section --> 
 

 
<!-- Bootstrap Modals --> 
 
<!-- Modal - Add New Record/User --> 
 
<div class="modal fade bs-example-modal-lg" id="add_new_record_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Add New Employee</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_firstname">First Name</label> 
 
       <input type="text" id="em_firstname" placeholder="First Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_middlename">Middle Name</label> 
 
       <input type="text" id="em_middlename" placeholder="Middle Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_lastname">Last Name</label> 
 
       <input type="text" id="em_lastname" placeholder="Last Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_id">System ID</label> 
 
       <input type="text" id="em_id" placeholder="System ID" class="form-control" readonly /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
 
      <div class="form-group"> 
 
       <label for="em_email">Email</label> 
 
       <input type="text" id="em_email" placeholder="Email" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_position">Position</label> 
 
       <select name="em_position" id="em_position" class="form-control" required="required"> 
 
       <option value="Position 1">Position 1</option> 
 
       <option value="Position 2">Position 2</option> 
 
       <option value="Position 3">Position 3</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_department">Department</label> 
 
       <select name="em_department" id="em_department" class="form-control" required="required"> 
 
       <option value="Department 1">Department 1</option> 
 
       <option value="Department 2">Department 2</option> 
 
       <option value="Department 3">Department 3</option> 
 
       <option value="Department 4">Department 4</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_password">Password</label> 
 
       <div class="input-group"> 
 
       <input id="em_password" name="em_password" type="password" class="form-control pwd" maxlength="8"> 
 
       <span class="input-group-btn"> 
 
             <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button> 
 
            </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" onclick="addRecord()">Add Record</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- // Modal --> 
 

 
<!-- Modal - Update User details --> 
 
<div class="modal fade bs-example-modal-lg" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Update</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_firstname">First Name</label> 
 
       <input type="text" id="update_em_firstname" placeholder="First Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_middlename">Middle Name</label> 
 
       <input type="text" id="update_em_middlename" placeholder="Middle Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_lastname">Last Name</label> 
 
       <input type="text" id="update_em_lastname" placeholder="Last Name" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_id">System ID</label> 
 
       <input type="text" id="update_em_id" placeholder="System ID" class="form-control" readonly /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
 
      <div class="form-group"> 
 
       <label for="em_email">Email</label> 
 
       <input type="text" id="update_em_email" placeholder="Email" class="form-control" /> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_position">Position</label> 
 
       <select name="update_em_position" id="update_em_position" class="form-control" required="required"> 
 
       <option value="Position 1">Position 1</option> 
 
       <option value="Position 2">Position 2</option> 
 
       <option value="Position 3">Position 3</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_department">Department</label> 
 
       <select name="update_em_department" id="update_em_department" class="form-control" required="required"> 
 
       <option value="Department 1">Department 1</option> 
 
       <option value="Department 2">Department 2</option> 
 
       <option value="Department 3">Department 3</option> 
 
       <option value="Department 4">Department 4</option> 
 
       </select> 
 
      </div> 
 
      </div> 
 

 
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> 
 
      <div class="form-group"> 
 
       <label for="em_password">Password</label> 
 
       <div class="input-group"> 
 
       <input id="update_em_password" name="update_em_password" type="password" class="form-control pwd" maxlength="8" value="11"> 
 
       <span class="input-group-btn"> 
 
             <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button> 
 
            </span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
 
     <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()">Save Changes</button> 
 
     <input type="hidden" id="hidden_user_id"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>