Adding "i" to input field, but should be hidden

I want to add "i" to a input field when the red div is clicked, but the "i" that is added to the input field should not be viewable. If the green button is clicked the hidden "i" should be removed.

Here is my HTML live: http://jsfiddle.net/mtYtW/60/

My HTML:

<div class="input string optional">
    <label for="company_navn" class="string optional">Name</label>
    <input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string opti开发者_如何学运维onal">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:green;">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:red;">
</div>

How to create this functionality?

If you would like to associate data with a specific element, I suggest the .data() method of jQuery. Take a look at the jQuery docs. It's a much cleaner way of accomplishing your goal.

Here's a working Fiddle to get you started.

EDIT

Per the new requirement spelled out in the comments to your question, you can attach to the form submit event like this:

$('#yourForm').submit(function() {
    if($('#webhost_navn').data('myData') == 'i')
    {
        var val = $('#webhost_navn').val();
        $('#webhost_navn').val('i' + val);
    }
});

NOTE: This code relys on the orginal code in my Fiddle.

It sounds like you want to associate some data with the input field, but not alter the input field's value. For that, you can use the data method:

$(document).ready(function() {
    $('#redDiv').click(function() {
        $('#webhost_navn').data('myData', 'i');
    });
    $('#greenDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
});

You'll need to add id's to the red and green divs for the above example to work as is, respectively, redDiv and greenDiv. To retrieve the data you associate with the input, do this:

var myData = $('#webhost_navn').data('myData'); // Will equal 'i' or null

API Ref: http://api.jquery.com/data

EDIT: To append the "i" value to the input's value:

var myData = $('#webhost_navn').data('myData'),
    val = $('#webhost_navn').val();
if (myData) {
    $('#webhost_navn').val(myData + val);
}

Working example: http://jsfiddle.net/FishBasketGordo/e3yKu/

My update to your code here: http://jsfiddle.net/mtYtW/61/ Basically I gave your red/green button's id's and created a click event to add/remove the content. I also created a css definition for the color of the input box to be white so you don't see the text.

<div class="input string optional"><label for="company_navn" class="string optional"> Name</label><input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional"></div>
<div id='green' style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>
<div id='red' style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>

css:

label {display:block;}
#webhost_navn{color:white};

js:

$("#red").live("click",function()
{
    $("#webhost_navn").val("i");
});
$("#green").live("click",function()
 {
     $("#webhost_navn").val("");
 });

Note if the goal is to post an "i" and have nothing else as a value (ie no user input) use <input type='hidden' id=webhost_navn > and use the same jquery code as above without the need for the css.