Unable to access value of HTML Input box written by .html() jQuery function?

Question

I am having trouble accessing the value of an HTML Input element using jQuery, this input element was written initially using .html() function in an earlier function.

THIS IS MY CODE THAT CREATES THE INPUT ELEMENT - NO ISSUES WITH THIS

<script type="text/javascript">
           $(document).ready(function() {
            $("#model").change(function()
                {                                
                 $.post("../includes/_ajaxSpecs.php",{ model:$(this).val() } ,function(data)
                 {
                var string = data;
                var partsArray = string.split(',');
                   $("#comp_specs").fadeTo(200,0.1,function() //start fading the messagebox
                   {
                    //add message and change the class of the box and start fading
                   $(this).html(partsArray[0]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input1' id='input1' /><br />"+partsArray[1]+"<input style='width:12em;margin-left:5px;border:1px solid #CCC;' name='input2' id='input2' /><br />").addClass('jText').fadeTo(900,1);
                     });
                  });
                });
              });
</script>

Now I want to grab the value in #input1 and set a different input box (#new_input) to that value, using this code:

<script type="text/javascript">
$(document).ready(function() {
$("#input1").change(function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

Not sure why I cannot access these values in #input1 and #input2 even though I can see them fine in the final POST? Are there issues with JQuery accessing form elements written by the .html() function? I use the second function listed quite a bit and know this works with standard form elements...

UPDATE: HERE IS MY UPDATED CODE PER YOUR SUGGESTIONS, BUT STILL UNABLE TO GRAB IT?

<script type="text/javascript">
$('#div1').on('change', '#input1', function() {
    $("#input1").change(function() {

    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});
</script>

UPDATE: SOLVED, Thanks @Dragon

are you binding the .change event before or after you create the inputs? — Mikey G
– Mikey G, Commented Feb 22, 2012 at 20:57
The change event is coming after the initial function that creates the element — xXPhenom22Xx
– xXPhenom22Xx, Commented Feb 22, 2012 at 20:59

j08691 · Accepted Answer · 2012-02-22 21:53:54Z

3

You're calling change on $("#input1") on $(document).ready but $("#input1") hasn't been created yet. Use jQuery's on() function to bind the change event to it so that once it does exist it will fire.

$(document).on("change", "#input1", function(event){
    var text = $("#input1").val(); 
    $("#new_input").val(text);   
});

edited Feb 22, 2012 at 21:53

answered Feb 22, 2012 at 20:57

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dragon Over a year ago

I don't think this will work, since you'll face the same problem -- #input1 does not exist, so when you call .on(), it will do nothing. .live() would have worked in this case, but it's deprecated in favor on .on().

j08691 Over a year ago

@dragon - You just answered your own question. .live() was deprecated in favor of .on() as of jQuery 1.7, and you can create input1 after the DOM is ready and bind to it just as I've shown in my example.

dragon Over a year ago

@j086901 I understand, but how is your usage of .on() different from .click() used in the original question? Both would do the same if the handler were being attached after creating the element -- but I believe that's not the case here.

j08691 Over a year ago

@dragon - I misunderstood your point. You're right, the use of .on() here needs to be tied to an existing document element. Code updated.

Alexander Corwin · Accepted Answer · 2012-02-22 20:57:32Z

2

No, what's going on is that your jQuery code is getting executed when the page loads. At that point, #input1 and #new_input don't exist.

You want something like

$('#containingDiv').on('change', '#input1') function()
{
}

Or else maybe register the $('#input1').change() after the fields are written - maybe as a callback at the end of your $('#model').change?

answered Feb 22, 2012 at 20:57

Alexander Corwin

1,1676 silver badges11 bronze badges

1 Comment

xXPhenom22Xx Over a year ago

Small type in your function but still helped, thanks for the help!

dragon · Accepted Answer · 2012-02-22 21:03:23Z

1

Like others pointed out, you're binding the event handler to '#input1' element before it's created. Either bind it after it's created, or bind it to the document with '#input1' as the context. Alternatively, you can bind it to any parent element that lives long enough to see the complete cycle of binding the handler and invoking it.

$(document).ready(function() {
$(document).on('change', "#input1", function()
        {
    var text = $("#input1").val(); 
    $("#new_input").val(text);      
        }); 
});

That's all. For more info, http://api.jquery.com/on/

answered Feb 22, 2012 at 21:03

dragon

1,80516 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unable to access value of HTML Input box written by .html() jQuery function?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related