CODEWITHSUNDEEP
javascriptjqueryhtml
Satinder singh
Satinder singh

Reputation: 10218

Dynamically added textbox with given value not added properly,jquery

I added textbox value as Baker's Basket, Pune, Maharashtra, Indiasd but on click event in textbox it only shows Baker's

I want to display whole text Baker's Basket, Pune, Maharashtra, Indiasd in the textbox.

JS FIDDLE EXAMPLE

// Try to Enter text given bellow 
//Baker's Basket, Pune, Maharashtra, Indiasd

$("#clk").on('click', function () {
    $("#cnt_div").empty();
    var getTxt = $("#txt_n").val();
    var addContent = "<input type='text' value=" + getTxt + " />";
    $("#cnt_div").append(addContent);
});

without editng addContent variable

Edited: JS FIDDLE SAMPLE TWO

$("#clk").on('click', function () {

    var gData1 = $("#txt_1").val();
    var gData2 = $("#txt_2").val();
    var gData3 = $("#txt_3").val();
    var cnt_1 = "<span class='lbl_normal_mode'>" + gData1 + "</span><input class='txt_edit_mode' value=" + gData1 + "  type='text'/>";
    var cnt_2 = "<span class='lbl_normal_mode'>" + gData2 + "</span><input class='txt_edit_mode' value=" + gData2 + "  type='text'/>";
    var cnt_3 = "<span class='lbl_normal_mode'>" + gData3 + "</span><input class='txt_edit_mode'  value=" + gData3 + " type='text'/>";

    var content_Data = "<div class='chunk_div_holder'><div style='float:left:width:100%'>" + cnt_1 + "</div><div style='float:left:width:100%'>" + cnt_2 + "</div><div style='float:left:width:100%'>" + cnt_3 + "</div></div>";
    $(".dynmic_cntt").append(content_Data);
});

Upvotes: 1

Views: 904

Answers (6)

Alex Gill
Alex Gill

Reputation: 2491

Heres a better way of doing this...

var addContent=$("<input type='textbox' />").val(getTxt);

http://jsfiddle.net/ZyMCk/9/

Basically, if creating an element to append to the DOM your better off doing this as a jQuery object. This way we can take advantage of methods such as val() for adding the value.

UPDATE

Ive simplified things a bit for you...

JSFIDDLE: http://jsfiddle.net/ZyMCk/22/

$("#clk").on('click', function () {

    $('.dynmic_cntt').empty();

    $('.form-text').each(function(){
        var $div = $('<div style="float:left:width:100%;"></div>');
        var $span = $('<span class="lbl_normal_mode">'+ $(this).val() +'</span><input class="txt_edit_mode" value="'+$(this).val() +'"  type="text"/>');

        $('.dynmic_cntt').append( $div.append( $span ) );
    });

});

Upvotes: 1

AmanS
AmanS

Reputation: 1520

change "+getTxt+" to '"+getTxt+"' fiddle

OR

change "+getTxt+" to \""+getTxt+"\"

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25537

Value attribute should enclose in quotes. In your case, its better to use double quotes, because Baker's Basket, Pune, Maharashtra, Indiasd already have a single quote in it.

$("#clk").on('click',function(){
     $("#cnt_div").empty();
var getTxt=$("#txt_n").val();  
var addContent="<input type='textbox'  value=\""+getTxt+"\" />";
    $("#cnt_div").append(addContent);
});

Fiddle

Edit

$("#clk").on('click',function(){
     $("#cnt_div").empty();
var getTxt=$("#txt_n").val();  
    var addContent=$("<input/>",{type:"text",value:getTxt});
    $("#cnt_div").append(addContent);
});

Updated fiddle

Upvotes: 1

Surinder ツ
Surinder ツ

Reputation: 1788

It is because you aren't escaping ' single quote. Instead you can replace

this line

var addContent="<input type='textbox' value='"+getTxt+"' />";

with

var addContent=$("<input type='textbox' />").val(getTxt);

or

var addContent="<input type='textbox' value=\""+getTxt+"\" />";

Upvotes: 1

matpol
matpol

Reputation: 3074

Add the field in two stages:

  1. add the field as you are already
  2. set the value of the field using .val()

Upvotes: 1

VisioN
VisioN

Reputation: 145458

You should better append the element and its properties dynamically as an object:

$('<input>', {
    type: 'text',
    value: $("#txt_n").val()
}).appendTo($("#cnt_div").empty());

This will solve the problem of extra spaces (no quotes for value=Baker's Basket), wrong string escape (if the value will have quotes) for value attribute and other caveats.

N.B.: There is no textbox type for <input> element. It should be text instead.

DEMO: http://jsfiddle.net/ZyMCk/11/

Upvotes: 1

Related Questions