Как создать текстовое поле динамически без загрузки страницы по клику - PullRequest
Новая
       24

Как создать текстовое поле динамически без загрузки страницы по клику

2 голосов
/ 31 марта 2012

У меня есть эта форма: - 

    <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> я хочу создать текстовое поле на выбор любого из кнопки выбора. Значит, динамически без загрузки страницы.

Ответы [ 4 ]

3 голосов
/ 31 марта 2012

Только 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 здесь

Вот jsfiddle для щелчка по радио, с проверкой, чтобы генерировать только один раз.

0 голосов
/ 06 мая 2014 
            <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>
0 голосов
/ 31 марта 2012

Я бы также порекомендовал вам jQuery (http://jquery.com/), но вы также можете просмотреть эту статью, это может помочь вам разобраться в проблеме .. http://www.javascriptkit.com/javatutors/dom2.shtml

0 голосов
/ 31 марта 2012

со стандартным javascript вы должны будете создать еще один блок div после и затем установить его innerHtml с желаемым входным элементом html.

с jQuery у вас есть специальные функции, такие как .after или .append, которые переносятпохожие задачи.

...