jQuery form input field present even before document.ready function is called

Question

I am facing a weird issue. I am relatively new to JavaScript jQuery.

When I refresh the page the address input field doesn't get cleared, while zip code and email fields do get cleared.

I tried $('#input_address').get(0).value=''; which clears the field. But I don't want it to happen when the user comes back from page 2 to page 1. Only on refresh should the fields be cleared. The email and zip code works perfectly in both scenarios: refresh page and page2 to page1 navigation.

$(document).ready(function() {
  console.log("doc ready function");

  // $('#input_address').get(0).value='';

//  togglePlaceholder($('#input_email').get(0));
//  togglePlaceholder($('#input_zip').get(0));
  togglePlaceholder($('#input_address').get(0));



  $('input, select, textarea').each(
    function() {
      var val = $(this).val().trim();

      if (val.length) {
        $(this).addClass('sample');
      }
    });

  $('input, select, textarea').blur(function() {

    if ($(this).val())
      $(this).addClass('sample');
    else
      $(this).removeClass('sample');
  });

  $('input, select, textarea').focus(function() {
    console.log("focused");

    if ($(this).val() == '') {
      $(this).removeClass('invalid');
      $(this).addClass('sample');
    }
  });

})


function togglePlaceholder(inputElement) {

  var inputAttr = inputElement.getAttribute("placeholder");

  inputElement.placeholder = "";

  inputElement.onblur = function() {
    this.placeholder = "";
  }

  inputElement.onfocus = function() {
    this.placeholder = inputAttr;
  }

}

.sample ~ label {
    font-size: 1em;
    top: -10px;
    left: 0;
    font-size: 1em;
    color: #F47B20;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-field col s6 col-xs-12">
  <input type="text" onblur="togglePlaceholder(this);" onfocus="togglePlaceholder(this);" placeholder="123 Example Street" id="input_address" />
  <label for="input_address">Street Address</label>
</div>

Please click the `<>` and create a [mcve] but why are you going through so much trouble ? What is wrong with the default placeholder functionality? — mplungjan, Feb 04 '17 at 16:40
updated the address HTML. @mplungjan The default placeholder messes up the label. both appear at the same time — JavaQuest, Feb 04 '17 at 16:48
I create the snippet you should have made. Please explain what the problem is with the code I am looking at? Is there some CSS missing that might help us see what the issue is? — mplungjan, Feb 04 '17 at 16:51
@mplungjan The css only causes the labels to move up. Added css as well. My problem is the address field remains there on page re-load while the email and zip-code gets cleared as expected — JavaQuest, Feb 04 '17 at 16:57
I moved the CSS to the snippet. Please make yourself a bit more acquainted with the snippet editor. It is there for a reason — mplungjan, Feb 04 '17 at 16:58
You cannot easily detect a reload. I would wrap the fields in a form and do `$("form")[0].reset()` when I wanted to clear it — mplungjan, Feb 04 '17 at 17:00
@Novice. Yes it only does the validation part and submits the form. — JavaQuest, Feb 04 '17 at 17:00

score 0 · Answer 1 · edited May 23 '17 at 12:01

So... you have two problems.

(1) Auto-completion is what refills the widgets automatically,

(2) You need to know what button was clicked to react accordingly.

Auto-Completion

In regard to the auto-completion, it most certainly happens right after the first set of scripts ran within the jQuery ready() function.

There are two ways to remove auto-completion, but really, I do not recommend either one, although I would imagine that you'll need to if your requirements are set in stones...

(a) Ask for the input widget to not even autocomplete

<input ... autocomplete="off" .../>

(b) Run your script with a timer so it happens after the auto-completion. Instead of initializing in the ready() function, you initialize in a sub-function that runs after a timer times out.

$(document).ready(function() {
    setTimeout(function(){
        // ...put your initialization here...
        // the autocompletion data should have been taken care of at this point
    }, 0);
});

Note that you can use a number large than 0 for the timeout delay, but in most cases 0 will work just fine to run the sub-function after releasing the current thread once and thus given the system time to work on the auto-completion and then call your function. With 0 it should be so fast that you should not even see the <input .../> tag flash.

Side note: you may also want to place the inner function in an actual function as in:

function init_stuff()
{
    // ...your initialization code goes here...
}

$(document).ready(function() {
    setTimeout(init_stuff, 0);
});

If you expect your initialization to continue to grow, this can be a lot cleaner long term.

Which button gets clicked

The next problem is to know whether that code should run or not. So you need an extra if() statement for that purpose.

There are several hacks on this stackoverflow page in that regard. However, I'm not exactly sure how you really know in the newly loaded page, that you had a Refresh or a Back button click.

From the code I see there, the loading of the page's content would 100% happen in AJAX and therefore you perfectly know which button was clicked, you just reimplemented the functionality. You'll have to search stackoverflow some more to find out how to do that. I strongly suggest that you write tests with one piece of functionality at a time to determine what is going on.

Note that will make having the initialization function separate quite useful since after reloading the page, you will be responsible to call that function (when you want the reset to happen) or not! In other words, if the Back button was clicked, load the HTML of the previous page (i.e. Page 1 in your example) and display it. Done. When clicking the Refresh button, load the HTML of the current page and call the reset function (it could also be that the Refresh is the default and you do not want to handle that button since it will anyway clear as expected.)

For a beginner, that's going to be an interesting piece of work!

jQuery form input field present even before document.ready function is called

1 Answers1

Auto-Completion

Which button gets clicked