Solved

Switch input field to text using JavaScript

Posted on 2011-09-19
5
216 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to count occurrences of each item in an array.

828 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