JavaScript
Article
By Sam Deering

jQuery convert input to text

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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+'

--ADVERTISEMENT--

'); } //remove old input elements iElem.remove(); labelElem.remove(); });
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?