CODEWITHSUNDEEP
javascriptjquery
Uthman Rahimi
Uthman Rahimi

Reputation: 708

cant get textbox value with space - jquery

I have a text box and a button , I writed a script that when clicked on button , create new textbox and Add it to form .

but when I have text Like 32 bit and clicked on button It created a textbox with value like 32 . I get inspect element and result was :

<input type="text" name="Options" class="field-input add-more" value="32" bit="">

my script:

 $("#add-more").click(function(e){
    e.preventDefault();
    var text = $("#more-text");

    var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
    $("#frm-fields").append(newTag);
    text.val("");
});

please see below example .

 $("#add-more").click(function(e){
        e.preventDefault();
        var text = $("#more-text");

        var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
        $("#frm-fields").append(newTag);
        text.val("");
    });
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row "  id="div-fields">
            <div class="col-lg-12">
                
                <div class="form-horizontal" id="frm-fields-options">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="more-text" />
                            <div class="input-group-addon">
                                <span class="btn btn-sm btn-success" id="add-more">+</span>
                            </div>
                        </div>
                    </div>
                    <div id="frm-fields" class="row">
                     
                    </div>
                </div>
            </div>
         
        </div>

Upvotes: 2

Views: 5579

Answers (4)

Satpal
Satpal

Reputation: 133403

Use jQuery method .val() to set text by converting HTML string in to a jQuery object.

 //Create a jQuery object
 var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');

 //Set the text and append to form
 $("#frm-fields").append(newTag.find('input').val(text.val()).end());


$("#add-more").click(function(e) {
  e.preventDefault();
  var text = $("#more-text");

  var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');

  $("#frm-fields").append(newTag.find('input').val(text.val()).end());
  text.val("");
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row " id="div-fields">
  <div class="col-lg-12">

    <div class="form-horizontal" id="frm-fields-options">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" id="more-text" />
          <div class="input-group-addon">
            <span class="btn btn-sm btn-success" id="add-more">+</span>
          </div>
        </div>
      </div>
      <div id="frm-fields" class="row">

      </div>
    </div>
  </div>

</div>

Upvotes: 2

Jai
Jai

Reputation: 74738

You have to put a "" quotes around your value attribute as the value is space separated: 

value="'+ text.val() + '"

Upvotes: 1

brk
brk

Reputation: 50291

This line is not balanced .Opening and closing quotes for value attribute is not proper. 

'<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' />

Also you need check there is an empty space between quotes is this line

$("#more-text").val(" ");

JS

$("#add-more").click(function(e){
            e.preventDefault();
            var text = $("#more-text").val();
              console.log(text);
            var newTag = '<div class="col-lg-3">'+
                              '<input type="text" name="Options" class="field-input add-more" value="'+text+'"/>'+
                                  '<span class="btn-sm btn-danger remove-me field-input">x</span>'+
                             '</div>';
            $("#frm-fields").append(newTag);
            $("#more-text").val(" ");
        });

JSFIDDLE

Upvotes: 2

rgajrawala
rgajrawala

Reputation: 2188

You forgot to include the double-quotes:

 $("#add-more").click(function(e){
        e.preventDefault();
        var text = $("#more-text");

        $("#frm-fields").append('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value="' + text.val().replace(/\"/g, '&quot;') + '" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');
        text.val("");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row "  id="div-fields">
            <div class="col-lg-12">
                
                <div class="form-horizontal" id="frm-fields-options">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="more-text" />
                            <div class="input-group-addon">
                                <span class="btn btn-sm btn-success" id="add-more">+</span>
                            </div>
                        </div>
                    </div>
                    <div id="frm-fields" class="row">
                     
                    </div>
                </div>
            </div>
         
        </div>

Upvotes: 2

Related Questions