• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

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:

$editForm.find('.street').val(address['street']);

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.

0
yando18
Asked:
yando18
  • 3
1 Solution
 
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

$editForm.find('.apt-type').val(address['apt-type']);

<select name="apt-type" class="apt-type">
      <option value="">Select Unit</option>
      <option value="Apartment">Apartment</option>
      <option value="Suite">Suite</option>
</select>
0
 
leakim971PluritechnicianCommented:
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

0
 
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>");    
0
 
yando18Author Commented:
$editForm.find('.state').contents().unwrap();

seems to work however it strips the styling all together.
0
 
Gurvinder Pal SinghCommented:
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 );

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now