Solved

Switch input field to text using JavaScript

Posted on 2011-09-19
5
208 Views
Last Modified: 2012-05-12
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
Comment
Question by:yando18
  • 3
5 Comments
 

Author Comment

by:yando18
ID: 36562789
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36562923
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
 

Author Comment

by:yando18
ID: 36563160
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
 

Author Comment

by:yando18
ID: 36563249
$editForm.find('.state').contents().unwrap();

seems to work however it strips the styling all together.
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36564593
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now