Не удаляется полностью input в Firefox
Привет всем. Помогите разобраться с проблемой. Если создают новое поле в форме, и потом удаляю, то это поле удаляется с экрана, но при обращении к нему в Firefox и GCrome оно существует, в др. браузерах нормально работает. Чтоб было понятнее приведу код:
<html>
<head>
<style type="text/css">
.t_link { text-decoration: underline; color: #777; cursor: pointer; }
</style>
</head>
<body>
<form name="forma1">
тут форма.
<div id="box_input"></div>
</form>
<div>
<span onclick="create_input();" class="t_link">создать поле</span>
<span class="t_link" onclick="delete_input();">удалить поле</span>
<span class="t_link" onclick="check_input()">проверить поле</span>
</div>
<script type="text/javascript">
function create_input()
{
var t = "";
t += " поле 1 <input name='pf_1' type='text' value=''> ";
t += " поле 2 <input name='pf_2' type='text' value=''> ";
document.getElementById("box_input").innerHTML = t;
}
function delete_input()
{
var t = "";
//t += " поле 1 <input name='pf_1' type='text' value=''> ";
//t += " поле 2 <input name='pf_2' type='text' value=''> ";
document.getElementById("box_input").innerHTML = t;
}
function check_input()
{
var t = "";
obj_pf_1 = document.forms.forma1.pf_1;
obj_pf_2 = document.forms.forma1.pf_2;
if ( obj_pf_1 )
{
alert("v1 = "+obj_pf_1.value);
}
else
{
alert("v1 нет");
}
if ( obj_pf_2 )
{
alert("v2 = "+obj_pf_2.value);
}
else
{
alert("v2 нет");
}
}
</script>
</body>
</html>
если запустить этот код в браузере, нажать на создать поле, появятся два текстовых поля. заполнить их. потом нажать проверить поле, будет отображено содержимое полей. Если нажать удалить поле, то поля удаляться с экрана, но если нажать на проверить поле, то в Firefox и GChrome будет отображено значение этих полей, как будто они и не удалялись. В опере и Ie нормально работает. Может кто знает как можно удалить полностью эти поля. Так же удалял эти поля с помощью методов DOM, тоже самое. Не знаю что и делать. |
Цитата:
http://www.fpublisher.ru/documentati...s#hremovechild |
Если бы так просто.Я удалял с помощью метода removeChild , результат то же самый - с экрана убирается поле, а вот при обращении obj_pf_2 = document.forms.forma1.pf_2; - объект существует и есть значение поля. Такая фишка у Mozilla и Гугл Хром. Похоже на баг, но может как-то это решается.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Add() {
if (document.getElementById('i1')) {
return false;
};
document.getElementById('test').innerHTML="<input id='i1' type='text' value='' />";
};
function Delete() {
var o=document.getElementById('i1');
if (o) {
document.getElementById('test').removeChild(o);
};
};
</script>
</head>
<body>
<div id='test'></div>
<input type='button' value='Add' onclick='Add()' />
<input type='button' value='Delete' onclick='Delete()' />
<input type='button' value='Test' onclick='alert(document.getElementById("i1"))' />
</body>
</html>
Элемента после удаления нет... :no: |
Все правильно :) если находить поле по id то работает. А вот если находить поле через коллекцию document.forms.имя_формы.имя_поля то не работает.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function Add() {
if (document.forms.forma1.i1) {
return false;
};
document.getElementById('test').innerHTML="<input name='i1' type='text' value='' />";
};
function Delete() {
var o=document.forms.forma1.i1;
if (o) {
o.parentNode.removeChild(o);
//document.getElementById('test').removeChild(o);
};
};
</script>
</head>
<body>
<form name='forma1'>
<div id='test'></div>
<input type='button' value='Add' onclick='Add()' />
<input type='button' value='Delete' onclick='Delete()' />
<input type='button' value='Test' onclick='alert(document.forms.forma1.i1)' />
</form>
</body>
</html>
А мне нужно именно через коллекцию находить поле формы. ЗЫ. проблему эту я уже обошел, но коряво это все получилось. Хочется все-таки по нормальному сделать :) |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function Add() {
if (document.getElementsByName('i1').length>0) {
return false;
};
document.getElementById('test').innerHTML="<input name='i1' type='text' value='' />";
};
function Delete() {
var o=document.getElementsByName('i1')[0];
if (o) {
document.getElementById('test').removeChild(o);
};
};
</script>
</head>
<body>
<div id='test'></div>
<input type='button' value='Add' onclick='Add()' />
<input type='button' value='Delete' onclick='Delete()' />
<input type='button' value='Test' onclick='alert(document.getElementsByName("i1")[0])' />
</body>
</html>
|
Так работает! Спасибо :)
А через коллекцию, как я писал выше, только у меня не работает или у вас тоже не работает? Хочется уже знать точно. |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
- id - name - class И будет тебе счастие... ;) |
ну так я и использую атрибут name :) только он не корректно обрабатывается браузерами
|
Цитата:
|
елки палки, все довольно просто :)
нужно писать: pf = document.forms["имя_формы"].elements["имя_поля"]; так все работает нормально. Всем спасибо за помощь :) |
Цитата:
P.S. Вот ведь живучий оказался... |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 20:03. |