I have a page (page1) that select the number of rows. After selecting the number of rows, and on change it will load an ajax page (page2). On page 2, I have multiple select boxes depending on how many rows from page 1.
When I click on the Save button, I want to make sure that all boxes are selected before I insert. So I run a loop to check if every box is selected or in other words with value. If there is a box without selection or value, I will prompt the user.
The issue arises here is that after prompting the user I lose all the previously selected options. How do I retain the previously selected options and also the number of rows? In my code, I included the string for the number of rows during postback. So when the page load, I manage to load back the number of rows. But I don't know how to do for the selections. On the other hand, I think there is a better way for doing this, please help. Thank you very much.
Page 1 code
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- JQuery 2.2.3 Compressed -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<%
sRow = request("txtRow")
%>
</head>
<body>
<form name="form1">
<div class="form-group">
<label class="col-sm-3 control-label">Row : </label>
<div class="col-sm-2">
<select id="selRow" name="selRow" class="form-control" onchange="showContent();return false;">
<option value="" selected>-- Select --</option>
<option value="1" <%if sRow = "1" then%>Selected<%end if%>>1</option>
<option value="2" <%if sRow = "2" then%>Selected<%end if%>>2</option>
<option value="3" <%if sRow = "3" then%>Selected<%end if%>>3</option>
<option value="4" <%if sRow = "4" then%>Selected<%end if%>>4</option>
<option value="5" <%if sRow = "5" then%>Selected<%end if%>>5</option>
<option value="6" <%if sRow = "6" then%>Selected<%end if%>>6</option>
</select>
</div>
</div>
</form>
<div id="content2">
<!-- CONTENT HERE -->
</div>
<script>
function showContent() {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content2").innerHTML = xhttp.responseText;
}
};
str = "txtRow=" + document.getElementById("selRow").value;
xhttp.open("GET", "ax_test.asp?"+str, true);
xhttp.send();
}
</script>
</body>
</html>
The Ajax page, page 2
<%
sRow = request("txtRow")
if request("btnSave") <> "" then
do while not row >= Cint(sROW)
sID = request("selID" & i)
if sID = "" then
response.write "<script language='javascript'>"
response.write "window.alert ('You did not Select an ID');"
response.write "window.location=('atestajax.asp?txtRow=" & sRow & "');"
response.write "self.close(); "
response.write "</script>"
end if
row=row+1
loop
end if
%>
<form name="form2" action="ax_test.asp" method="post">
<input type="hidden" name="txtRow" value="<%=sRow%>" />
<table>
<% i=0
do while not i >= Cint(sROW)
response.write "<tr>"
response.write "<td>"
response.write " <select class='form-control' id='selID' name='selID" & i & "'>"
response.write " <option value=''>Select</option>"
response.write " <option value='a'>a</option>"
response.write " <option value='b'>b</option>"
response.write " <option value='c'>c</option>"
response.write " <option value='d'>d</option>"
response.write " </select>"
response.write "</td>"
response.write "</tr>"
i=i+1
loop
%>
</table>
<button type="submit" id="btnSave" name="btnSave" value="save" class="btn btn-default"
style="width: 90px">Save</button>
</form>
