INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Reset button is blanking all input text boxes. Any ideas why?

Reset button is blanking all input text boxes. Any ideas why?

Reset button is blanking all input text boxes. Any ideas why?

(OP)
I have a couple of <SELECT> elements in a form flavored with jquery Chosen plugin
http://jdramaix.github.io/gwtchosen/

I also have html5 placeholder shim specifically for IE9 compatibility
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html



The exact code for the placeholder is below.

CODE

(function($) {
  $.fn.placeholder = function() {
    if(typeof document.createElement("input").placeholder == 'undefined') {
      $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
          input.removeClass('placeholder');
        }
      }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
          input.addClass('placeholder');
          input.val(input.attr('placeholder'));
        }
      }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
          }
      })
    });
  }
}
})(jQuery); 

//To call this plugin just add the following to your page

CODE

$.fn.placeholder(); 

Both html5 placeholder shim and Jquery Chosen plugin work very well.

The issue is that we also have to use the below script to reset input textboxes as well as the those <SELECT> elements.

CODE

<form...>
    <div align="center"><input type="reset" value="Reset">
</form>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){

    $('select').chosen();

    $("input[type='reset'], button[type='reset']").click(function(e){

          setTimeout(function(){ $("select").trigger("chosen:updated"); }, 50);

    });

});
});//]]>

</script> 

When you click the reset button, it resets the <SELECT> elemnents and returns them to their original states.

This is fine.

However, all input textboxes with placeholders are cleared and are blank.

Any idea what to change to return not just the <SELECT> elements but also the input boxes to their original states prior to the reset invocation?

Thanks much in advance

RE: Reset button is blanking all input text boxes. Any ideas why?

Quote (Kaylech )

Reset button is blanking all input text boxes.

Because that IS what a "reset" button does.

http://www.w3schools.com/tags/att_input_type.asp

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Reset button is blanking all input text boxes. Any ideas why?

(OP)
I know what a reset button does sir.

My question is when I use it in conjunction with jquery placeholder, how do I tweak it to return the box back to its original state?

Here is an example of an input box with place holder:

CODE

<input type="text" ID="dueDate" name="dueDate" placeholder="Specific Due date..." style="width:147px;height:15px;"></div><br /> 

When a user enters date say 05/20/2015 and performs a search, gets some results or perhaps no results and wishes to perform another search, the user hits the reset button. We expect to see Specific Due date...".

That was the default value before a search is performed.

How does the search the same original default message instead of blank box?

I might add that this behavior happens in IE9 which unfortunately is what some our users still use.

RE: Reset button is blanking all input text boxes. Any ideas why?

If it is a input type="reset" it IS a reset button so it WILL reset ALL field in the form to their default

You asked the question why does a reset button clear all fields so I had to assume you didn't know what a reset button actually did, after all, knowing what type="submit" and type="reset" mean and do is HTML forms 101.

if you set it just as a "button" rather than a "reset" it WILL only run the function(s) specified in the event attributes.

If it is a "reset" button it will call the functions AND reset all fields unless you return NULL to the reset event listener to stop the event from being triggered.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Reset button is blanking all input text boxes. Any ideas why?

(OP)
I may be new to this forum but I have been coding now for quite some time.

Perhaps, the title is misleading but I thought I explained the problem well and as stated, this an IE issue.

If the user hadn't brought this to our attention todsy, we wouldn't have known because it behaves exactly the way we wanted it in IE11.

RE: Reset button is blanking all input text boxes. Any ideas why?

Just because IE11 behaves incorrectly, why would you expect other browsers to do the same.

The fact that Infernet Exploder does NOT clear the fields is the problem, not that other browsers do.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Reset button is blanking all input text boxes. Any ideas why?

(OP)
I don't know why you keep putting up this nonsensical arguments.

IE11 is not behaving incorrectly. It is an upgrade from IE9 intended to fix most of IE9's short comings.

