How can I change the title of some input text depending on the radio with jquery?
As you can see at http://jsbin.com/erivi/ I am using Jquery to change some image (and image attribute) depending on the radio button selected, I also remove the form text when clicked inside it.
And now I am trying to change the text of the form depending on the radio button.
For example, when we hit "Select 3" we should see "Input Text 3".
You can see and edit my code 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 especially .attr('title', starr[2]);
, which should change the name depending on the third part of my radio name (for example: title='m602-1.png|Logo 3|Text of input 3'
)
Thanks:)
Edit: I forgot to mention that I'm using multiple forms for my real code, so I'm looking for a way to do this without a specific text input name to avoid repeating the script for another text input.
a source to share
EDIT: The ID of the input textbox must be unique. Also, you need to set .attr('title',strarr[2])
, .val(strarr[2])
and the tooltip class inside the radio button click event. You also need to make changes to your plugin inputdynvalue
.
See full updated working code http://jsbin.com/akawo
Updated plugin 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 button "Radio" 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');
});
a source to share
Try the following:
<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>
a source to share