Find solution
How can I get the value of dynamically created input?

jquery can't get input value from dynamically created field within a function

  • 'This is a little strange, and different than what I can find in the forums, but I encounter this problem again and again when I work with jQuery. I have code that calls ajax and creates (on success) an input like: Start Date: <input type="text" id="gr_start_dt" size=10> <button onclick="reassign_u();">Execute</button> In the main body of the HTML, I have a function like this: <script type="text/javascript" language="javascript"> function reassign_u() { alert($("#gr_start_dt").val()); } </script> This will alert to "undefined". If I change the button in the ajax generated section to: <button onclick="alert($('#gr_start_dt').val());">Execute</button> it will alert with the value of the box. I can get the value from outside of the function, but not within the function. Am I missing something here? Is there some scope I'm not aware of with jquery and dynamically generated pages with ajax? I'm using jquery 2.1.3 and 2.1.4, Firefox 39.

  • Answer:

    Removing the the line: $("#invoice_detail_content").html(''); from the following function should resolve the issue. This line removes the the textbox in question. function reassign_user2() { $("#action_menu_container").hide(); $("#invoice_detail_content").html(''); //<== REMOVE THIS $("#invoice_detail").show(); $("#loading").show(); console.log($("#group_start_dt")); alert($("#group_start_dt").val()); $.ajax({ url: "fetch.php", cache: false, method: "POST", data: { action: 'reassign_group', parameters: JSON.stringify(parameters) } }) .done(function(result) { $("#loading").hide(); result = result.trim(); if(result) { $("#invoice_detail_content").html(result); } else { $("#invoice_detail").hide(); show_invoices($("#invoice_status_select").val()); } }) .fail(function( jqXHR, textStatus ) { $("#loading").hide(); alert( "Request failed: " + textStatus ); }); }

J.R. at Stack Overflow Visit the source

Was this solution helpful to you?

Other answers

I think that is because when the javascript function was cached into the browser the element $("#gr_start_dt") is not yet defined. And calling the function will just call the function that was cached having the undefined element inside the alert function. So why not do it like this: below is the html Start Date: <input type="text" id="gr_start_dt" size=10> <button onclick="reassign_u($('#gr_start_dt'));">Execute</button> below is the javascript: <script type="text/javascript" language="javascript"> function reassign_u(el) { alert($(el).val()); } </script>

Neil Villareal

I'm pretty sure creating things with JQuery/AJAX still causes it to enter the DOM, which means it can be gotten with $('selector'). So it should be just as straightforward usual. I used: <script> function on_clicked() { alert($("#text_input").val()); } </script> <input type="text" id="text_input" size=10> <button onclick="on_clicked();">Execute</button> Working JSFiddle http://jsfiddle.net/usqn8ut4/. I found that you have to declare the function before setting it to the onclick attribute. Which makes sense. Otherwise I don't see any other big problems. Update I am now making the <form> element "asynchronously" (I used a timeout to simulate AJAX. As long as the callback is declared before and in scope, it works fine. http://jsfiddle.net/usqn8ut4/1/ I've replicated what you are saying as well as I can, and it still works.

Shadowen

This will only get the value of textbox. Start Date: <input type="text" id="gr_start_dt" size=10> <button onclick="reassign_u();">Execute</button> <script type="text/javascript"> function reassign_u() { var val = this.val; alert(val); } </script>

aldrin27

It works for me. May be you should put the js function in the same file from which you make the AJAX call. here's the code index.php <head> function doSomeTheing() { $.ajax({ url: 'test01.php', success: function (mydata) { $('#container').html(mydata); } }); } function reassign_u() { alert($("#gr_start_dt").val()); } </head> <body> <input type="button" id="abc" onclick="doSomeTheing()" value="test"> <div id="container"> </div> </body> test.php contains <?php echo 'Start Date: <input type="text" id="gr_start_dt" size=10> <button onclick="reassign_u();">Execute</button>';

Abdalla Essam Ali

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.