0

I am developing a special-purpose jQuery plugin. Basically, it divides the contents of a page in a "header" section and a "main" section. The "main" section usually contains grids, and the "header" section usually contains input boxen and dropdowns which are used to filter the contents of the grids. The plugin automates the filtering process by doing the following:

var data =
$('#header [id][value]')
.map(function() {
    $filter = $(this);
    return {name: $this.attr('id'), value: $this.val()};
});
// data will be passed to $.ajax

Sometimes, I need that a particular filter in the "header" section be a readonly field. In those cases, I would like to display that field as a regular HTML label. However, this gets in the way how my plugin extracts the parameters to be passed to $.ajax.

A way to get around this problem would be to do the following:

<div id="header">
  ...
  <!-- notice the duplicity -->
  <input name="hiddenField" value="hiddenValue"/>hiddenValue
  ...
</div>

(Code like the preceding snippet is not actually present in my HTML files. It is just the HTML representation of the DOM elements generated by my plugin.)

But I want a better solution, one that does not involve duplicating data. So, is there any HTML tag that looks like a <span>, but whose content is defined by its value attribute?

1 Answer 1

1

I think it can be done by styling <input type="text" disabled="disabled" /> that it will have no background nor borders:

input[type=disabled]{
    background:transparent;
    border:0;
    margin:0;
    padding:0;
}

You can try it.

0

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.