【问题标题】：Assign variable to form input value and print using jquery分配变量以形成输入值并使用 jquery 打印
【发布时间】：2013-08-06 13:41:45
【问题描述】：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href = "Jquery.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

        var amount = new Array();
        var x;
        amount[0] = 1;

        function jobID(form){

            x = document.forms["JobIdForm"]["jobid"].value;
            return false;


        }

        $(document).ready(function(){
            jQuery('<div/>', {
                id: 'box',


                click: function(){
                    jQuery('<div/>', {
                        id: 'bob'+amount.length
                    }).appendTo('#scroller');
                    jQuery('<div/>', {
                        id: 'bobb'+amount.length
                    }).appendTo('#scroller');
                    jQuery('<div/>', {
                        id: 'bobbb'+amount.length
                    }).appendTo('#scroller');
                    $('#bob'+amount.length).css('width', '200px');
                    $('#bob'+amount.length).css('height', '80px');
                    $('#bob'+amount.length).css('background-color', '#F2F2F2');
                    $('#bob'+amount.length).css('border', '3px solid black');
                    $('#bob'+amount.length).css('margin-top', '10px');
                    $('#bobb'+amount.length).append(x);


                    $('#bobb'+amount.length).css('width', '130px');
                    $('#bobb'+amount.length).css('height', '80px');
                    $('#bobb'+amount.length).css('background-color', '#F2F2F2');
                    $('#bobb'+amount.length).css('border', '3px solid black');
                    $('#bobb'+amount.length).css('margin-top', '-86px');
                    $('#bobb'+amount.length).css('margin-left', '220px');
                    $('#bobb'+amount.length).append('hello');

                    $('#bobbb'+amount.length).css('width', '300px');
                    $('#bobbb'+amount.length).css('height', '80px');
                    $('#bobbb'+amount.length).css('background-color', '#F2F2F2');
                    $('#bobbb'+amount.length).css('border', '3px solid black');
                    $('#bobbb'+amount.length).css('margin-top', '-86px');
                    $('#bobbb'+amount.length).css('margin-left', '370px');
                    $('#bobbb'+amount.length).append('hello');

                    amount[amount.length] = 1;

                }


            }).appendTo('body');
            $('#box').append("Submit All");
        });
    </script>
</head>

<body>

    <header>
        <h1>Fill out Forms</h1>
    </header>
    <section>
        <div id="keys">
            <div id ="job">
                <p>Job ID</p>
            </div>
            <div id="date">
                <p>Date</p>
            </div>
            <div id="desc">
                <p>Description</p>
            </div>
        </div>
        <div id = "scroller" style="width: 700px; height: 400px; overflow-y: scroll;">

        </div>

        <form name="JobIdForm" action="" onsubmit="return jobID(this)" method="post">


            Job ID <input type="text" name="jobid">
            <input type="submit" value="Submit">    




        </form>
    </section>


</body>
</html>

【问题讨论】：

标签： javascript jquery html forms input

【解决方案1】：

您的x 范围是问题所在。 x 是 jobID 的本地。在函数外声明x。

var x;
function jobID(form){
    x = document.forms["JobIdForm"]["jobid"].value;
    return false;
}

【讨论】：

这也不起作用。我的代码一定有更多问题。但无论如何感谢您的修复。
感谢您的回答！

【解决方案2】：

试试这样的：

js

 $(function(){  //equivalent to $(document).read(function(){});
    //you are running "joID(form)" on submit now, but have it written/called right in the html.  i try to avoid that.
      $("form[name='JobIdForm']").submit(function(event){
//i did not see an actual form[action] value, so I preventDefault() to call that out
        event.preventDefault();
//we want the value in bob, so I have jQuery create a <div> and throw the input value between the element tags
        $("#bob").append($("<div>"+$(this).find("input[name='jobid']").val()+"</div>");
      });

    });

实现上述工作所需的html：

<form name="JobIdForm" action="" method="post">       
    <label>Job ID <input type="text" name="jobid"></label>
    <input type="submit" value="Submit">    

</form>

【讨论】：

是的，j08691 关于 x var 范围的帖子是它无法在 atm 工作的原因
我将发布我的所有代码，我的代码中可能还有其他问题。
我想避免这种情况，因为我认为我的代码在您阅读时有点混乱
别管范围问题解决了这个问题，我从来没有注意到，因为我在运行之前没有保存我的工作。菜鸟失误。