Reputation: 480

Value is "undefined" what have I got wrong?

Here is my Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>Setlist</title>
    <style type="text/css">
    body{ }
    </style>
</head>
<body>
<script  type="text/javascript" src="javascripts/jquery-1.9.1.js"> </script>

<!-- Site navigation menu -->
<ul class="navbar">

</ul>

<button href="#" type="button" id="toggle">File Tools</button>
<div id="tools">

    <P>Add a Set list:<br>
        <LABEL for="labelName">Set List Name: </LABEL>
              <INPUT type="text" name="slName" id="slname"><button id="createSL" value="Create Setlist">Create Set</button>
        </P><br>
    <P>Delete a Set list: (need to add functionality)<br>
        <? include("remSLcombo.php"); ?> <button href="#" type="button" id="delSl">Delete Setlist</button>
    </P>

</div><BR>

<? include("combo.php"); ?>






    <script  type="text/javascript">
         $( document ).ready(function(){
            $('#tools').hide();
            $("#tunelist").change(function(e){

                var test = $(this).val();
                $.ajax({
                    type: "POST",
                    url: "new.php",
                    data: { database : test },
                    error: function(e){
                        alert(e.status);
                    },
                    success: function(response){
                        $('#display').html(response);
                    }

                });

            /*$(function(){
                setInterval(function(){
                    $("#setlist").load("new.php");
                }, 1 * 1000);
            });*/
            });

            // toggles the slickbox on clicking the noted link  
            $('#toggle').click(function() {
                $('#tools').toggle(400);
                return false;
            });

            $('#createSL').click(function(){
                var sendIt = $("#slName").val();
               $.ajax({

                    type: "POST",
                    url: "createSL.php",
                    data: {slName : sendIt},
                    error: function(e){
                        alert("The PHP Call failed!  hmmm");
                        alert(e.status);
                    },
                    success:  function(response){
                        alert(response);
                    }

                }); 
            });

        });


    </script>

<div id= "display">
</div>
</body>
</html>

In the function $('#createSL').click(function() the value sendIt shows undefined when I step through that function. What am I doing wrong? Have I left out a pointer to the div or something?

Thanks

Upvotes: 1