CODEWITHSUNDEEP
javascriptjqueryhtml
user1589188
user1589188

Reputation: 5736

How to chang all <input> to its value by clicking a button and change it back later?

The problem: I have a page with many <input> fields (just say all are text fields) I would like to have a button, when click on it, all input fields will become plaintext only. e.g. <input type="text" value="123" /> becomes 123 and if I click on another button, the text will change back to e.g. 123 becomes <input type="text" value="123" />

Is there an automatic way to scan for all the <input>s and change them all at once using javascript and jquery.

Thank you!

Edited Seems you guys are getting the wrong idea. Read what I have written again: e.g. <input type="text" value="123" /> becomes 123

I have value="123" already, why would I want to set the value again???

What I want is e.g.

<body><input type="text" value="123" /><input type="text" value="456" /></body> becomes <body>123456</body> and later <body>123456</body> back to <body><input type="text" value="123" /><input type="text" value="456" /></body>

Upvotes: 0

Views: 150

Answers (4)

Khanal Kamal
Khanal Kamal

Reputation: 146

Check this link http://jsfiddle.net/Evmkf/2/

HTML:

<div id='divInput'>
    <input type="text" value='123' />
    <br/>
    <input type="text" value='456' />
    <br/>
    <input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
    <input type="button" id='btnPlain' value='Make It Plain' />
    <input type="button" id='btnInput' value='Make It Text' />
</div>​

Javascript:

$("#btnPlain").bind('click',function(){
  $("#plainText").html('');
  $("#divInput input[type=text]").each(function(index){
    $("#plainText").append('<span>'+$(this).val()+'</span>');
    $("#divInput").hide();
    $("#plainText").show();
  });
});

$("#btnInput").bind('click',function(){
  $("#divInput").html('');
  $("#plainText span").each(function(index){
    $("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
    $("#plainText").hide();
    $("#divInput").show();
  });
});

​

Upvotes: 2

david
david

Reputation: 18288

Use this to go one way, 

$('input').replaceWith(function(){
    return $('<div />').text(this.value).addClass('plain-text');
});​​​

and this to go the other.

$('.plain-text').replaceWith(function(){
    return $('<input />').val($(this).text());
});

​

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55750

Try this FIDDLE

$(function() {
    var arr = [];
    $('#btn').on('click', function() {
        var $text = $('#inp input[type="text"]');
        if( $text.length > 0){
            $text.each(function(i) {
                arr[i] = this.value;
            });
            $('#inp').html(arr.join());
        }
        else{
            if(arr.length <= 0){
            }
            else{ // Add Inputs here
                var html = '';
                $.each(arr, function(i){
                    html += '<input type="text" value="' + arr[i]+ '"/>'
                });
                 $('#inp').html(html); 
            }
        }
    });
});

​

Upvotes: 1

Nw167
Nw167

Reputation: 169

You need to create a hidden element for each input, then use jquery to hide the input, show the hidden element and give it the inputs value.

<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>

$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

Upvotes: -1

Related Questions