How to maintain scroll position when submitting on toggle buttons - one form per toggle button

Question

`I've been searching a lot, and I think the answer to my task is a call to an AJAX function. I'm using classic ASP. Please have in mind that I'm a total newbie. I really need someone to take my hand and tell me what to do. The examples I've found so far doesn't keep the same position on the website on submit. The idea is to press the toggle button (on/off) and save immidiately. That part is working perfectly. But when you have a lot of toggle buttons, and the submit gets you to the top of the page, you have a lot of scrolling down to do after every submit

The folowing is working just fine; either it's on or off. No need to do anything, but to press the toggle button. But if you are way down the webpage, you go way up to the top of the page, and you need to scroll way down to continue where you left off. This is where I want the page to be steady as a rock: Don't do anything on submit. Don't move up, don't move down. Stay put. I hope someone can help.

<%
    If Request("mode") = "msgfromadmin" Then
        Dim dato10, vUser10
        dato10 = Day(Date) & "/" & Month(Date) & "/" & Year(Date) & " " & Time()
        vUser10 = SQLEncode(Session("username"))

        If Request.Form("msgfromadmin") = Lcase("on") Then
            msgfromadmin = 1
        Else
            msgfromadmin = 0
        End If

        SQL = Conn.Execute("UPDATE usersettings SET msgfromadmin = " & msgfromadmin & " WHERE username = '" & SQLEncode(Session("username")) & "'")

    Response.Redirect("/profile/mysettings/")
    End If
%>
<head>
    <style>
        .switch{position:relative;display:inline-block;width:3.43em;height:1.75em;}
        .switch input{opacity:0;width:0;height:0;}
        .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}
        .slider:before{position:absolute;content:"";height:1.26em;width:1.26em;left:0.25em;bottom:0.25em;background-color:white;-webkit-transition: .4s;transition:.4s;}
        input:checked + .slider{background-color:#4d72ff;}input:focus + .slider{box-shadow: 0 0 0.063em #c4cbe7;}
        input:checked + .slider:before{-webkit-transform:translateX(1.625em);-ms-transform:translateX(1.625em);transform:translateX(1.625em);}
        .slider.round{border-radius:2.125em;}.slider
        .round:before{border-radius:50%;}
    </style>
</head>
<html>

<body>

<form name="msgfromadmin" action="/profile/mysettings/" method="post">
<input type="hidden" name="mode" value="msgfromadmin">
<div class="col-12 form-group row mt-4">
    <div class="col-1 form-group text-center">
        <label class="switch">
            <input type="checkbox" name="msgfromadmin" onChange="this.form.submit();"<% If RSchosenSetting("msgfromadmin") = 1 Then %> checked<% End If %>>
            <span class="slider"></span>
        </label>
    </div>
    <div class="col-11 form-group">
        Send a mail when there's a message from admin
    </div>
</div>
</form>

</body>
</html>

Another option would be to create an ANCHOR tag for each of the segments. And on submit pass the value through a hidden input, and when it submits the form, you can have it look for that anchor and navigate back down to that part of the page. citation - https://help.typepad.com/anchor-tags.html — easleyfixed, Dec 21 '22 at 20:04
Yeah, I've been thinking about that too. But I've seen on several pages, that when toggle button has been pressed, it stays on the exact same spot, it doesn't move at all It must be possible somehow. I've tried too. But it gives something different. It doesn't make the page stay at the exact same spot. — Steen, Dec 22 '22 at 17:14
That is one of the main features of rewriting a script from asp-classic to ASP.NET, is active or bidirectional forms, so that you can submit the page without actually having to redraw the page, so it doesn't move, it just submits and keeps you there. Although some extension work of asp-classic using Javascript can modify data without redrawing, but pure asp-classic has to submit the data and the only way to see the change is to redraw the page on the same update, or to do the update BEFORE the select displays the current (new) information, but yeah anchor MIGHT be the easiest way for you. — easleyfixed, Dec 22 '22 at 17:40

score 0 · Answer 1 · answered Jan 01 '23 at 05:58

Is it something like this you want?? You will have to obviously do the database connections etc on the submitpage.asp I added the loop to the text and slider to generate a page that is longer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
<html>    
<head>    
    <title>msgfromadmin</title>
</head>
<style>
.switch{position:relative;display:inline-block;width:3.43em;height:1.75em;}    
.switch input{opacity:0;width:0;height:0;}
        .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;}    
        .slider:before{position:absolute;content:"";height:1.26em;width:1.26em;left:0.25em;bottom:0.25em;background-color:white;-webkit-transition: .4s;transition:.4s;}    
        input:checked + .slider{background-color:#4d72ff;}input:focus + .slider{box-shadow: 0 0 0.063em #c4cbe7;}    
        input:checked + .slider:before{-webkit-transform:translateX(1.625em);-ms-transform:translateX(1.625em);transform:translateX(1.625em);}    
        .slider.round{border-radius:2.125em;}.slider    
        .round:before{border-radius:50%;}    
    </style>    
</head>    
<html>    

<body>    

<form name="msgfromadmin" action="msgfromadmin.asp" method="post">    
<input type="hidden" name="mode" value="msgfromadmin">    
<div class="col-12 form-group row mt-4">    
<%for i = 1 to 100 %>    
    <div class="col-1 form-group text-center">    
        <label class="switch">    
            <input type="checkbox" name="msgfromadmin<%= i %>" id="msgfromadmin<%= i %>" onChange="loadXMLDoc('<%= i%>','message <%= i%> from admin')" <% If request("msgfromadmin" & i) = "on" Then %> checked<% End If %>>    
            <span class="slider"></span>    
        </label>    
    </div>    
    <div class="col-11 form-group" id=adminmessage<%=i%>>    
        Send a mail when there's a message from admin    
    </div>    
    
<% next %>    
</div>    
</form>    
<script>    
function loadXMLDoc(incoming, incoming2) {    
     var demoChecked = document.getElementById("msgfromadmin"+ incoming).checked;    
    if (demoChecked == true) {    
          var xhttp = new XMLHttpRequest();    
          xhttp.onreadystatechange = function() {    
            if (this.readyState == 4 && this.status == 200) {    
              document.getElementById("adminmessage"+incoming).innerHTML = this.responseText;    
            }    
          };    
          xhttp.open("post", "SubmitPage.asp?msgfromadmin="+ incoming +"&message="+incoming2, true);    
          xhttp.send();    
        document.getElementById("adminmessage"+incoming).innerHTML = "Mail sent to admin";    
          
    } else {    
        document.getElementById("adminmessage"+incoming).innerHTML = "Send a mail when there's a message from admin";    
    }    
 }    
</script>    
</body>    
</html>

and the SubmitPage.asp

<%
    If Request("msgfromadmin") <> "" then 
        Dim dato10, vUser10
        dato10 = Day(Date) & "/" & Month(Date) & "/" & Year(Date) & " " & Time()
        response.write  "Mail sent to admin at " & dato10 
      '  vUser10 = SQLEncode(Session("username"))
       ' SQL = Conn.Execute("UPDATE usersettings SET msgfromadmin = " & msgfromadmin & " WHERE username = '" & SQLEncode(Session("username")) & "'")
    End If
%>

Looks promising, thanks. I will try it out tomorrow. I will get back to you as soon as possible! — Steen, Feb 24 '23 at 15:07

How to maintain scroll position when submitting on toggle buttons - one form per toggle button

1 Answers1