Динамическое создание текстового поля

Question

Я видел эту функциональность на нескольких сайтах, но не смог реализовать. 1) У меня есть текстовое поле. 2) Я ввожу в него любой E Mail ID. 3) Если E Mail ID действителен (проверка выполняется из базы данных с использованием AJAX), новое текстовое поле должно динамически создаваться в следующей строке, и это начальное текстовое поле должно быть преобразовано в текстовое поле без редактирования с закрывающей кнопкой в ​​нем. если я нажму на эту кнопку закрытия, текстовое поле должно быть удалено.

Пожалуйста, помогите.

Answer 1

Если вы уже знаете, какие текстовые поля вы хотите после успеха ajax, почему бы просто не использовать их на скрытой странице, а затем показать их на своем успехе ajax?

HTML

<div> 
Name:<input type='text' id='name' onblur='checkValidEmail();'/> 
</div> 
<div id='emailSection'> 
Email:<input type='text' id='email'/> 
</div> 

SCRIPT

function checkValidEmail() 
{ 
    //ajax here. On success, show our textbox 
    //since you're not asking about ajax, we will assume success 
    $('#emailSection').fadeIn(); 
} 

CSS

#emailSection 
{ 
display:none; 
} 

https://jsfiddle.net/t66b6ebL/2/

Answer 2

вы можете создать любой HTML элемент динамически с помощью JavaScript. И это просто.

Пример

<div id="container"> 
    <input type="text" name="txt1" /> 
    <!-- Here you want to insert a textbox dynamically --> 
</div> 

JQuery

var elementString = "<input type="text" name="txt2" />"; 
$('#container').append(elementString);