Javascript 使用php在弹出窗口中显示表单的图像

我需要使用php在弹出窗口中显示表单详细信息。当用户输入详细信息时，必须在弹出窗口中显示详细信息的位置显示弹出窗口。。细节显示得很好。。我希望在图像字段中使用图像而不是文本。我无法在图像字段中显示图像而不是文本这是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
  var $title = $('#title')
  var $image = $('#image')
  var $filterDate = $('#filterDate')
  var $description = $('#description')

  $('#myForm').validate({
  submitHandler: function(form) {
    // some other code
    // maybe disabling submit button
    // then:
   // $(form).submit();
   $('.title').text($title.val())
   $('.image').text($image.val())
   $('.filterDate').text($filterDate.val())
   $('.description').text($description.val())
   $( ".modalDialog" ).dialog();
  }
  });


});
    </script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<form method="post" align="center" id="myForm">
                                <div class="login">
                                    <div class="login-form">
                                        <h3>Title:</h3>
                                        <input type="text" name="title" id="title" required/><br />
                                        <h3>Image:</h3>
                                        <input type="text" name="image" id="image"  required/>
                                        <br />
                                        <h3>Date:</h3>
                                        <input type="text" id="filterDate" name="date"  required/>
                                        <br />
                                        <h3>Description:</h3> 
                                        <textarea rows="2" cols="40" name="description" id="description" required>
                                        </textarea>
                                        <br />

                                        <button type="submit" id="myBtn">Open Modal</button>



                                    </div>
                                </div>

                            </form>

<div class="modalDialog" title="Preview" style="display:none;">
 <span class="title" ><?php echo $_POST['title'] ?><br /></span></p>
  <p>Image :<span class="image"><img src="<?php echo $_POST['image'] ?>"/></span></p>
  <p>Date : <span class="filterDate"></span></p>
  <p>description : <span class="description"></span></p>


</div>

$（文档）.ready（函数（）{
变量$title=$（“#title”）
var$image=$（“#image”）
变量$filterDate=$（“#filterDate”）
变量$description=$（“#description”）
$（“#myForm”）。验证({
submitHandler:函数（表单）{
//其他代码
//可能禁用提交按钮
//然后：
//$（表单）.submit（）；
$（'.title'）.text（$title.val（））
$（'.image'）.text（$image.val（））
$（'.filterDate'）.text（$filterDate.val（））
$（'.description'）.text（$description.val（））
$（“.modalDialog”）.dialog（）；
}
});
});
标题：


图片：


日期：


说明：


开放模态


图片：“/>

日期：

说明：

表单中图像的具体显示内容是什么？您在输入图像中插入了什么…其url或任何其他文本？如果它是一个url，则它将显示精细的其他方式的图像而不是显示…您可以发送演示url给我向要显示图像的DOM添加图像标记吗？我假定输入标记“image”的值是指向mage？如果是这样，只需添加一个img标记并从字段值中获取src属性。我在表单中发送图像字段中图像的url。如何将图像标记添加到DOM以显示图像