Как заменить блок с помощью Ajax?

Question

[Valeri Lavrov]

Есть форма ввода логина:

<form name="login" method="post" action="">
<div class="form-group">
<input id="login" type="text" name="login2" class="form-control" placeholder="Ваш логин">
<button type="button" name="login_check" class="btn btn-success">Регистрация</button>
</div>
</form>

Надо, что бы при вводе логин проверился на сервере и если true, то заменял эту форму на:

<form name="login" method="post" action="">
<div class="form-group has-success has-feedback">
    <input id="login" type="text" name="login2" class="form-control" value="логин">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
<button type="button" name="login_check" class="btn btn-success">Регистрация</button>
</div>
</form>

Нашел как проверить, смог вывести только текст под формой о успешной/не успешной проверке, а как заменить блок понятия не имею, т.к. с JS у меня туго.

Answer 1

[Артем]

В меня, конечно, можно кидать тапками за такое решение, но я, все-таки, изложу. Создайте класс со свойством display: none;
Сделайте 2 формы. Поместите формы в div. Вторая форма будет скрыта свойством вашим классом.
Если срабатывает условие, то присваивайте первому div этот класс, а со второго этот класс убирайте.

Comments

[Valeri Lavrov]

А как сохранится введенный логин?

[OVK2015]

Valeri Lavrov: Так в чем сложность? Логин храните(зачем, правда, не понятно) в js/localstorage. Ну а блоки менять,- у jQuery полно способов: append, prepend и т.д и т.п.

[Valeri Lavrov]

OVK2015: ошибся, подумал, что все содержимое div, а не форму. Но сам то вопрос и заключается в том, как с помощью ajax и jquery скрыть/показать какой-либо элемент

[OVK2015]

Valeri Lavrov:
Как вариант:
css:
#form2
{
display: none
}
html:

<form id="form2" name="login" method="post" action="">
...
</form>

js:
.....

$.ajax({
.....
success: function(){$('#form2').css({'display': 'block'});}
.....
});
.....