The issue is the plugin's incompatibility with IE9 and the real reason I came asking for help is to see if there are workarounds.

BTW, your position that reset button clears all controls is not necessarily accurate either.

Reset returns controls to their original state. I think you are mixing it up with the clear event.

My script is not intended to clear all controls into empty or blank.

My script uses reset to return controls to whatever their original state is.

Thanks for the great help.

I am moving on, hoping can hack out a solution.

RE: Reset button is blanking all input text boxes. Any ideas why?

If IE does NOT reset all fields when a reset button is used it is NOT behaving correctly,


Quote:

Reset returns controls to their original state. I
It resets to the default state as if the form had been opened for the first time

Quote:

My script uses reset to return controls to whatever their original state is.
If the fields have no default value set in the value attribute of the input tag they will be blanked, no matter what your javascript has done with the fields on opening the URL.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Reset button is blanking all input text boxes. Any ideas why?

Hi

Chris, I think there may be a chance you misunderstood the problem.

I think there is no problem with resetting itself, but with its desired "side effect" : when a placeholder text is specified, the resetting should also trigger the toggling of placeholder text on need.

As I get it from the OP's words, the problem is that the script which implements the placeholder for ancient Explorer
  • works when the input's value is changed through direct actions applied on the input itself
  • fails when the input's value is changed through indirect actions applied on the form
( Of course, this is just a theory. No such Explorer around to test it. )

Feherke.
feherke.ga

RE: Reset button is blanking all input text boxes. Any ideas why?

(OP)
Thank you Feherke.

What I find very amazing with this forum is that I have posted 4 questions so far, including this one and all the experts have done is spend so much time arguing what I am doing wrong without proving any alternate solution.

In the end, I end up not only coming with the solution but convincing them that my solution works and in the end, they accept that I am right.

My point is that simply because you look me up and find that I am new here doesn't mean that I am a newbie.

A case in point, the code I posted for placeholder plugin wasn't the original code I used.

The original code I used, worked for IE11 but didn't work for IE9 or earlier.

Some experts recognized that and came up with shims that work with all browser.

My argument is that the solution that I am using for resetting form values works for jquery Chosen <SELECT> elements plugins and for IE11 but not compatible with IE9 or earlier versions.

My question is NOT whether they clear all controls and make them blank even though that's what's happening but my question is does anyone know of a work around?

I am a contributor to EE forums and best practice is if you don't have a solution, ignore the question.

If you know the solution to the problem but feel that the question is lacking in context, you ask the OP for clarification so you can help.

What Chris has done is point out what he deems as my newbieness by referring me to w3schools.com without offering any meaningful help which is really my reason for coming here in the first place.

This is not constructive and certainly not helpful.

RE: Reset button is blanking all input text boxes. Any ideas why?

Quote:

I am a contributor to EE forums
EE?? The mobile phone company (owned by O2)?

The W3Schools page that is a reference for what the various input types do, as you seemed to be lacking that information.


Quote:

including this one and all the experts have done is spend so much time arguing what I am doing wrong without proving any alternate solution.
That is because forum members are not here to actually WRITE the code for you. It's the "Teach a man to fish" principle rather than the "Give the man a fish" principle.


Quote:

but my question is does anyone know of a work around?
There isn't one

If you want your jquery script to run again, you have to refresh the whole document from the server

If you just want to reset the fields use a reset button but that will NOT run the scripts.

If you want to reset the fields AND run the scripts from a button press you have to write the button event listener(s) to do exactly that.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Reset button is blanking all input text boxes. Any ideas why?

Have you tried WebShim ? http://afarkas.github.io/webshim/demos/index.html

When I was trying to polyfill IE9 with HTML5 functionality, I'm sure I found placeholders to work fine.

However, I gave up trying to bolt on HTML5 compatibility to IE9 some time ago, as I couldn't find 100% functionality for what I wanted.

The best solution I found was to let go of IE9, and now I feel liberated winky smile

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close