Switch input field to text using JavaScript

Hey all,
I need help with a script and html markup that changes an input field into text. Im using the jquery validation plugin.

In short the current script has the following line:


and html

<input type="text" name="street" class="street required"/>

I need to turn the input into plain text either a div or p. Any help on this would be great thanks to all.

Who is Participating?
Gurvinder Pal SinghConnect With a Mentor Commented:
check this

<input type="text" name="street" class="street required"/>

var input = $("input[name='street']");

var html = "<span id='" + input.attr("name") + "' style='" + input.attr("style") + "' + class='"+ input.attr("class") +"'>" + input.val() + "</span>";

input.replaceWith( html );

yando18Author Commented:
So I sort of answered my own question with

 $editForm.find('.street').attr("readonly", true).val(address['street']);

however the select options do not


<select name="apt-type" class="apt-type">
      <option value="">Select Unit</option>
      <option value="Apartment">Apartment</option>
      <option value="Suite">Suite</option>
what about : http://jsfiddle.net/8Fadk/

    address = {"street":"street value", "apt-type":"apt-type value"};
    $editForm = $("#form0")
    $editForm.find('.street').each(function() {
        $(this).replaceWith("<p>" + address['street'] + "</p>");
    $editForm.find('.apt-type').each(function() {
        $(this).replaceWith("<p>" + address['apt-type'] + "</p>");

Open in new window

yando18Author Commented:
Since this is an edit form I would need to keep the users input but disable it so they can not update. There are certain fields that the user can edit.

$selectForm.find('.edit').click(function (e) {
               $editForm.find('.first-name').attr("readonly", true);                

So maybe something like this but pulling in the users input
 $editForm.find('.state').replaceWith("<p>" + ['state'] + "</p>");    
yando18Author Commented:

seems to work however it strips the styling all together.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.