2012-02-27 3 views
0

Как создать текстовое поле динамически, когда я нажимаю кнопку «Добавить».Проверка с помощью javascript или jquery

после ввода поля ввода в текстовое поле.

как проверить динамически созданное текстовое поле с помощью javascript или jquery.

<html> 
<head> 
<title>Adding and Removing Text Boxes Dynamically</title> 

<script type="text/javascript"> 
var intTextBox=0; 
//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){ 
    intTextBox = intTextBox + 1; 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div'); 
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>"; 
    contentID.appendChild(newTBDiv); 
} 

    </head> 
    <body> 
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
    <p><a href="javascript:addElement();" >Add</a> 
     <a href="javascript:removeElement();" >Remove</a> 
    </p> 
    <div id="content"></div> 
    <input type="button" value="submit"/> 
    </body> 
    </html> 

после того, когда я нажимаю кнопку всех проверки текстового поля должны быть сделаны представить ....

+0

что вы имеете в виду "проверить текстовое поле"? проверить, что он существует? для подтверждения ввода, добавленного пользователем в него? что вы подразумеваете под «динамическим созданием текстового поля» - динамически, когда происходит какое-то событие? – alfasin

+0

да проверять динамически созданное текстовое поле .... возможно? – specialuser

+0

уверен, что при создании текстового поля назначьте его идентификатором, а затем используйте getElementById() чтобы убедиться, что он существует – alfasin

ответ

1

Попробуйте скопировать и проверить. И давайте скажем, что это так, как вам нужно.

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Adding and Removing Text Boxes Dynamically</title> 

<script type="text/javascript"> 
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT 
function addElement(){ 
    intTextBox += 1 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div'); 
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />"; 
    contentID.appendChild(newTBDiv); 
} 

function removeElement(){ 
    var element = document.getElementById("strText"+intTextBox); 
    console.log(element); 
    while (element.firstChild) { 
     element.removeChild(element.firstChild); 
    } 
    intTextBox -=1; 
} 
</script> 
</head><body> 
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
<p><a href="javascript:addElement()" >Add</a> 
    <a href="javascript:removeElement();" >Remove</a> 
</p> 
<div id="content"></div> 
<input type="button" value="submit"/> 
</body> 
</html> 

Смотри на My jsFiddle

Примечание: работа с FireFox & Chrome

+0

его k .. но как проверить входное текстовое поле ... – specialuser

1

создать текстовое поле:

var textbox = $('<input></input>'); 
textbox.setAttr(type, 'text'); 

добавить в контейнер:

$('#button').onclick(function() { 
    $('#container').append(textbox); 
}); 

Validate:

$('#submit').onclick(function() { 
    if(!$('#textbox').val()) { 
     alert('input empty'); 
    } 
}); 
+0

, это используется только для одного текстового поля .. но я прошу динамически созданный текст окно проверки .. – specialuser

+0

функция addElement() { intTextBox = intTextBox + 1; вар ContentID = document.getElementById ('содержание'); вар newTBDiv = document.createElement ('DIV'); newTBDiv.SetAttribute ('ID', 'strText' + intTextBox); newTBDiv.innerHTML = "Текст" + intTextBox + ": "; contentID.appendChild (newTBDiv); } – specialuser

+0

Я спросил о приведенном выше коде, созданном текстовом поле проверки ... – specialuser

1

Вы можете использовать этот jQuery Validation Plugin. demo показывает, что может проверять текстовые поля.

+0

specialuser

+1

function addSense (sense) {comment.content + = sense; } – PiTheNumber

1

это много вопросов, свернутых в один. Вы можете создавать и вставлять элементы в JQuery с кодом, как следующее:

$('<input />', {type : 'text'}).appendTo($(body)); 

Что касается проверки, то она будет зависеть от того, когда вы хотите сделать это. при нажатии клавиш, на представить на размытость и т.д. Если вы хотите одеяло проверки для всех входов вы должны делегировать его в какой-то родительский элемент, так как эти текстовые поля создаются после загрузки страницы:

$('body').delegate('input','keyup', function(){ 
    /*Do stuff*/ 
}); 

Но вы также можете прикрепить проверку при создании элемента, если он должен быть специфичным для создаваемого вами поля.

$('<input />', {type : 'text'}).bind('keyup', function(){ 
    /*Do stuff*/ 
}).appendTo($(body)); 

Я надеюсь, что направит вас в правильном направлении. Удачи

+0

Спасибо ... я попробую ...... – specialuser

Смежные вопросы