Question about dynamically adding textboxes and droplist to build SQL commande

Question about dynamically adding textboxes and droplist to build SQL commande

Hi Guys
Could anyone please look at the code below (Curtisy of Jamboro ASP.net forums)

This is a way of adding a droplist and a text box to dynamically build an SQL commande

What I am trying to do is: if the user chooses "Date" from the dropdown list then the form should display two textboxes instead of only one, and the user would be able to search for a range by adding dates to the two boxes, could anyone please help??

To understand what I am trying to do you can look at this website






Here is the code below:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
        })
        function addControl() {
            var li = $('<li>');
            var sel = $('<select>', { change: function () { dateClick(object); } });
            $('<option>', {
                text: "All Files"
            }).appendTo(sel);
            $('<option>', {
                text: "Author"
            }).appendTo(sel);
            $('<option>', {
                text: "Book"
            }).appendTo(sel);
$('<option>', {
                text: "Date"
            }).appendTo(sel);
            var con = $('<select>');
            $('<option>', {
                text: "and"
            }).appendTo(con);
            $('<option>', {
                text: "or"
            }).appendTo(con);
            $('<option>', {
                text: "not"
            }).appendTo(con);
            $('divsearch img').hide();
            con.appendTo(li);
            sel.appendTo(li);
            li.appendTo('ul');
            $('<input>').appendTo(li);
            $('<img src= http://demo.blogaddition.com/dynamic_textbox/remove.png onclick="CutControl(this);">', {name:'remove',  click: function () { CutControl(this); } }).appendTo(li);
            $('<img src= http://demo.blogaddition.com/dynamic_textbox/add.png onclick="addControl();">', { name:'add',  click: function () { addControl(); }}).appendTo(li);

        }
        function CutControl(oject)
        {
            $(oject).parent().remove();
            var i = $('img[name=add]').length;
            $('img[name=add]').eq(i-1).each(function () {
                $(this).show();
            })
        }
        function getSqlWhere()
        {
            var sql = '';
            var i = 0;
            $('ul li').each(function () {
                var temp = "";
                var conseltext = $('select', this).eq(0).find('option:selected').text();
                var seltext = $('select', this).eq(1).find('option:selected').text();
                var inpputtext = $('input', this).val();
                
                if (i = 0) {
                    temp += conseltext + "=" + inpputtext + " ";
                }
                else {
                    temp += " " + conseltext + " " + seltext + "=" + inpputtext + " ";
                }
                if (inpputtext == "") {
                    temp = "";
                }
                else {
                    sql += temp;
                }
                i++;
            })
            alert(sql);
        }
        function dateClick(object)
        {
            var conseltext = $(object).find('option:selected').text();
            if (conseltext == "somevalue") {
                $(object).next().datepicker();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divsearch">
            <ul>
                <li>
                    <select onchange="dateClick(this);">
                        <option>All Files</option>
                        <option>Author</option>
                        <option>Book</option>
                         <option>Date</option>
                    </select>
                    <input type="text" /><img name="add" alt="" src="http://demo.blogaddition.com/dynamic_textbox/add.png" onclick="addControl(); " />
                </li>
            </ul>
        </div>
        <input id="Button1" type="button" value="search" onclick="getSqlWhere();" />
    </form>
</body>
</html>