Hi i need with jQuery to change data in input field when user click on some link
<input value="height-size-width">
so when user click on some
<a href = "#" id="width">
link need to change only widht in input field....
if user click
<a href = "#" id="height">
link script need to change only height in input field...
Like youtube embed option Any help?
<input id="embed-code" size="60" />
<h3>Select size:</h3>
<ul id="embed-size-options">
<li><a href="#" data-width="640" data-height="480" class="selected">640x480</a></li>
<li><a href="#" data-width="800" data-height="600">800x600</a></li>
<li><a href="#" data-width="1024" data-height="768">1024x768</a></li>
</ul>
<h3>Select color:</h3>
<ul id="embed-color-options">
<li><a href="#" data-color="#ff0000" class="selected">red</a></li>
<li><a href="#" data-color="#00ff00">green</a></li>
<li><a href="#" data-color="#0000ff">blue</a></li>
</ul>
<script src="jquery-1.4.2.min.js"></script>
<script src="sprintf-0.6.js"></script>
<script>
$(function() {
var $embed_code = $('#embed-code'),
$embed_size_options = $('#embed-size-options'),
$embed_color_options = $('#embed-color-options'),
$selected_size = $embed_size_options.find('a.selected').eq(0),
$selected_color = $embed_color_options.find('a.selected').eq(0),
code_tpl = 'current width %s and height %s and color %s';
if (!$selected_size) {
$selected_size = $embed_size_options.find('a').eq(0).addClass('selected');
}
if (!$selected_color) {
$selected_color = $embed_color_options.find('a').eq(0).addClass('selected');
}
generate_embed_code();
$embed_size_options.find('a').click(function() {
$selected_size.removeClass('selected');
$selected_size = $(this).addClass('selected');
generate_embed_code();
return false;
});
$embed_color_options.find('a').click(function() {
$selected_color.removeClass('selected');
$selected_color = $(this).addClass('selected');
generate_embed_code();
return false;
});
function generate_embed_code() {
$embed_code.val(sprintf(code_tpl, $selected_size.attr('data-width'), $selected_size.attr('data-height'), $selected_color.attr('data-color')));
}
});
</script>
Is this what you want?
(I used this JavaScript sprintf() implementation to generate the embed code)
Youtube does not just change the dimensions, but rewrites the whole string...
So, you need to hold each property in its own variable and just recreate the whole value..
Javascript
var height = 500; // default value
var width = 500; // default value
var size = 500; // default value
$(document).ready(function(){
$('#dimensions').val(height + '-' + size + '-' + width);
// assuming that you put a different id to each a href (id : width or height or size)
// do the following for each button
$('#width').click(function(){
width = 700;
$('#dimensions').val(height + '-' + size + '-' + width);
return false;
});
});
HTML
<input value="height-size-width" id="dimension">
<a href="#" id="width">change width</a>
You can use the split and join methods to get the values and put them together again. Example:
<input type="text" id="data" value="178-4-56" />
<a href="javascript:var values=$('#data').val().split('-');values[0]=parseInt(values[0])+1;$('#data').val(values.join('-'));">increase height</a>
<a href="javascript:var values=$('#data').val().split('-');values[1]=parseInt(values[1])+1;$('#data').val(values.join('-'));">increase size</a>
<a href="javascript:var values=$('#data').val().split('-');values[2]=parseInt(values[2])+1;$('#data').val(values.join('-'));">increase width</a>