Question

I’m working on an online booking system, basically I want a textbox to change to paragraph text when a user clicks on a button.
Basically, removing the textbox and just displaying the value that is inserted.

This is the HTML of the textbox that I want changing:

<input type="text" class="input-txt-xxxsml left" id="txt-pickup-hn" name="txt-pickup-hn" tabindex="1" value="" />

And this is the HTML for the button that I want so when the user clicks it, it changes the textbox to just text:

<button class="btn-med ui-button ui-state-default ui-button-text-only ui-corner-all btn-hover-anim btn-row-wrapper left" name="btn-row-wrapper" >Search</button>

Any help with this would be much appreciated!

Answer 1

http://jsfiddle.net/muSYu/1/

$('#textify').click(function() {
    $('input').replaceWith(function() {
        return '<div>' + $(this).val() + '</div>';
    });
})​

For your example:

$('.btn-med').click(function() { 
   $('#txt-pickup-hn').replaceWith(function() { 
      return '<div>' + $(this).val() + '</div>';
   });
});

You should really give your button an ID by the way 🙂