I have a webpage, I'm building in vb.net. The page lists worship locations for parishes. At the bottom of the list is a link to add a new location. When the link is clicked, a modal window appears containing a form. The form is completed and submitted to a separate page for processing. Upon return, the new location is on the list.
Next to each location is a link, "Edit". I want to load the location information into the modal window so the user can make changes and submit them to a processing page.
In order to get the modal window to open I use:
<a href="#AddWS" class="texttrigger" data-toggle="modal">Add Worship Site</a>
To see a working example of the modal window: https://parishes.rcda.org/ChristTheKing/ click the word more under worship times in the top right half of the page header.
I want to have the edit link call a piece of javascript in order to place the location info into a hidden form at the bottom of the page and submit with action="thispage.aspx#editWS". The URL in the address bar upon submission is correct but the modal window does not display.
JavaScript function:
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();
}
}
Hidden form:
<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>
The Modal Window:
<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;"> <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;"> <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>
In the modal window, I plan to load the data from the form object.The user can then update the info and submit it to a processing page. I haven't yet added the code to add the values from the form element since the modal window is not displaying when the form is submitted.
Regarding the data-toggle="modal", I found a modal.js file referenced on the page with the following code:
<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>
Also related to the modal is a modal.css file:
.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;
}
It appears that when I click a link to show a modal-window, I'm changing the display style of the modal window from none to block and vice versa when I click the X to close it.Based upon that, I'm thinking of using the following JavaScript referenced in an onLoad of the body tag.
Javascript:
<script>
function init(){
var post;
post = 1; //is post back?
if (post==1){
document.getElementById('editWS').style.display="block";
}
}
</script>
In the above function: init(), the variable post gets it's value set to either 1 or 0 by .net depending if the page is post back or not. This will only show the modal window if the form has been submitted. my issue at the moment is that the javascript fails to set the style of the modal window to block.
I am creating a javascript function init() and having it run on load of the page.
<body onLoad="init()">
The function:
<script>
function init(){
var post;
post = 1; //is post back?
if (post==1){
document.getElementById('editWS').style.display = "block";
}
}
The value of the post variable is determined by .net and set to either 1 or 0 based upon if the page is post back. This will allow me to click the edit link, have the javascript, fill the hidden form, post back to the same page and display the form data in the modal window. When the close button in the modal-window is clicked, the page loads and since there is no post back, the display style of the modal-window is set to the default display style, none.