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

Question

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 optional">
</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?

You want to ad an invisible i to the textbox? Why? Also, what have you tried so far? — Richard Dalton, Aug 09 '11 at 15:02
You want to add the text 'i' to the value of the input field without it being visible? The value of the input field is always visible, unless you hide the complete input field, so I am afraid that this is not possible. If you wanted something else, you should update your question a bit and provide more/clear information. — Veger, Aug 09 '11 at 15:04
#2 - If it is not possible to add the "i" to the value of the input field, is it then possible to add it when submitting the form? — Rails beginner, Aug 09 '11 at 15:08
do you still need other text in the input field? Why don't you use an input type hidden? — scrappedcola, Aug 09 '11 at 15:09
#1 - Yes, or it should just be added when the form is submitted, but at the front. Because I use it to decide which image should appear. — Rails beginner, Aug 09 '11 at 15:10

James Hill · Answer 1 · 2011-08-09T15:22:32.970

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.

FishBasketGordo · Accepted Answer · 2011-08-09T17:49:49.113

2

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/

edited Aug 09 '11 at 17:49

answered Aug 09 '11 at 15:06

FishBasketGordo

22,904
4
58
91

Nice, can I add the data to the input value when the form is submitted? – Rails beginner Aug 09 '11 at 15:16
Sure, just handle the submit event and append the data anyway you like, or use a hidden field. – FishBasketGordo Aug 09 '11 at 15:19
Here is my code: http://pastie.org/2345480 When clicking the red div and submitting the i is not added – Rails beginner Aug 09 '11 at 15:46
You're not retrieving the value of "myData" from the input using the `data` method, as in my second code snippet. You're concatenating the string literal "myData" with you input's value. – FishBasketGordo Aug 09 '11 at 15:51
If I use your secound code would the input just be "i" or null? I want the "i" to be added as the first letter and then the value of the input field on submit – Rails beginner Aug 09 '11 at 15:53
It depends on whether you clicked the red or green div last. You said the red div should add the "i" and the green div should remove it, correct? – FishBasketGordo Aug 09 '11 at 15:57
@Railsbeginner let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2283/discussion-between-fishbasketgordo-and-rails-beginner) – FishBasketGordo Aug 09 '11 at 15:57
Maybe you can help to the problem when having multiple inputs: http://stackoverflow.com/questions/7081545/how-to-keep-data-functions-and-variables-dry – Rails beginner Aug 16 '11 at 18:00

score 0 · Answer 3 · answered Aug 09 '11 at 15:08

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.

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

3 Answers3