最受欢迎

如何从另一个模态中的动态列表填充模态表单中的表单字段

Jquery - How to populate form fields in a modal form from a dynamic list in another modal?

本文关键字：表单 模态 填充 字段 列表 动态 另一个 | 更新日期: 2023-09-27

好吧，我尽量讲清楚。

我有一个页面与球队的花名册，你可以添加和删除。当你决定添加一个播放器，你点击"添加播放器"按钮，使用Jquery-UI，加载一个窗体的对话框模式。你可以填写表格并提交，它工作得很好。我还添加了一个"搜索"按钮，当点击时，会加载另一个模式，让你搜索现有玩家的DB。当它检索搜索结果时，它将它们加载到一个OL中。现在这里就变得棘手了:

我想有一个叫做"使用播放器信息"的按钮，当点击时，关闭搜索模式，并自动填充与所选播放器的信息的表单字段。

下面是搜索模式的代码:

Script(在head中):

<script type="text/javascript">
    $(function() {
        $(".search_button").click(function() {
            var search_word = $("#search_box").val();
            var dataString = 'search_word='+ search_word;
            if(search_word==''){
            } else {
                $.ajax({
                    type: "GET",
                    url: "searchdata.php",
                    data: dataString,
                    cache: false,
                    beforeSend: function(html) {
                        document.getElementById("insert_search").innerHTML = ''; 
                        $("#flash").show();
                        $("#searchword").show();
                        $(".searchword").html(search_word);
                        $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');
                    },
                    success: function(html){
                        $("#insert_search").show();
                        $("#insert_search").append(html);
                        $("#flash").hide();
                    }
                });
            }
            return false;
        });
    });
</script>


<div id="search" align="center">
    <div style="width:500px">
        <div style="text-align:center; padding-top:10px" class="title">Player Search</div>
        <div style="margin-top:20px; text-align:left">
            <form method="get" action="">
                <div style="margin:0; padding:0; float:left">
                    <input type="text" name="search" id="search_box" class='search_box'/> 
                </div>
                <div style="margin:0; padding:0; float:left; padding-left:8px; font-size:16px">
                    <input type="submit" value="Search" class="search_button" /> 
                </div>
            </form>
        </div>      
        <div style="width:480px; padding-left:10px; padding-right:10px;">
            <div id="flash"></div>
            <ol id="insert_search" class="update"> </ol>
        </div>
    </div>
</div>
以下是实际搜索函数的php代码:

<li><div id="all">
    <div id="result"><div id="names"><div id="lnames"><?php echo $final_msg; ?></div><div id="fnames">&nbsp;<?php echo $firstName ?></div></div><div id="dobs"><?php echo $DOB ?></div><div id="ids"><?php echo $ID ?></div>
    <div id="add"><button type="button" id="add_player2" > Add Player </button></div></div>
</div></li>

这里是表单modal的代码我想要输入的信息:

<script>
$(function() {
$( "#search" ).dialog({
autoOpen: false,
width: 550,
modal: true,
resizable: false,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$(".search_button").click(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;   
if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "../../Search/searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {   
document.getElementById("insert_search").innerHTML = ''; 
$("#flash").show();
$("#searchword").show();
 $(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');
 },
 success: function(html){
  $("#insert_search").show();
  $("#insert_search").append(html);
  $("#flash").hide();
  }
 });
 }
 return false;
});
 });
</script>
<script>
$(function() {
$("#dialog-form").dialog({autoOpen:!1, height:380, width:350, modal:!0, buttons:{
  "Search for Player":function() {
      $( "#search" ).dialog( "open" );
  },
  "Add Player":function() {
$("#myForm").ajaxSubmit({success:function() {
  window.location = ""
}});
$(this).dialog("close")
}, 
Cancel:function() {
$(this).dialog("close")
}
},
create:function () {
    $(this).closest(".ui-dialog")
        .find(".ui-button:contains(Search for Player)") // the first button
        .addClass("green");
}}); 

$("#add-player").button().click(function() {
$("#dialog-form").dialog("open")
})
});
</script>
     <div id="dialog-form" title="Add Player">
<form name="myForm" id="myForm" action="../../php/add_player_comp_script_test.php?id=<?     echo $table ?>" method="post" enctype="multipart/form-data">
<fieldset>
<label for="last_name_add">Last Name</label>
<input type="text" name="last_name_add" id="last_name_add" class="text ui-widget-content ui-corner-all" />
<label for="first_name_add">First Name</label>
<input type="text" name="first_name_add" id="first_name_add" class="text ui-widget-content ui-corner-all" />
<label for="id_add">ID Number</label>
<input type="text" name="id_add" id="id_add" value="" class="text ui-widget-content ui-corner-all" />
<label for="jersey_add">Jersey Number</label>
<input type="text" name="jersey_add" id="jersey_add" value="" class="text ui-widget-content ui-corner-all" />
<label  for="dob_add">DOB (YYYY-MM-DD)</label>
<input type="text" name="dob_add" id="dob_add" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>

感谢所有的帮助!

我假设这-

<li><div id="all">
    <div id="result"><div id="names"><div id="lnames"><?php echo $final_msg; ?></div><div id="fnames">&nbsp;<?php echo $firstName ?></div></div><div id="dobs"><?php echo $DOB ?></div><div id="ids"><?php echo $ID ?></div>
    <div id="add"><button type="button" id="add_player2" > Add Player </button></div></div>
</div></li>

是此成功函数中的html -

success: function(html){
         $("#insert_search").show();
         $("#insert_search").append(html);
         $("#flash").hide();
}

如果是这样，如果你返回一个json编码的数组json_encode()，而不是html - eg.

[{"lname":"Jones","fname":"Joe","dob":"2000-01-13","id":"6"},
 {"lname":"Jones","fname":"Jim","dob":"2001-04-04","id":"19"},
 {"lname":"Jones","fname":"Bob","dob":"1999-10-23","id":"32"}]
../../Search/searchdata.php上的

php代码类似于-

while($row = _fetched_array_) {
      $players[] = array(
        'lname' => $row['lname'],
        'fname' => $row['fname'],
        'dob'   => $row['dob'],
        'id'    => $row['id']
      );
}
// Return JSON Encoded Array
echo json_encode($players);

然后你可以为每个播放器创建链接，在选择播放器时它会将其添加到你的表单字段

success: function(html){
         players = $.parseJSON(html); //create json array in format above
         player_links = '';  // create blank variable
         for (var i = 0; i < players.length; i++){  // loop through each of the returned players
              // Echo Player First & Last Name and a link to add
              player_links += '<li>' + players[i].lname + ' ' + players[i].fname + ' <a href="javascript:void(0);" data-player="'+i+'" class="player_details">Add Player</a></li>';
                        }
         $("#insert_search").show();
         $("#insert_search").append(player_links);
         $("#flash").hide();
         // Bind .player_details click
         $('.player_details').click(function () {
            var pid = $(this).data('player');
                    $('#last_name_add').val(players[pid].lname);
                    $('#first_name_add').val(players[pid].fname);
                    $('#id_add').val(players[pid].id);
                    $('#dob_add').val(players[pid].dob);
                    $("#search").dialog("close");
         });
}

我已经创建了一个简单的例子作为jsFiddle - http://jsfiddle.net/8jcLQ/

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习