asked on

JQuery Mobile giving me "undefined"

Hi all,

i have coded a website to have a text item that will when you click the add button, add the item to a listview. I am struggling to get it to read the text from the textbox and keep getting "undefined" instead of the text.

Can you please tell me where i have gone wrong

thanks

<!DOCTYPE html>
<html>
  <head>
    <title>Scripting listview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>    
    <script>
	var $txtbox = $("#txtbox").val();
      <!-- var count = 0; -->
      $("#main").live("pagecreate", function(event) {
        $("#numlist").listview({create: function(event, ui) {
          $("#addBtn").bind("click", function(event, ui) {
            var str = "<li><a href='#'>Item " + ($txtbox) + "</a></li>";
            $("#numlist").append(str);
            $("#numlist").listview("refresh");
          });
          $("#removeBtn").bind("click", function(event, ui) {
           // if (--count < 0) {
             // count = 0;
             // return;
           // }
            $("#numlist").find("li").remove();
            $("#numlist").listview("refresh");
          });
        }});
      });
    </script>
    
  </head>
  <body>
    <!-- Main Page -->
    <div id="main" data-role="page" data-theme="a">
      <div data-role="header" data-theme="a">
        <h1>Scripting listview</h1>
      </div>
	  <div data-role="fieldcontain">
    <label for="txtbox">Text Input:</label>
    <input type="text" name="txtbox" id="txtbox" value=""  />
</div>	
      <div data-role="content">
        <div data-role="fieldcontain">
          <fieldset class="ui-grid-b">
            <div class="ui-block-a" style="width: 65%">
              <ul id="numlist" data-role="listview" data-theme="e" data-inset="true">
              </ul>
            </div>
            <div class="ui-block-b">
              <button data-theme="b" id="addBtn">Add</button>
              <button data-theme="b" id="removeBtn">Remove</button>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  </body>

Open in new window

ASKER CERTIFIED SOLUTION

WebDevEM

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JQuery Mobile giving me &quot;undefined&quot;

JQuery Mobile giving me "undefined"