0

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?

2
  • I really can't tell what this means. Commented Jun 5, 2010 at 11:04
  • Welcome to SO. Technical questions don't need the "Community Wiki" checkbox, that is for poll type questions only. Can you clarify your question somewhat? It's hard to understand right now. Commented Jun 5, 2010 at 11:10

3 Answers 3

1
<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)

Sign up to request clarification or add additional context in comments.

Comments

0

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>

1 Comment

@John, just add an extra attribute on your link.. and use it (like oblio showed :))
0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.