The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

detect changes in an input type

View previous topic View next topic Go down

In progress detect changes in an input type

Post by Ahmed.K on July 9th 2014, 7:51 pm

I try to detect changes in an input type="text"
I wrote this code and it works fine, but...
I want when i click on the submit and there is no text in the input, it disable the text input field with this (jQuery('#searchi').css('display', 'none')).

Css:
#searchi{display: none;}

Html:
Code:
<input type="text" id="searchi" title="Search" />
<input type="button" id="submit" value="" />

Javascript:
Code:
jQuery(function(){
jQuery('#submit').click(function() {
jQuery('#searchi').css('display', 'block');


jQuery('#searchi').on('input', function() {

jQuery('#submit').replaceWith('<input type="submit" id="submit" value="" />');
});

});
});

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 9th 2014, 11:28 pm

Hello Ahmed.K,

You can use conditions to check the state of the input, like the values length and display.

Try this :
Code:
jQuery(function(){
 jQuery('#submit').click(function() {
  if (jQuery('#searchi').css('display') == 'none' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'block');
  else if (jQuery('#searchi').css('display') == 'block' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'none');

  jQuery('#searchi').on('input', function() {

  jQuery('#submit').replaceWith('<input type="submit" id="submit" value="" />');
  });

 });
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 9th 2014, 11:44 pm

It works just one time.

Take a look on it. Write anything in thetext input field and then click on the submit.
You will see search results, right? Now, when we back (Click Back from your browser) to the search box, and click on the submit... nothing happens.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 9th 2014, 11:58 pm

It seems to be working. I click it shows, I click again with no value it closes. When I type it takes me to the results, I come back it does as it should. What is the problem again ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 10th 2014, 12:05 am

When you come back to the search box, use the "Back" button in your browser (I use Opera by the way). and click on the submit.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 10th 2014, 12:08 am

Weird it doesn't do that on Firefox, try replacing it with this :
Code:
jQuery(function(){
  jQuery('#submit').click(function() {
    if (jQuery('#searchi').css('display') == 'none' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'block');
    else if (jQuery('#searchi').css('display') == 'block' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'none');

    jQuery('#searchi').on('input', function() {

      jQuery('#submit').replaceWith('<input type="submit" id="submit" value=""  />');
    });
    if (jQuery('#searchi').val().length == 0) return false;
  });
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 10th 2014, 12:11 am

Still the same problem.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 10th 2014, 12:19 am

Does it auto focus the input when you go back ? If so maybe you should change the button when typing. I'm not sure what your default button was since I can't see it, but if it isn't correct you can change it in the else if statement. (it's in keydown)

Code:
jQuery(function(){
 jQuery('#submit').click(function() {
  if (jQuery('#searchi').css('display') == 'none' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'block');
  else if (jQuery('#searchi').css('display') == 'block' && jQuery('#searchi').val().length == 0) jQuery('#searchi').css('display', 'none');

  jQuery('#searchi').keydown(function() {
  if ((jQuery('#searchi').val().length > 0)) jQuery('#submit').replaceWith('<input type="submit" id="submit" value="" />');
  else if ((jQuery('#searchi').val().length < 1)) jQuery('#submit').replaceWith('<input type="" id="submit" value="" />');
  });
 });
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 10th 2014, 12:30 am

Still the same problem.

When you come back to the search box and when you click on the submit to show the text input field, you will find nothing, the submit doesn't work. you should make refresh first to work again.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 10th 2014, 1:19 am

So pressing back keeps the state of the page the same as when you submitted it..? If so I am not sure how to deal with that, yet. If you don't press back it doesn't do it ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 10th 2014, 1:34 am

No, when i come back and click on the submit button to show the text input field, It does not appear. I should make refresh first to work again.

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ahmed.K on July 10th 2014, 10:47 pm

no ideas about this problem?

Ahmed.K
Forumember

Posts : 349
Reputation : 4
Language : English

Back to top Go down

In progress Re: detect changes in an input type

Post by Ange Tuteur on July 12th 2014, 2:56 am

@Ahmed.K wrote:no ideas about this problem?
Unfortunately not, since I am not familiar with Opera.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum