如何在没有页面加载onclick的情况下动态创建文本框答案

【问题标题】：How to create a textbox dynamically without page load onclick如何在没有页面加载onclick的情况下动态创建文本框
【发布时间】：2012-04-14 22:39:35
【问题描述】：

我有这个表格：-

    <form action="">
    <table border="0">
        <td colspan="2" class="instruction">Select your desired option to search.</td>
    </table>
      <table>
        <tr>
          <td><label>
            <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
            Customer Code</label></td>
          <td><label>
            <input type="radio" name="search_option" value="company" id="search_option_1">
            Customer Company</label></td>
          <td><label>
            <input type="radio" name="search_option" value="name" id="search_option_2">
            Customer Name</label></td>
          <td><label>
            <input type="radio" name="search_option" value="email" id="search_option_3">
            Customer Email</label></td>
        </tr>
      </table>
      <input class="Button" name="search_submit" type="submit" value="Search">
    </form>

现在在最后一个</table> 之后，我想在选择任何选项按钮时创建一个文本框。意味着，动态地不加载页面。

【问题讨论】：

有效的HTML不允许你把输入元素放在之后，你需要把它放在之后
k 那么我如何在</table>之后创建一个文本框@

标签： javascript ajax forms dynamic onclick

【解决方案1】：

仅 JavaScript：

// Create the element
var input = document.createElement("input");
input.type = 'text';
input.name = 'inputName';
input.value = 'some value';
input.size = 10;
input.maxLength = 10;
input.className = 'someClass';

// append the element
var btn = document.getElementsByName('search_submit')[0]; // get the button to insert the element before it;
btn.parentElement.insertBefore(input, btn);

与 jQuery 相同的过程：

$('input[name="search_submit"]').before('<input type="text" name="inputName" size="10" maxlength="10" class="someClass" />');

jsfiddle here

这里是jsfiddle，用于点击收音机，检查只生成一次。

【讨论】：

@KooiInc 关注我的代码伙伴。我在</table> 之后，在提交按钮之前插入元素。
非常感谢，我需要更多帮助，文本框应该出现在选项按钮本身的单击事件上。如果一个人选择不同的选项，那么仍然应该只有一个文本框。我的意思是说，当其中任何一个被选中时，必须只显示一个文本框，如果再次选中另一个文本框，则只应出现一个文本框。你可以做一件事，只有在选择其中任何一个时才会出现一个文本框......像onclick="showInputBox() 这样的东西如果你能提供支持，那对我来说将是一个很大的支持。谢谢
您可以将其附加到收音机的点击中，并在函数的开头检查该元素是否已存在。我会再做一个小提琴来演示一下。
@KooiInc 没有问题。我在答案中添加了第二个 jsfiddle。
@rcdmk 感谢您宝贵的时间和考虑。你真的帮了我很多。为你欢呼三声:)

【解决方案2】：

使用标准 javascript，您必须在之后创建另一个 div 框，然后使用您想要的输入元素 html 将其设置为 innerHtml。

使用 jQuery，您可以使用 .after 或 .append 等执行类似任务的特殊函数。

【讨论】：

【解决方案3】：

我也推荐你 jQuery (http://jquery.com/)，但你也可以浏览这篇文章，它可能会帮助你理解问题..http://www.javascriptkit.com/javatutors/dom2.shtml

【讨论】：

嗯，你说你想要它没有页面加载。这就是javascript（和jQuery）所做的。 Ajax 用于 javascript 和服务器的通信。您询问了向 DOM 添加新元素的问题。这是客户端正在发生的事情。
@AbhilashShukla 使用 AJAX，您可以调用 URL 并将其输出加载到变量中并插入到文档中。

【解决方案4】：

            <html>
            <body>
            <table border=2>
            <tr>
            <td>PASSWORD</td>
            <td><input type="radio" name="radGroup" id="rad1" onchange="showElement('1')">
            DEFAULT PASSWORD
            <input type="radio" name="radGroup" id="rad1" onchange="showElement('2')">
            NEW PWD</td></tr>
            <tr><td></td><td>
            <span id="elementNum1" style="display:none;cisibility:hidden;">
            <input type="text" id="txt1" value="jct123" /> your default 
            </span>
            <span id="elementNum2" style="display:none;cisibility:hidden;">
            <input type="text" id="txt2" value="" />conform
            </span>
            </td>
            </tr>
            <script type="text/javascript">
            function showElement(iElementToShow) 
            {       
            var oPage;
            var bContinueLooping=true;
            var iElement=1;
            while (bContinueLooping) 
            {
                try 
                {
                    oPage=document.getElementById('elementNum'+iElement);
                    oPage.style.display='none';
                    oPage.style.visibility='hidden';
                    iElement++;
                } 
                catch(oError) 
                {
                    bContinueLooping=false;
                }
            }
            oPage=document.getElementById('elementNum'+iElementToShow);
            oPage.style.visibility='visible';
            oPage.style.display='inline';
            }
            </script>
            </table>
            </body>
            </html>

【讨论】：

欢迎来到 Stack Overflow！这个答案出现在低质量审核队列中，大概是因为您没有解释某些内容。如果你确实解释了这一点（在你的回答中），你更有可能获得更多的支持——提问者实际上学到了一些东西！