需要使用jquery将文本框文本附加到html

时间:2015-03-20 12:41:31

标签: jquery html css ajax json

我需要使用jquery从文本框中附加用户输入文本。如果用户在“操作”文本框中键入内容,然后从日期文本框中选择日期,则必须在午餐和下午12点之后添加值。以下是示例链接:http://trialwebs.byethost8.com/。 Wake和Lunch的值出现在JSON文件中。这是json代码:

{
"action": [
    {"name":"WakeUp","date":"8:00am"},
    {"name":"Lunch","date":"12:00pm"}
]}

我使用了以下代码(JS& HTML):



$.getJSON("jsondata.json", function(data) {
        $.each(data.action, function(index, elem) {
            //Append option to name
            $("#name").append($("<li />", {
                text: elem.name
            }));

            //Append age
            $("#date").append($("<li />", {
                text: elem.date
            }));
        });
    });
&#13;
<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="script/myscript.js"></script>
    <script>
    $(document).ready(function(){
        $("#btn2").click(function(){
            $("ol").append("<li>Appended item</li>");
        });
    });
     $(function() {
        $("#datepicker").datepicker();
      });
    </script>
    <style>
    #name{
    display:inline-block;
    }
    #date{
    display:inline-block;
    }
    li{
    list-style:none;
    }
    </style>
    </head>
    <body>
    Action:<input type="text" name="firstname">
    Date:<input type="text" id="datepicker">
    <button id="btn2">Append list items</button>
    <br>
    <ol id="name">
    </ol>
    <ol id="date">
    </ol>
    </body>
    </html>
&#13;
&#13;
&#13;

0 个答案:

没有答案