Question

jQuery Code :

(function($){
$.fn.jgtextdefault = function(settings){
var jElements = this;
var settings = $.extend({}, $.fn.jgtextdefault.defaults, settings);
return jElements.each(function(){
if($(jElements).is("input")){ jgTextDefault( $(jElements) ); }
});
function jgTextDefault(jInput){
if (jInput.val().length==0) jInput.val(settings.text);
jInput.focus(function () {
if (jInput.val()==settings.text) jInput.val('');
});
jInput.blur(function () {
if (jInput.val().length==0) jInput.val(settings.text);
});}};
$.fn.jgtextdefault.defaults = {
text: 'Default'
};
})(jQuery);

Php Code :

if (empty($releasedata['size'])) {
                $errors[] = '<li>'.Enter the size in GB.'</li>';
            }
if (empty($releasedata['releaseinfo'])) {
                $errors[] = '<li>'.Give more information.'</li>';
            }
        break;

Html Code :

  <script>
    $(document).ready(function(){

      $('#defaultText-releasename').jgtextdefault({'text':'This is the default text for release name'});
      $('#defaultText-releasesize').jgtextdefault({'text':'This is the default text for release size'});

    });
  </script>

Html (Input Fields) :

<input id="defaultText-releasename" type="text" name="releasename" value="$releasedata[releasename]" />

My Problem :
Everything is fine with displaying default text in input fields and hide on focus. But the problem is, when i submit the form (if user/me do not type anything in input fields, then it takes the input field value as the default text.

Since you can see from above php code, i would like to display the error message if nothing typed into input fields by user. So i do not want form to be submitted with the default text in input fields…

Can someone please help me with this problem ?

Thanks in advance and regards…

Answer 1

Ok i solved my problem with another jQuery code which has “clear the pre-defined text when form is submitted” function…

This may be useful for some other users too… So here is the code :

$(document).ready(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal);
      }
    })
    .blur().addClass('active');
  });
  $('form').submit(function(){
    $('.default').each(function(){
      var defaultVal = $(this).attr('title');
      if ($(this).val() == defaultVal){
        $(this).val('');
      }
    });
  });
});

And HTML would be as :

<input type="text" name="text1" value="" class="default" title="Default Text 1" />

All credits goes to : DesignChemical…