如何在模态对话框中设置输入值? [英] How to set the input value in a modal dialogue?

查看:54
本文介绍了如何在模态对话框中设置输入值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发'添加链接'功能。为此,我正在使用来自Twitter Boostrap JS的模态插件。在主页面上只有要填充的链接字段,当用户点击添加链接按钮时,会弹出一个模式,用户会看到完整的表单以填充3个字段:链接,标题,标签。但是,我希望链接字段预先填充上一步的值。它类似于你在delicious.com上保存链接时发生的情况。



感谢Joe的帮助(上一个问题)我可以在模态对话框上打印linkURL,但这个linkURL很重要具有3个字段(链接,标题,标签)的表单的链接字段的值。知道如何做到这一点?谢谢!

 < html> 
< head>
< title>示例< / title>
< script src =scripts / jquery.min.js>< / script>
< script src =scripts / bootstrap-modal.js>< / script>
< link rel =stylesheethref =scripts / bootstrap.min.css>
< link rel =stylesheethref =main.css/>

< script type =text / javascript>
$(document).ready(function()
{
$('#modal-from-dom')。bind('show',function()
{
$(。modal-body)。html($(#linkURL)。val());
});
});
< / script>
< / head>
< body>
<! - 模态对话 - >
< div id =modal-from-domclass =modal hide fade>
< div class =modal-header>
< a href =#class =close>& times;< / a>
< h3>添加链接< / h3>
< / div>
< div class =modal-body>
<! -
< form id ='post-on-wall'method ='POST'action ='savePost.php'enctype ='multipart / form-data'>
< input type ='text'class ='label-inline'name ='linkURL'id ='wall-post'value = linkURL>
< / form>
- > ;
< / div>
< div class =modal-footer>
< a href =#class =btn primary>添加链接< / a>
< / div>
< / div>
< div class =container>
< div class =wall-post>
< textarea class ='label-inline'name ='linkURL'id ='linkURL'>< / textarea>
< button data-controls-modal =modal-from-dom data-backdrop =truedata-keyboard =trueclass =btn>添加链接< / button>
< / div>
< / div>

< / body>


解决方案

  $('#modal-from-dom')。bind('show',function()
{
$(。modal- body#wall-post)。val($(#linkURL)。val());
});

还是我错过了什么? :)


I'm working on 'add a link' functionality. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill 3 fields: link, title, tags. However, I want the link field to be pre-filled with the value from the previous step. It's similar to what happens when you 'save a link' on delicious.com.

Thanks to Joe's help (previous question) I can print the linkURL on the modal dialogue, but it's important that this linkURL is the value of the link field of the form with 3 fields (link, title, tags). Any idea how this can be done? Thanks!

<html>
<head>
  <title>Example</title>
  <script src="scripts/jquery.min.js"></script>
  <script src="scripts/bootstrap-modal.js"></script>
  <link rel="stylesheet" href="scripts/bootstrap.min.css">
  <link rel="stylesheet" href="main.css" />

  <script type="text/javascript">
            $(document).ready(function()
            {
                $('#modal-from-dom').bind('show',function()
                {
                    $(".modal-body").html($("#linkURL").val());
                });
            });
    </script>
</head>
<body>
  <!-- The Modal Dialog  -->
          <div id="modal-from-dom" class="modal hide fade">
            <div class="modal-header">
                <a href="#" class="close">&times;</a>
                <h3>Add Link</h3>
            </div>
            <div class="modal-body">
            <!--
            <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'>"
        <input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>
            </form>
            -->
            </div>
            <div class="modal-footer">
                <a href="#" class="btn primary">Add Link</a>
            </div>
        </div>
  <div class="container">
    <div class="wall-post">
        <textarea class='label-inline' name='linkURL' id='linkURL'></textarea>
        <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
    </div>
  </div>

</body>

解决方案

      $('#modal-from-dom').bind('show',function()
            {
                $(".modal-body #wall-post").val($("#linkURL").val());
            });

or am i missing something? :)

这篇关于如何在模态对话框中设置输入值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