在模态窗口加载表单数据

问题描述 投票：0回答：1

我有一个网页，我正在 vb.net 中构建。该页面列出了教区的礼拜地点。列表底部是用于添加新位置的链接。单击链接时，会出现一个包含表单的模式窗口。表格已完成并提交到单独的页面进行处理。返回后，新位置就会出现在列表中。

每个位置旁边都有一个链接“编辑”。我想将位置信息加载到模式窗口中，以便用户可以进行更改并将其提交到处理页面。

为了打开模态窗口，我使用：

<a href="#AddWS" class="texttrigger" data-toggle="modal">Add Worship Site</a>

要查看模式窗口的工作示例：https://parishes.rcda.org/ChristTheKing/单击页面标题右上半部分礼拜时间下的“更多”一词。

我想让编辑链接调用一段 javascript，以便将位置信息放入页面底部的隐藏表单中，并使用 action="thispage.aspx#editWS" 提交。提交时地址栏中的 URL 是正确的，但模式窗口不显示。

编辑

JavaScript 函数：

    function editWS(LID) {
    
    if (LID == 185) {
       
        document.editLocation.ID.value = 185;
        document.editLocation.address.value = "123 Anywhere St.";
        document.editLocation.city.value = "clairmont";
        document.editLocation.state.value = "NY";
        document.editLocation.zip.value = "11111";
        document.editLocation.phone.value = "(012) 888-1682";
        document.editLocation.county.value = "8";
        document.editLocation.vicariate_ID.value = "4";
        document.editLocation.SeatingCapacity.value = "200";
        document.editLocation.submit();
    }
    
    
    if (LID == 220) {
       
        document.editLocation.ID.value = 220;
        document.editLocation.address.value = "6 Main St.";
        document.editLocation.city.value = "cloverfield";
        document.editLocation.state.value = "NY";
        document.editLocation.zip.value = "22222";
        document.editLocation.phone.value = "(333) 622-3191";
        document.editLocation.county.value = "6";
        document.editLocation.vicariate_ID.value = "4";
        document.editLocation.SeatingCapacity.value = "";
        document.editLocation.submit();
    }     
}

隐藏形式：

    <form name="editLocation" action="thispage.aspx#editWS" method="post">
<input type="hidden" name="ID" value="" />
<input type="hidden" name="address" value="" />
<input type="hidden" name="city" value="" />
<input type="hidden" name="state" value="" />
<input type="hidden" name="zip" value="" />
<input type="hidden" name="phone" value="" />
<input type="hidden" name="county" value="" />
<input type="hidden" name="vicariate_ID" value="" />
<input type="hidden" name="SeatingCapacity" value="" />
</form>

模态窗口：

        <div id="EditWS" class="overlay">
<div class="popup" style="height:50% !important; width:50%"> 
    <h3 class="modal-title" style="color:#777777; text-align:center;"><strong>Edit Worship Site</strong> 
    <br>

    <span class="arial10pt"><span class="arial10pt"></span>
           
   

    </h3> <br>
    <a class="close" href="pewcount.aspx">×</a>
    <div class="content" style="overflow:hidden; height:80%; vertical-align:middle;">
        <form id="form2" action="locations.aspx" method="post">
        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">Address:</div>
        <div style="width:48%; display:inline-table;margin:5px;"><input type="text" name="address" value="" style="width:175px;"/></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">City: </div>
        <div style="width:48%; display:inline-table;">&nbsp;<input type="text" name="city" value="" style="width:175px;"/></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">State</div>
        <div style="width:48%; display:inline-table; margin:5px;"><select name="state" style="width:175px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY" selected>New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
 </select></div>

        <div style="width:48%; display:inline-table; text-align:right;margin:5px; ">Zip:</div>
        <div style="width:48%; display:inline-table;">&nbsp;<input type="text" name="zip" value="" style="width:175px;" /></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">Phone:</div>
        <div style="width:48%; display:inline-table; margin:5px;"><input type="text" name="phone" value="" style="width:175px;" /></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">County:</div>
        <div style="width:48%; display:inline-table; margin:5px;"><select name="county" style="width:175px;">
