CODEWITHSUNDEEP
javascriptjquery
xXPhenom22Xx
xXPhenom22Xx

Reputation: 1275

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

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

Upvotes: 0

Views: 724

Answers (3)

j08691
j08691

Reputation: 207973

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);   
});

Upvotes: 3

dragon
dragon

Reputation: 1785

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/

Upvotes: 1

Alexander Corwin
Alexander Corwin

Reputation: 1167

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?

Upvotes: 2

Related Questions