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

[Kaylech]

I have a couple of <SELECT> elements in a form flavored with jquery Chosen plugin
[URL unfurl="true"]http://jdramaix.github.io/gwtchosen/[/url]

I also have html5 placeholder shim specifically for IE9 compatibility
[link

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

]

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

[/url]

The exact code for the placeholder is below.

(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

$.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.

<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

 

[ChrisHirst]

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

 

[Kaylech]

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:

     <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.

 

[ChrisHirst]

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

 

[Kaylech]

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.

 

[ChrisHirst]

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

 

[Kaylech]

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.

 

[ChrisHirst]

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

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

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

 

[feherke]

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
[ul]
[li]works when the [tt]input[/tt]'s [tt]value[/tt] is changed through direct actions applied on the [tt]input[/tt] itself[/li]
[li]fails when the [tt]input[/tt]'s [tt]value[/tt] is changed through indirect actions applied on the [tt]form[/tt][/li]
[/ul]
( Of course, this is just a theory. No such Explorer around to test it. )

Feherke.
feherke.ga

 

[Kaylech]

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.

 

[ChrisHirst]

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.

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.

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

 

[1DMF]

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 ;-)



"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