How to change title of some text input depending on a radio with jquery ?

Question

Hi!

As you can see on http://jsbin.com/erivi/ I'm using Jquery to change some image (and image attribute) depending on radio button selected, I'm also removing form text when clicking inside it.

And now what I'm trying to do is to change the text of the form depending on the radio button checked.

For example when clicking on "Choice 3" we should see "Text of input 3".

You can see & edit my code live here: http://jsbin.com/erivi/edit

The part I need to improve is:

  imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/'; 
$("input[type='radio']").click(function() { 
   var strarr = this.title.split('|'); 
   if(strarr.length < 2) return; 
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', starr[2]); 
});

And particularly .attr('title', starr[2]); which is supposed to change title depending on the 3rd part of my radio title (exemple: title='m602-1.png|Logo 3|Text of input 3' )

Thanks :)

Edit: I forgot to mention that I'm using several forms on my real code, that's why I'm looking for a way to do this without the particular name of the text input in order to avoid repeating script for other text input.

Answer 1

Try this:

<form method="post" action="">
    <div>
        <img id="iymok" src="http://download.kde.org/khotnewstuff/icons/previews/m732-1.png" alt="Alt by default" />
        <input type="text" id="iymok_text" title="Blablabla Text 1" />
        <label><input type="radio" checked="checked" name="iymok" title="m133-1.png|Logo 1|Blablabla Text 1" />Choice 1</label>
        <label><input type="radio" name="iymok" title='m203-1.png|Logo 2|Text of input 2' />Choice 2</label>
        <label><input type="radio" name="iymok" title='m602-1.png|Logo 3|Text of input 3' />Choice 3</label>
    </div>
</form>
<script type="text/javascript">
    imgFldr = 'http://download.kde.org/khotnewstuff/icons/previews/';
    $("input[type='radio']").click(function() {
        var strarr = this.title.split('|');
        if (strarr.length >= 3) {
               $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]).attr('title', strarr[2]);
               $('#'+this.name+'_text').attr('title', strarr[2]);
        }
    });
</script>

Answer 2

EDIT: The id of the input textbox has to be unique. Additionally, you need to set .attr('title',strarr[2]), .val(strarr[2]) and the hint class inside the radio button's click event. Also some changes need to be made to your inputdynvalue plugin.

Please see the complete updated working code at http://jsbin.com/akawo

Updated Plug-in code

(function($) { 
    $.fn.inputdynvalue = function (options) { 
     var opts = $.extend({}, $.fn.inputdynvalue.defaults, options); 
     return this.each(function(){ 
      var hvalue = opts.htext; 
      switch (opts.htext) { 
       case 'title' : hvalue = $(this).attr('title'); break; 
       case 'value' : hvalue = $(this).attr('value'); break; 
      } 
      $(this).attr('value', hvalue).addClass(opts.hclass) 
      .unbind('focus blur') 
      .bind('focus', function() {           
       if (this.value === this.title) { 
        this.value = ''; 
        $(this).removeClass(opts.hclass); 
       } 
      }) 
      .bind('blur', function() { 
       if (this.value === '') { 
        this.value = this.title; 
        $(this).addClass(opts.hclass); 
       } 
      }); 
     }); 
    }; 
    $.fn.inputdynvalue.defaults = { 
     htext: 'title', 
     hclass: 'hint' 
    }; 
})(jQuery); 
$(document).ready(function(){ 
    $("input[type='text']").inputdynvalue(); 
});

Updated Radio Button Click Event Handler

$("input[type='radio']").click(function() { 
   var strarr = this.title.split('|'); 
   if(strarr.length < 2) return; 
   $('#'+this.name).attr('src', imgFldr+strarr[0]).attr('alt', strarr[1]); 
   $('#'+this.name+'_text')
      .attr('title',strarr[2])
      .val(strarr[2])
      .addClass('hint'); 
});