jQuery Forum

I'm working on form validation, and trying to create reusable code so I can place it as a function and call it. But I'm running into trouble, because one of the items is not like the others.

I have two text inputs, one for first name, one for last name. They have separate names, but the same class. When I leave input.name, I want to run the validation code, and check both .name boxes, changing an icon to a checkmark if both are correct. What I have now does this correctly:

http://jsfiddle.net/KAaUN/2/

The problem is, later on, when I have selects and single inputs, the validation needs to be the same statement.
I'd like to get the if statement in the validation down to something like:

1.  if (   ($(  $(this).attr("class").each()  ).val()  != '')    ){ 
   

Vs what I have now which is:

1. if (   ($("input[name=firstName]").val() != '') && ($("input[name=lastName]").val()  != '')   ){

Any ideas? I thought .each() would work, but it's not. Any help would be much appreciated!

I wrote a very simple script which attached a counter beside a textbox, and keeps track of the number of characters, updating on page load, and each time a character is entered.

My initial code, which works, is:

var text = ".new_description";
var monitor = text + "_monitor";

$(document).ready(function(){

  if ($(text).val().length < 1) { $(monitor).css("color","black"); }
  else if ($(text).val().length < 1001) { $(monitor).css("color","green"); }
  else { $(monitor).css("color","red"); }
  $(monitor).text( $(text).val().length + "/1000" );

  $(text).keypress(function(event) {
    window.setTimeout(function(){
      if ($(text).val().length < 1) { $(monitor).css("color","black"); }
      else if ($(text).val().length < 1001) { $(monitor).css("color","green"); }
      else  { $(monitor).css("color","red"); }
      $(monitor).text( $(text).val().length + "/1000" );
    }, 0);
  });

});

I don't like that I have to duplicate the code that updates it, and I'd like to define the code, then just call it on page load, and then when a character is entered. I recreated the code using a function, and it worked:

$(function(){

  var text = ".new_description";
  var monitor = text + "_monitor";

  $(document).ready(update_monitor);
  $(document).ready(function(){
    $(text).keypress(function(event) {
      window.setTimeout(update_monitor, 0);
    });
  });

  function update_monitor()
  {
    if ($(text).val().length < 1) { $(monitor).css("color","black"); }
    else if ($(text).val().length < 1001) { $(monitor).css("color","green"); }
    else { $(monitor).css("color","red"); }
    $(monitor).text( $(text).val().length + "/1000" );
  }

});

It only works if everything, including the call, is inside the $(function(){, and I'd like them to be separate. I read a little about making a plugin, but I wasn't able to get it to work. Is there any way to fully separate the defined sub function, and the main code inside the doc ready statement? Thanks for the help!

I have a list of members of an organization, drawn from a SQL database. I have a few quick edit buttons at the top, and I want to be able to click one of them, and then use .post to send 3 pieces of data (which quickedit menu, the value, and the ID being edited) to a PHP page which updates the database. I've gotten it to work with static data, but I need to use variables, and I'm having trouble.

$("#memberlist_options_container.sub a").click(function(event){

  event.preventDefault();

  var myDataObject = {'menu: currentdropdownmenu, option: currentdropdownoption, ID: selectionID};

  $.post("quickedit/index.php", myDataObject);

  location.reload();

});

currentdropdownmenu and currentdropdown are javascript variables, and change depending on which drop down quick edit button is clicked. It's reloading the page, so I'm getting to the end, but it's not sending anything. What am I doing wrong? Thank you for the help!

I'm trying to shrink some jQuery code by using replaceWith, instead of hiding and showing two different items. Since I'd never used replaceWith before, I created a test page, all it has has a div container, with class "one", and inside it the word One.

The jQuery code I wrote is below, it works to replace One with Two, when one is clicked. But clicking Two does nothing. I put in an alert to test what replacement is, and it is correct, a div with class of two. Yet still the second click doesn't return to One. Any ideas?

$(document).ready(function()
{
  var replacement;
  $(".one").click(function(event){
    replacement = '<div class="two">Two</div>';
    $(this).replaceWith(replacement);
  });
  $(".two").click(function(event){
    replacement = '<div class="one">One</div>';
    $(this).replaceWith(replacement);
  });
});

HTML:

<div class="one">One</div>


Thank you!