2013年9月12日星期四

About JS dynamically generated input, get the value of the background issues


<script type="text/javascript">
    function Creat() {
        var textBoxId = document.createElement("input");
        textBoxId.nodeType = "text";
        textBoxId.nodeName = "textBoxId1";
        document.getElementById("GoodsBox").appendChild(textBoxId);
    }
</script>



 <div>
    <form action="Default2.aspx" method="post" id="GoodsBox">
        <input type="submit" value="提交" />
    </form>
    <input type="button" onclick="Creat()" value="创建" />
    </div>


very simple .. Click on the Create button .. call Creat method ..

Creat method is to generate an input element , type = text is the text box, and then name = textBoxId1

then added to form inside ...
Click here to create ..
question text box is out .. but after the submission .. Request.Form ["textBoxId1"] which in the end turned out to null .. Why ?

There is no other way to dynamically generate a text box, and then be able to get the value back
------ Solution ------------------- -------------------------
textBoxId.setAttribute ("type", "text");
textBoxId.setAttribute ("name", "textBoxId1");
------ Solution ----------------- ---------------------------
Well, I made ​​about the complete example . You reference.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript">
        function Creat() {
            var textBoxId = document.createElement("input");
            textBoxId.setAttribute("type", "text");
            textBoxId.setAttribute("id", "textBoxId1");
            document.getElementById("GoodsBox").appendChild(textBoxId);
        }
        function Test() {
            document.getElementById("Hidden1").value = document.getElementById("textBoxId1").value;
            document.getElementById("<%=HiddenField1.ClientID%>").value = document.getElementById("textBoxId1").value;
        }
    </script>

</head>
<body>
    <div>
        <form runat="server" id="GoodsBox">
            <input type="submit" value="提交" />
            <input type="button" onclick="Creat()" value="测试创建" />
            <input type="button" onclick="Test()" value="测试获取值" />
            <input id="Hidden1" name="Hidden1" type="hidden" value="" />
            <asp:HiddenField ID="HiddenField1" runat="server" Value="" />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </form>
    </div>
</body>
</html>

WebForm1 the Button1_Click event .
  protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("<script> alert('" + HiddenField1.Value + "') </script>");
        }

effect:
point test creation , and then point to obtain the value of the test , the last point Button. You can pop in a dynamic added textbox enter text.
------ For reference only -------------------------------------- -
put a hidden form fields to receive textbox value, then the background or the hiddenfield can.
refer: http://blog.csdn.net/wen_fj/article/details/5736678
------ For reference only -------------------------------------- -


Brother , can you say more points ? The example you gave me to read. . There are many ways no . .

such as getElementById (id). insertRow ();
------ For reference only ------------------------ ---------------



var a = document.getElementsByName("textBoxId1").item(0).nodeValue;
        alert(a);


Such are the values ​​obtained complement to textBoxId1
------ For reference only -------------------------- -------------
you confirm that you create a text box on a form inside it ?

code seems to be no problem.
------ For reference only -------------------------------------- -
textBoxId.nodeType = "text";
textBoxId.nodeName = "textBoxId1";
=>
textBoxId.Type = "text";
textBoxId.Name = "textBoxId1";

------ For reference only ---------------------------------- -----
this can all be taken into value .
 <script type="text/javascript">
        function Creat() {
            var textBoxId = document.createElement("input");
            textBoxId.setAttribute("type", "text");
            textBoxId.setAttribute("id", "textBoxId1");
            document.getElementById("GoodsBox").appendChild(textBoxId);
        }
        function Test() {
            document.getElementById("Hidden1").value = document.getElementById("textBoxId1").value;
            document.getElementById("#<%=HiddenField1.ClientID%>").value = document.getElementById("textBoxId1").value;
            alert(document.getElementById("Hidden1").value);
        }
    </script>

<div>
        <form runat="server" action="WebForm2.aspx" method="post" id="GoodsBox">
            <input type="submit" value="提交" />
            <input type="button" onclick="Creat()" value="测试创建" />
            <input type="button" onclick="Test()" value="测试获取值" />
            <input id="Hidden1" name="Hidden1" type="hidden" value="" />
            <asp:HiddenField ID="HiddenField1" runat="server" />
        </form>

    </div>

------ For reference only ----------------------------------- ----


I'm sure in the form li ..

document.getElementById ("GoodsBox"). appendChild (textBoxId)

GoodsBox is a form of id ..

I am surprised textBoxId. no Type only NodeName ... but no problem as I changed Name
------ For reference only -------------- -------------------------
some browsers have developer mode, which can be seen in detail all the HTML, including dynamic generated content .
HTML represented true to say there
------ For reference only --------------------------- ------------


my FireBug installed , press F12. . Interface out. . But there is no content. . All sites are

flew next Chrome. . . Tell me installation failed. . . I also went down over Shangguan net

IE jumped directly . . .
------ For reference only -------------------------------------- -


I changed in this way will be able to obtain it. . Very grateful . .

cry up really fast . . Not any home environment . . FIREBUG can not see what sites are not Chrome also installed . . IE8 and jumping
------ For reference only ----------------------------------- ----


ah . . I also get out, I have carefully read your . . Thank you very much ! !

没有评论:

发表评论