Solved

Switch input field to text using JavaScript

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 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