0

simplifying my code, I'm reloading my page with some data that I get from the user (passing it to the url), but once the page gets reloaded, I need to change the input box's placeholder. here is my html:

   <div id="someId">
      <input type="text" name="date_chosen" id="date_chosen" placeholder="Select Date">
   </div>

This jQuery code does the job (changing placeholder) if there is no page reloading:

<script>
   $(function() {
      $("#date_chosen").on("click", function(e) { 
         location.href = "<same_url>" + "<user_input>"; //in the actual code I'm redirecting users to the same page after processing their input from the input box
         $('#date_chosen').attr("placeholder", "parameter from user");
      })
   });
</script>

if I do console.log($('#date_chosen').attr("placeholder")) right after where the attribute is being changed, I see that the placeholder has changed after the reload, but page still shows the old placeholder, and I think it's because of another jquery initialization (can't explain it). What is the solution?

brainoverflow
  • 691
  • 2
  • 9
  • 22
  • 1
    Reload literally reloads the HTML, including `script` elements; nothing survives the reload, including running code. You can redirect to the same URL with additional parameters, but that is quite different from `reload()`, which is what you have in your title question, and the code in your question. – Heretic Monkey Jun 11 '21 at 18:27

2 Answers2

0

The old script is gone after a page refresh. You need to handle your logic in the redirected page.

EDIT Just realized you are redirecting to the same page. Then, on page load, I would suggest you to call your server to check if the user has performed successful submission, and if it did, then do your logic with that response. If not, then continue as if the user has done nothing.

Another way is to NOT redirect the user. Make your form to preventDefault action. Then bind your submit button with handler function to send your form data using ajax. Once the ajax returns a successful send, then do your logic.

moredrowsy
  • 383
  • 1
  • 13
  • I can't use ajax in this situation (I need to provide the url with the new parameter to users so once they click on the url, it'll bring them to the new page with the new placeholder). – brainoverflow Jun 11 '21 at 16:47
  • also data is not saved in the server side, so I cant call the server either. What I need to do, is to show their previous input as the new placeholder. – brainoverflow Jun 11 '21 at 16:48
  • If you can't use ajax to query for state, it's impossible to do what you're asking because your script is essentially gone after page refresh. – moredrowsy Jun 11 '21 at 16:55
  • 2
    You can use localeStorage or sessionStorage to save state between page reloads.. – Keith Jun 11 '21 at 16:58
  • That works too. Haven't thought of that since I don't use those too much. – moredrowsy Jun 11 '21 at 16:58
0

The solution I found is to read the url, and to get the user's input that was passed to the url by regular expressions.

var url = window.location.href;
const regex = /\?someparam=(.*)/gm;
var match = regex.exec(url)
brainoverflow
  • 691
  • 2
  • 9
  • 22
  • Your question is set up such that no one else but you can answer the question. `location.reload()` will not allow you to add parameters to the URL. Also, there are much better ways of getting data from the URL; [How can I get query string values in JavaScript?](https://stackoverflow.com/q/901115/215552) – Heretic Monkey Jun 11 '21 at 18:30
  • @HereticMonkey you're absolutely correct, but inside the code sample I have given, I mentioned what actually happens in my code (in the comment). I'll edit the post. Thanks. – brainoverflow Jun 11 '21 at 19:14
  • @HereticMonkey also thanks for the link. That's a much shorter solution. I'll use that one over the regex solution. – brainoverflow Jun 11 '21 at 19:21