JavaScript
Article

jQuery convert input to text

By Sam Deering

Use jQuery to convert your form inputs into text elements. At the moment the script only works for text inputs but could easily be extended to work for other input types such as textarea, radio, checkbox etc…

$form = $('#register-form1');
$form.find(':input').each( function(i,v)
{
    var iElem = $(v),
        name = iElem.attr('name'),
        type = iElem.attr('type'),
        labelElem = iElem.parents().find('label[for="'+name+'"]'),
        labelTxt = labelElem.html(),
        iVal = iElem.val();

    if(type == 'input')
    {
    iElem.parent().prepend('

'+labelTxt+' '+iVal+'

'); } else if (type == 'password') { iVal = iVal.substr(i).replace(/[S]/g, "*"); iElem.parent().prepend('

'+labelTxt+' '+iVal+'

'); } //remove old input elements iElem.remove(); labelElem.remove(); });

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.