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 Code
<%
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>