onblur 输入 jquery 时的事件

Question

I have an input text (adress) wich take results from Google Maps Autocomplete. After a click on result, the result appear on the input text and display submit button. I would like, if we click one more time on the input text : - erase the result from google (to start on new research) - hide the submit button.

But my script doesn't works well.

Jquery code :

$("#adress").blur(function() {
              if (!this.value) {
             // Hide submit button
             $('#button_submit').css('display', 'none');
             }
       });

My html code :

<input type="text" id="adress" value="" placeholder="Please enter adress" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">

An exemple on jsfiddel : jsfiddle.net/np1wkh9p/12

An idea to help me ?

Thank you !

Answer 1

you forget the # before the id name and for it to work while he click in and out of the text you have to use on focus and blur like that

$("#address").on('blur focus',function() {
// ^ here
  if (!this.value) {
    // Hide submit button
    $('#button_submit').css('display', 'none');
  }
});

see it here http://jsfiddle.net/np1wkh9p/18/

Answer 2

try giving id before the address

$("#adress").on(function() {
   if (!this.value) {
     // Hide submit button
     $('#button_submit').css('display', 'none');
   }
});

This should work for you.

Answer 3

You need a # for ID and no need for inline script:

$(function() {
  $("#adress").blur(function() {
    if (!this.value) {
     $('#button_submit').hide();
    }
  })
  .focus(function() {
    this.value ="";
    $('#button_submit').show();
  });
 });

using

<input type="text" id="adress" value="" placeholder="Please enter adress" />

Answer 4

The solution I've found :

$("#address").on('blur focus', function() {
    if (this.value=='') {
    $('#button_submit').css('display', 'none');         
     }
});

http://jsfiddle.net/np1wkh9p/17/