jQuery convert input to text

Use jQuery to convert your form inputs into text elements. At the moment the script only works for text inputs but could easily be extended to work for other input types such as textarea, radio, checkbox etc…

$form = $('#register-form1');
$form.find(':input').each( function(i,v)
{
    var iElem = $(v),
        name = iElem.attr('name'),
        type = iElem.attr('type'),
        labelElem = iElem.parents().find('label[for="'+name+'"]'),
        labelTxt = labelElem.html(),
        iVal = iElem.val();

    if(type == 'input')
    {
    iElem.parent().prepend(''+labelTxt+' '+iVal+'');

    }
else if (type == 'password')
{
    iVal = iVal.substr(i).replace(/[S]/g, "*");
    iElem.parent().prepend(''+labelTxt+' '+iVal+'');
}
    //remove old input elements
    iElem.remove();
    labelElem.remove();
});

Frequently Asked Questions (FAQs) about jQuery Convert Input Text

How can I get the value of an input text box using jQuery?

To get the value of an input text box using jQuery, you can use the .val() method. This method returns the value of the selected elements. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
In this example, when the button is clicked, the value of the input element with id “test” is displayed in an alert box.

How can I set the value of an input text box using jQuery?

To set the value of an input text box using jQuery, you can also use the .val() method, but this time you pass the new value as an argument. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
$("#test").val("Hello World");
});
});
In this example, when the button is clicked, the value of the input element with id “test” is set to “Hello World”.

How can I convert input text to uppercase using jQuery?

To convert input text to uppercase using jQuery, you can use the .toUpperCase() method of JavaScript strings in combination with the .val() method of jQuery. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
var text = $("#test").val();
$("#test").val(text.toUpperCase());
});
});
In this example, when the button is clicked, the value of the input element with id “test” is converted to uppercase.

How can I convert input text to lowercase using jQuery?

To convert input text to lowercase using jQuery, you can use the .toLowerCase() method of JavaScript strings in combination with the .val() method of jQuery. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
var text = $("#test").val();
$("#test").val(text.toLowerCase());
});
});
In this example, when the button is clicked, the value of the input element with id “test” is converted to lowercase.

How can I trim leading and trailing spaces from input text using jQuery?

To trim leading and trailing spaces from input text using jQuery, you can use the .trim() method of JavaScript strings in combination with the .val() method of jQuery. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
var text = $("#test").val();
$("#test").val($.trim(text));
});
});
In this example, when the button is clicked, leading and trailing spaces are removed from the value of the input element with id “test”.

How can I replace a part of the input text using jQuery?

To replace a part of the input text using jQuery, you can use the .replace() method of JavaScript strings in combination with the .val() method of jQuery. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
var text = $("#test").val();
$("#test").val(text.replace("old", "new"));
});
});
In this example, when the button is clicked, the first occurrence of the string “old” in the value of the input element with id “test” is replaced with “new”.

How can I check if the input text is empty using jQuery?

To check if the input text is empty using jQuery, you can use the .val() method and compare the returned value with an empty string. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
var text = $("#test").val();
if(text == ""){
alert("Input is empty");
}
});
});
In this example, when the button is clicked, an alert box is displayed if the value of the input element with id “test” is empty.

How can I disable an input text box using jQuery?

To disable an input text box using jQuery, you can use the .prop() method and set the “disabled” property to true. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
$("#test").prop("disabled", true);
});
});
In this example, when the button is clicked, the input element with id “test” is disabled.

How can I enable a disabled input text box using jQuery?

To enable a disabled input text box using jQuery, you can use the .prop() method and set the “disabled” property to false. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
$("#test").prop("disabled", false);
});
});
In this example, when the button is clicked, the input element with id “test” is enabled.

How can I focus on an input text box using jQuery?

To focus on an input text box using jQuery, you can use the .focus() method. Here’s an example:

$(document).ready(function(){
$("button").click(function(){
$("#test").focus();
});
});
In this example, when the button is clicked, the input element with id “test” is focused.