0

I am trying to prefill some fields which are passed from URL as parameter pair. Having

www.example.com.com/myForm#myinput=123

as href send to end users, I am going to prefill the form field "myinput" with "123" after opening the link. However, the users will also see www.example.com.com/myForm#myInput=123 in their browser. That's why I want to erase "myInput=123" from their URL. The reason for doing that is I don't want my users to see or even change the values in URL while filling the form.

I've tried

history.pushState(null, '', '/modifedURL')

either in HTML body "onload" or jquery "doc ready". As far I tried so far, this works only standalone without any parameter in URL like "www.example.com.com/myForm", but not with the additional injected parameters. Here is simplified version of code what I got so far. Notice that the modifyURL Method is called successfully, but takes no effect on URL:

<head>
    <meta charset="utf-8" />
</head>
<body onload="prefill();">
    Your Body Content

    <!-- Scripts at the bottom for improved performance. -->
    <!-- jQuery, required for all responsive plugins. -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


    <form  id="myForm"   method="POST">
        <input id="myinput" maxlength="50" name="myinput"  type="text"  />
        <br>
        <input type="submit" name="submit"   />
    </form>

    <script>        
        $(document).ready(function() {


            //do some code after html is loaded
        });

        /*
        window.onload = function () { 

        }        
        */   

        function prefill() {                               
            try{
                var currentURL = window.location.href;
                var n = currentURL.search("#");
                var sPageURL = currentURL.substring(n+1);   

                var urlVal = getURLVal(sPageURL);

                document.forms["myForm"]["myInput"].value = urlVal;

                //change URL is called, but cannot change the URL!
                modifyURL();


            } catch(e){
                alert("error " + e);  
                return false;
            }
            return true;

        }
        function modifyURL() {
            history.pushState(null, '', '/modifedURL'); 
            //even alert will fire, so pushState is skipped!!
            alert('URL modified');   
        }

        function getURLVal(query) {
            //parse parameter pair in url
        }                                       
    </script>
</body>

Leon
  • 9
  • 2
  • Possible duplicate of [How to change the URL displayed in the browser without leaving the page](https://stackoverflow.com/questions/4089178/how-to-change-the-url-displayed-in-the-browser-without-leaving-the-page) – Tibrogargan Sep 14 '18 at 17:44
  • I better option could be encode your data using base64 so users can't change it ease. – Rafael Quintela Sep 14 '18 at 17:47
  • thy for suggestions. To change the url alone using "history.pushState" works fine. However if I call my method "modifyURL();" right after "document.forms["myForm"]["myInput"].value = urlVal;", the url will not be changed any more. Thats what im struggling. – Leon Sep 14 '18 at 18:00

1 Answers1

0

You can include the data diretly in your HTML, if it's meant to always be the same.
There are two ways:
1. <input id="myinput" maxlength="50" name="myinput" type="text" value="123" />
this actually puts the value inside your input field
2. <input id="myinput" maxlength="50" name="myinput" type="text" placeholder="123" />
this only displays it before any real value is inserted by the user (on submit you don't get any value)

I hope this is useful for you

dbac
  • 328
  • 1
  • 10
  • hi dbac, thanks for suggession, actually the href link will be dynamically generated and sent via email, so input field is not static and depends on user – Leon Sep 14 '18 at 17:59