CODEWITHSUNDEEP
javascriptjqueryhtml
rocky
rocky

Reputation: 81

Set the default value of an input text

my requirement is to save the entire "html" inside a div, but when i load an "html" with text fields to a div and then editing the value of the text box, the newly set value doesn't reflect in the core "html". I tried to inspect the value with fire bug and it remains the same or no value at all.With "jquery" i tried to set attribute but no attribute name value is created. how can i set the value of text fields and then get that "html" with the newly set value.

here is my html 

<div class="sub_input_box">
  <input type="text" / class="boreder_line">
  <input type="text" id="txt" value=""/>
  <input type="hidden" id="hid" />
  <div class="clear"></div>
</div>

and the jquery i used to set attribute

$("#txt").attr("value", "some value");

Upvotes: 3

Views: 54477

Answers (6)

Shomz
Shomz

Reputation: 37701

Chances are you're calling your jQuery code before the HTML input part. You can either place the jQuery stuff below it, or if you don't want to, you can do something like this: 

$(document).ready(function(){
    $("#txt").attr("value", "some value");
});

That will only run when the page is fully loaded.

However, it's unclear if you're using AJAX to load those inputs into your DOM. If so, you need to call $("#txt").attr("value", "some value"); in the onSuccess callback function which is fired after the AJAX successfully responds.

Upvotes: 3

rocky
rocky

Reputation: 81

$(document).on('focusout','input[type="text"]',function(a){
console.log(a.target.value);
a.target.setAttribute("value",a.target.value);
});

this is the solution i found, i had to set the value attribute explicitly on loose focus from the text field

Upvotes: 0

Majid Fouladpour
Majid Fouladpour

Reputation: 30252

But it does work: http://jsbin.com/eXEROtU/1/edit

var html = '<input type="text" id="txt" value=""/>';

$(document).ready(function() {

  $("#load").click(function() {
    $("#sub_input_box").html(html);
  });

  $("#inspect").click(function() {
    alert($("#txt").val());
  });

});

Upvotes: 0

chiliNUT
chiliNUT

Reputation: 19573

Excellent question. You would think clone would do this on its own, alas, it doesn't.

Here is a sample than you can hopefully adapt to do what you need

HTML

<div id=divToCopy>
    <input name=i1 value=foo><br>
    <input name=i2 value=bar>
</div>
<input type=button onclick=copyDiv(); value='Copy the div'>

<div id=newDiv>
    the copy will go here
</div>

JavaScript

    function copyDiv() {
        $('#newDiv').html($('#divToCopy').clone());

        $('#divToCopy :input').each(function() {
            var child=0;
            for (var i = 0; i < this.attributes.length; i++) {
                var attrib = this.attributes[i];
                var prop=$(this).prop(attrib.name);
                $($('#newDiv').find(' :input')[child]).prop(attrib.name,prop);
                child++;
            }
        });
    }

Upvotes: 0

Rahul Tripathi
Rahul Tripathi

Reputation: 172408

You can try something like this:-

  <input name="example" type="text" id="example" 
  size="50" value="MyDefaultText" onfocus="if(this.value=='MyDefaultText')this.value=''"
  onblur="if(this.value=='')this.value='MyDefaultText'" />

Upvotes: 1

William Yang
William Yang

Reputation: 769

Have you tried:

$("#txt").val("Hello World!");

For setting the text value, and, 

var my_string = $("#txt").val();

For getting the text value.

Let me know if it works.

Upvotes: 0

Related Questions