I have an HTML form with a number of input fields that are added dynamically with content in each field using jQuery.

Is it possible to hide the fact that these fields are input fields and only display them as the content in the field?

I don't want to hide the entire field and it's contents --- just hide the fact that its an input type field.

I've tried jQuery's hide() and $('#foo').css('display','none'), but that hides the entire field.

The idea is that there could be a large number of fields, but I don't want the user to see all the input text fields.

I have an HTML form with a number of input fields that are added dynamically with content in each field using jQuery.

Is it possible to hide the fact that these fields are input fields and only display them as the content in the field?

I don't want to hide the entire field and it's contents --- just hide the fact that its an input type field.

I've tried jQuery's hide() and $('#foo').css('display','none'), but that hides the entire field.

The idea is that there could be a large number of fields, but I don't want the user to see all the input text fields.

• javascript
• jquery
• css

• 2 Are you saying you don't want the borders to show? – user2625787 Commented Aug 29, 2013 at 22:16
• 4 If you do not want them to look like input's why make them input's? – Pevara Commented Aug 29, 2013 at 22:17
• 1 You want to display the text but not the field? Why use an input field? Or do you want to just reformat the input field css to look different? – Automate This Commented Aug 29, 2013 at 22:17
• 1 If I understand you right, you want something like this jsfiddle/xVFX2 But remember, that this could confuse your users – m3div0 Commented Aug 29, 2013 at 22:19
• 2 I need to be able to submit the contents of the inputs when the form's submit button is clicked. – Raj Commented Aug 29, 2013 at 22:58

3 Answers 3

Start with something like this:

input {
    border: none;
    outline: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
}

How about something like this :

$('.dynamic input').each(function() {
    $('<div/>').html($(this).val()).insertAfter($(this).hide());
});

Use the css border:none; property and make sure the box is long/tall enough.