элемент css / javascript, возвращающий false, когда он должен возвращать true

Question

элемент css / javascript, возвращающий false, когда он должен возвращать true

0

У меня есть одна форма поля (кнопка ввода текста и отправки). Вот код формы:

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
    </li>
    <li class="td80">
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

Используя javascript, если текст введен в текстовое поле, кнопка отправки должна быть незаметной. Если в поле нет текста, он должен быть интерактивным. Я делаю это, используя javascript для удаления и/или возврата класса с кнопкой-add-disabled. Вот javascript:

(function($){
    $(document).on('focusin', '#resume-field', function() {
        $(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
    }).on('focusout', '#resume-field', function(){
        if(this.value==' '||this.title==this.value) {
            $(this).parents().find('.button-add').addClass('button-add-disabled');
        } else {
            $(this).parents().find('.button-add').removeClass('button-add-disabled');
        }

    });     

    $('.button-add-disabled').click(function(){
        return false;
    });
}(jQuery));

И вот css:

.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block; 
   font-size: 11px; line-height: 28px ; color: #fff; text-align: center; 
   font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto; 
   border-radius: 3px; }
.button-add:hover { text-decoration: none;
   -webkit-transition:none; 
      -moz-transition:none; 
       -ms-transition:none; 
        -o-transition:none; 
           transition:none; 
}
.td80 .button-add { margin-left:35px !important;  }
.button-add-disabled { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px;  }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png) 
   repeat-x 0 0; box-shadow: 0 0 0 0;  }

Классы меняются, как ожидалось, и работает javascript. По какой-то причине, хотя даже если.button-add-disabled не применяется к элементу формы, элемент формы все равно возвращает false и поэтому не будет отправляться. Когда "button-add-disabled" удаляется javascript, форма должна быть отправлена. Я вижу журналы сервера. Если я удаляю строку из javascript "return: false", форма работает, поэтому я знаю, что сама форма работает. Я уверен, что что-то не так с javascript. Есть идеи?

Philip7899 10 янв. 2014, в 07:14

Источник

Теги:

javascript

jquery

ruby-on-rails

css3

jquery-plugins

2 ответа

1

Вы хотите установить/удалить отключенный атрибут элемента ввода, а не задавать стиль CSS, который предназначен только для отображения.

$('#resume-field').on('change', function() {
    if ($(this).val().length == 0) {
        $(this.form).find('input[type=submit]').attr('disabled', false).removeClass('button-add-disabled');
    } else {
        $(this.form).find('input[type=submit]').attr('disabled', true).addClass('button-add-disabled');
    }
})

jsFiddle Demo

Также убедитесь, что вы обрабатываете представление формы, когда пользователь нажимает кнопку ввода в поле ввода, вы можете сделать это с помощью обработчика события jQuery.submit и предотвращения поведения по умолчанию. Также важно, чтобы вы обрабатывали эту серверную часть.

EDIT: Я только что заметил, что делает CSS, обновленный ответ.

jammykam 10 янв. 2014, в 03:17

Ещё вопросы

meagar · Accepted Answer · 2014-01-10T04-29-00.000Z

Это не так, как это работает. События привязаны к элементам, которые достигаются с помощью селекторов; они не привязаны к селекторам.

Когда вы привязываете событие непосредственно к элементу, это событие теперь привязано к этому элементу, пока вы явно не отвяжете его. Исходный селектор больше не подходит.

Вам нужно это сделать или что-то в этом роде:

$('.button-add-disabled').click(function(){
  return !$(this).hasClass('button-add-disabled');
});

То есть, проверьте, отключена ли кнопка в данный момент вашим классом в момент поднятия события.

В стороне, это...

if(this.value==' '||this.title==this.value) {
  $(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
  $(this).parents().find('.button-add').removeClass('button-add-disabled');
}

должно быть следующим:

var disabled = this.value == ' ' || this.title == this.value;
$(this).parents().find('.button-add').toggleClass('button-add-disabled', disabled);

Большое спасибо @meager. Хотя я запутался, почему «сторонний» код неправильный? Кроме того, я только что опубликовал еще один вопрос переполнения стека, связанный с этим: stackoverflow.com/questions/21053537/…