<option value=""></option>
<option value = "1" >Albany</option>
<option value = "2" >Columbia</option>
<option value = "3" >Delaware</option>
<option value = "4" >Fulton</option>
<option value = "5" >Greene</option>
<option value = "6" >Herkimer</option>
<option value = "7" >Montgomery</option>
<option value = "8" >Otsego</option>
<option value = "9" >Rensselaer</option>
<option value = "10" >Saratoga</option>
<option value = "11" >Schenectady</option>
<option value = "12" >Schoharie</option>
<option value = "13" >Warren</option>
<option value = "14" >Washington</option>
</select></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">Vicariate</div>
        <div style="width:48%; display:inline-table; margin:5px;"><select name="vicariate" style="width:175px;">
<option value=""></option>
<option value = "7" >Adirondack</option>
<option value = "1" >Beverwyck</option>
<option value = "3" >Hudson Valley</option>
<option value = "5" >Leatherstocking</option>
<option value = "4" >Mohawk Valley</option>
<option value = "2" >Taconic</option>
<option value = "6" >Twin Rivers</option>
</select></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;">Seating Capacity:</div>
        <div style="width:48%; display:inline-table; margin:5px;"><input type="text" name="phone" value="" style="width:175px;"/></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;"></div>
        <div style="width:48%; display:inline-table; margin:5px;"><input type="checkbox" name="closed" onCLick="" />This Worship Site is Permenantly Closed</div>
        
            <div style="width:48%; display:inline-table; text-align:right; margin:5px;">Site ID:</div>
<div style="width:48%; display:inline-table; margin:5px;"><input type="text" name="SiteID" value="" style="width:175px;"/></div>

        <div style="width:48%; display:inline-table; text-align:right; margin:5px;"></div>
<div style="width:48%; display:inline-table; margin:5px;"><input type="submit" value="Save Changes" /></div>




        </form>

     <br>

在模式窗口中，我计划从表单对象加载数据。然后用户可以更新信息并将其提交到处理页面。我尚未添加代码来添加表单元素中的值，因为提交表单时模式窗口未显示。

关于data-toggle="modal"，我发现页面上引用了一个modal.js文件，代码如下：

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
    modal.style.display = "none";
    }
}
</script>

与模态相关的还有一个modal.css文件：

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    display:none;  
    overflow-y: hidden;
    z-index:0;
    height:100% !important;
    z-index:10000;
    
}

.overlay:target {
    display:block;
    z-index:10000;
}
.popup {
   margin: 20px auto;
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    width: 85%;
    position: relative;
    overflow:hidden;
    height:90% !important;
    transition: all 5s ease-in-out;
  z-index:10000000;
}
.popup .close {
    position: absolute;
    top: 10px;
    right: 20px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}
.popup .close:hover {
    color: #06D85F;
}

看来，当我单击链接显示模态窗口时，我将模态窗口的显示样式从无更改为阻止，当我单击 X 关闭它时反之亦然。基于此，我考虑使用 body 标记的 onLoad 中引用的以下 JavaScript。

Javascript：

<script>
function init(){
var post;
post = 1; //is post back?
if (post==1){
    document.getElementById('editWS').style.display="block";
    }
}
</script>

在上面的函数 init() 中，变量 post 的值被 .net 设置为 1 或 0，具体取决于页面是否回发。如果表单已提交，则仅显示模式窗口。我目前的问题是 JavaScript 无法将模式窗口的样式设置为阻止。

javascript html modal-window
1个回答
0
投票

我正在创建一个 javascript 函数 init() 并让它在页面加载时运行。

<body onLoad="init()">

功能：

<script>
function init(){
var post;
post = 1; //is post back?
if (post==1){
     document.getElementById('editWS').style.display = "block";
    }
}

post 变量的值由 .net 确定，并根据页面是否回发设置为 1 或 0。这将允许我单击编辑链接、填写隐藏表单、发回同一页面并在模式窗口中显示表单数据。当点击模态窗口中的关闭按钮时，模态窗口的显示样式将设置为无。这样，用户可以使用相同的表单来编辑或添加礼拜场所。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.