CODEWITHSUNDEEP
jqueryprototypejs
Mike S
Mike S

Reputation: 11

Convert Prototype script to jquery

I have this function I found in an article somewhere that seems to mix prototype with jquery scripts, but I don't want to include prototype as it breaks everything else. So I wanted to see if anyone out there could help convert this to jQuery for me.

The function is supposed to detect if the browser auto-filled out form fields and set a class to their label accordingly.

$("label.placeholder + .input-text").each(function (type) {
Event.observe(window, 'load', function () {
    setTimeout(function(){
        if (!input.value.empty()) {
            input.previous().addClassName('has-text');
        }
    }, 200);
});
});

The problem is I keep getting the error Event.observe is not a function.

Any help is greatly appreciated!

Upvotes: 1

Views: 619

Answers (3)

Mike S
Mike S

Reputation: 11

Looks like I figured it out... might not be the best way to do it but it works! Here's my new code:

$("label.placeholder + .input-text").each(function (type) {

  // Check if anything is filled in on page load
  if( $(this).val() !== '') {
    $(this).prev("label.placeholder").addClass("has-text").removeClass("focus");
  } else {
    $(this).prev("label.placeholder").removeClass("has-text").removeClass("focus");
  }

  //Change the label style
  $(this).focus(function () {
    $(this).prev("label.placeholder").addClass("focus");
  });

  //Check if user has typed anything in the field
  $(this).keyup(function () {
    $(this).prev("label.placeholder").addClass("has-text").removeClass("focus");
  });

  //
  $(this).blur(function () {

    // Loops through all fields to see if the browser has auto-filled after the user inputted something
    setTimeout(function(t){
      $('label.placeholder + .input-text').each(function(index, element){
        if( $(element).val() !== '') {
          $(this).prev("label.placeholder").addClass("has-text").removeClass("focus");
        }
      });
    }, 200);

    // If the field is left blank, set the label back to default
    if($(this).val() === "") {
      $(this).prev("label.placeholder").removeClass("has-text").removeClass("focus");
    } else {
      $(this).prev("label.placeholder").addClass("has-text").removeClass("focus");
    }
});

The question is, should I do the check through all fields to see if the have a value on $(this).blur or on $(this).keyup ?

Thanks again for your help and suggestions!

Upvotes: 0

pex
pex

Reputation: 7731

I think this might help:

$(function() {
  setTimeout(function(){
    $("label.placeholder + .input-text").each(function() {
      if ($(this).val()) $(this).prev().addClass('has-text');
    });
  }, 200);
});

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179046

If what you're doing is checking for cached-values onload, then you could try this:

$(window).load(function(e){

setTimeout(function(t){
  $('label.placeholder + .input-text').each(function(index, element){
    if (!$(element).val())
    {
      $(element).prev().addClass('has-text');
    }
  });
}, 200);

});

It should remove the excessive number of calls to setTimeout.

you may be able to change the first line to: jQuery(function($){, but I'm not sure if the auto-filled forms will have loaded after the document.onready event or the window.onload event. You'll just have to play with it to find out.

Upvotes: 1

Related Questions