Как добавить атрибут для кнопки в определенной форме, в которой идет ввод в поле?

Question

[Альберт Ушаков]

Есть форма:

<div role="form" class="wpcf7" id="wpcf7-f4722-o1" lang="ru-RU" dir="ltr">
<form action="/bo/#wpcf7-f4722-o1" method="post" class="wpcf7-form" novalidate="novalidate">
<div class="row form-flex-100">
<div class="col">
<span class="wpcf7-form-control-wrap phone">
<input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel form-control phone shadow-none border-danger" id="phone-form-sfonom-1" aria-required="true" aria-invalid="false" placeholder="[phone]" maxlength="16">
</span>
</div>
<div class="col">
<input type="submit" value="Получить бесплатную консультацию" class="wpcf7-form-control wpcf7-submit btn-form btn-primary btn text-uppercase">
</div>
</div>
</form>
</div>

Есть код условия при вводе в поле:

$('input[name="phone"]').keyup(function() {
    if($(this).val().length < 16){
		$(this).addClass("border-danger");
		$(this).removeClass("border-success");
		$('.wpcf7-submit').attr("disabled","disabled");
	}else if($(this).val().length >= 16){
		$(this).removeClass("border-danger");
		$(this).addClass("border-success");
		$('.wpcf7-submit').removeAttr("disabled","disabled");
	}
});

Как сделать так, чтобы атрибут disabled применялся только к той кнопке формы, в которой идет ввод в поле телефона?
Сейчас на станице несколько форм одинаковых, то что в коде $(this) работает для поля идеально, к конкретной форме.

Answer 1

[ThunderCat]

зис.парентс(форм).файнд(нужный буттон).removeAttr("disabled","disabled");

Comments

[TAZAQ]

Вы хотели сказать .ремувЭттр("дизейблэд", "дизейблэд") ?

[ThunderCat]

TAZAQ, да, но поленился и тупо перенес курсором из вопроса (да, я ленивая жопа)

[Альберт Ушаков]

ThunderCat, Работает, но атрбут приминяется ко всем формам. Так как у всех форм одинаковый класс. Всего много форм и к каждой отдельно писать код как то муторно, можно ли как то одной функцией написать для всех, и уникально?
Чтобы при вводе кнопка была неактивна для конкретной формы.

[ThunderCat]

Альберт Ушаков, вы издеваетесь или потормаживаете? применяться будет только к буттону текущей формы.

[Альберт Ушаков]

ThunderCat, Так я вставил ваш код, он применяет ко всем(

[ThunderCat]

Альберт Ушаков, так, я все же зря видимо понадеялся что псевдокод вы сможете преобразовать в нормальный код... Пишите сюда что вы там нарисовали в итоге.

[Альберт Ушаков]

ThunderCat, $(this).parents('form').find('.wpcf7-submit').attr("disabled","disabled");

[ThunderCat]

Альберт Ушаков, Видимо что-то у вас в разметке, проверьте как и что у вас выбирается на ваш селектор:
console.log($(this).parents('form'));

[Альберт Ушаков]

r.fn.init [form.wpcf7-form, prevObject: r.fn.init(1)]
0: form.wpcf7-form
length: 1
prevObject: r.fn.init(1)
0: input#phone-form-sfonom-1.wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7-validates-as-tel.form-control.phone.shadow-none.border-danger
value: "+7(77"
accept: ""
alt: ""
autocomplete: ""
defaultChecked: false
checked: false
dirName: ""
disabled: false
form: form.wpcf7-form
files: null
formAction: "https://www.qb2b.ru/bo/"
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
height: 0
indeterminate: false
list: null
max: ""
maxLength: 16
min: ""
minLength: -1
multiple: false
name: "phone"
pattern: ""
placeholder: "[phone]"
readOnly: false
required: false
size: 40
src: ""
step: ""
type: "tel"
defaultValue: ""
valueAsDate: null
valueAsNumber: NaN
width: 0
willValidate: true
validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
validationMessage: ""
labels: NodeList []
selectionStart: 5
selectionEnd: 5
selectionDirection: "forward"
align: ""
useMap: ""
webkitdirectory: false
incremental: false
webkitEntries: []
title: ""
lang: ""
translate: true
dir: ""
hidden: false
accessKey: ""
draggable: false
spellcheck: true
autocapitalize: ""
contentEditable: "inherit"
isContentEditable: false
inputMode: ""
offsetParent: span.wpcf7-form-control-wrap.phone
offsetTop: 0
offsetLeft: 0
offsetWidth: 670
offsetHeight: 46
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
innerText: ""
outerText: ""
oncopy: null
oncut: null
onpaste: null
onabort: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncuechange: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpause: null
onplay: null
onplaying: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwheel: null
onauxclick: null
ongotpointercapture: null
onlostpointercapture: null
onpointerdown: null
onpointermove: null
onpointerup: null
onpointercancel: null
onpointerover: null
onpointerout: null
onpointerenter: null
onpointerleave: null
onselectstart: null
onselectionchange: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
ontransitionend: null
dataset: DOMStringMap {}
nonce: ""
autofocus: false
tabIndex: 0
enterKeyHint: ""
onpointerrawupdate: null
namespaceURI: "http://www.w3.org/1999/xhtml"
prefix: null
localName: "input"
tagName: "INPUT"
id: "phone-form-sfonom-1"
className: "wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel form-control phone shadow-none border-danger"
classList: DOMTokenList(9) ["wpcf7-form-control", "wpcf7-text", "wpcf7-tel", "wpcf7-validates-as-required", "wpcf7-validates-as-tel", "form-control", "phone", "shadow-none", "border-danger", value: "wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-vali…-tel form-control phone shadow-none border-danger"]
slot: ""
attributes: NamedNodeMap {0: type, 1: name, 2: value, 3: size, 4: class, 5: id, 6: aria-required, 7: aria-invalid, 8: placeholder, 9: maxlength, type: type, name: name, value: value, size: size, class: class, …}
shadowRoot: null
part: DOMTokenList [value: ""]
assignedSlot: null
innerHTML: ""
outerHTML: "<input type="tel" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel form-control phone shadow-none border-danger" id="phone-form-sfonom-1" aria-required="true" aria-invalid="false" placeholder="[phone]" maxlength="16">"
scrollTop: 0
scrollLeft: 0
scrollWidth: 668
scrollHeight: 44
clientTop: 1
clientLeft: 1
clientWidth: 668
clientHeight: 44
attributeStyleMap: StylePropertyMap {size: 0}
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onsearch: null
elementTiming: ""
previousElementSibling: null
nextElementSibling: null
children: HTMLCollection []
firstElementChild: null
lastElementChild: null
childElementCount: 0
onfullscreenchange: null
onfullscreenerror: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
nodeType: 1
nodeName: "INPUT"
baseURI: "https://www.qb2b.ru/bo/"
isConnected: true
ownerDocument: document
parentNode: span.wpcf7-form-control-wrap.phone
parentElement: span.wpcf7-form-control-wrap.phone
childNodes: NodeList []
firstChild: null
lastChild: null
previousSibling: null
nextSibling: null
nodeValue: null
textContent: ""
jQuery32100089068556972660142: {maskMaxlength: true, mask: l, maskKeycode: 55, maskPreviusValue: "+7(7", maskPreviusCaretPos: 4, …}
jQuery32100089068556972660141: {events: {…}, handle: ƒ}
_DOMIndexerID: 569
_DOMIndexerInfo: {id: 569, name: "INPUT", parent: 568, nativeNode: input#phone-form-sfonom-1.wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7…, namespace: undefined, …}
metrikaId_0.4129581527593178: 20
__proto__: HTMLInputElement
length: 1
__proto__: Object(0)
__proto__: Object(0)
jquery: "3.2.1"
constructor: ƒ (a,b)
length: 0
toArray: ƒ ()
get: ƒ (a)
pushStack: ƒ (a)
each: ƒ (a)
map: ƒ (a)
slice: ƒ ()
first: ƒ ()
last: ƒ ()
eq: ƒ (a)
end: ƒ ()
push: ƒ push()
sort: ƒ sort()
splice: ƒ splice()
extend: ƒ ()
find: ƒ (a)
filter: ƒ (a)
not: ƒ (a)
is: ƒ (a)
init: ƒ (a,b,c)
has: ƒ (a)
closest: ƒ (a,b)
index: ƒ (a)
add: ƒ (a,b)
addBack: ƒ (a)
parent: ƒ (c,d)
parents: ƒ (c,d)
parentsUntil: ƒ (c,d)
next: ƒ (c,d)
prev: ƒ (c,d)
nextAll: ƒ (c,d)
prevAll: ƒ (c,d)
nextUntil: ƒ (c,d)
prevUntil: ƒ (c,d)
siblings: ƒ (c,d)
children: ƒ (c,d)
contents: ƒ (c,d)
ready: ƒ (a)
data: ƒ (a,b)
removeData: ƒ (a)
queue: ƒ (a,b)
dequeue: ƒ (a)
clearQueue: ƒ (a)
promise: ƒ (a,b)
show: ƒ (a,d,e)
hide: ƒ (a,d,e)
toggle: ƒ (a,d,e)
on: ƒ (a,b,c,d)
one: ƒ (a,b,c,d)
off: ƒ (a,b,c)
detach: ƒ (a)
remove: ƒ (a)
text: ƒ (a)
append: ƒ ()
prepend: ƒ ()
before: ƒ ()
after: ƒ ()
empty: ƒ ()
clone: ƒ (a,b)
html: ƒ (a)
replaceWith: ƒ ()
appendTo: ƒ (a)
prependTo: ƒ (a)
insertBefore: ƒ (a)
insertAfter: ƒ (a)
replaceAll: ƒ (a)
css: ƒ (a,b)
fadeTo: ƒ (a,b,c,d)
animate: ƒ (a,b,c,d)
stop: ƒ (a,b,c)
finish: ƒ (a)
slideDown: ƒ (a,c,d)
slideUp: ƒ (a,c,d)
slideToggle: ƒ (a,c,d)
fadeIn: ƒ (a,c,d)
fadeOut: ƒ (a,c,d)
fadeToggle: ƒ (a,c,d)
delay: ƒ (b,c)
attr: ƒ (a,b)
removeAttr: ƒ (a)
prop: ƒ (a,b)
removeProp: ƒ (a)
addClass: ƒ (a)
removeClass: ƒ (a)
toggleClass: ƒ (a,b)
hasClass: ƒ (a)
val: ƒ (a)
trigger: ƒ (a,b)
triggerHandler: ƒ (a,b)
blur: ƒ (a,c)
focus: ƒ (a,c)
focusin: ƒ (a,c)
focusout: ƒ (a,c)
resize: ƒ (a,c)
scroll: ƒ (a,c)
click: ƒ (a,c)
dblclick: ƒ (a,c)
mousedown: ƒ (a,c)
mouseup: ƒ (a,c)
mousemove: ƒ (a,c)
mouseover: ƒ (a,c)
mouseout: ƒ (a,c)
mouseenter: ƒ (a,c)
mouseleave: ƒ (a,c)
change: ƒ (a,c)
select: ƒ (a,c)
submit: ƒ (a,c)
keydown: ƒ (a,c)
keypress: ƒ (a,c)
keyup: ƒ (a,c)
contextmenu: ƒ (a,c)
hover: ƒ (a,b)
serialize: ƒ ()
serializeArray: ƒ ()
wrapAll: ƒ (a)
wrapInner: ƒ (a)
wrap: ƒ (a)
unwrap: ƒ (a)
load: ƒ (a,b,c)
ajaxStart: ƒ (a)
ajaxStop: ƒ (a)
ajaxComplete: ƒ (a)
ajaxError: ƒ (a)
ajaxSuccess: ƒ (a)
ajaxSend: ƒ (a)
offset: ƒ (a)
position: ƒ ()
offsetParent: ƒ ()
scrollLeft: ƒ (d)
scrollTop: ƒ (d)
innerHeight: ƒ (e,f)
height: ƒ (e,f)
outerHeight: ƒ (e,f)
innerWidth: ƒ (e,f)
width: ƒ (e,f)
outerWidth: ƒ (e,f)
bind: ƒ (a,b,c)
unbind: ƒ (a,b)
delegate: ƒ (a,b,c,d)
undelegate: ƒ (a,b,c)
slick: ƒ ()
swiper: ƒ (a)
transitionEnd: ƒ (e)
transform: ƒ (e)
transition: ƒ (e)
mask: ƒ (e, s)
masked: ƒ (t)
unmask: ƒ ()
cleanVal: ƒ ()
emulateTransitionEnd: ƒ t(t)
alert: ƒ (n)
button: ƒ (e)
carousel: ƒ (i)
collapse: ƒ (i)
dropdown: ƒ (e)
modal: ƒ (n,i)
tooltip: ƒ (n)
popover: ƒ (n)
scrollspy: ƒ (e)
tab: ƒ (n)
toast: ƒ (n)
fancybox: ƒ (t)
smoothproducts: ƒ ()
mousewheel: ƒ (fn)
unmousewheel: ƒ (fn)
select2: ƒ (options)
_fadeIn: ƒ (a,c,d)
block: ƒ (o)
unblock: ƒ (t)
WordpressUlikeNotifications: ƒ (e)
WordpressUlike: ƒ (e)
cursometer: ƒ (c)
draggableTouch: ƒ (c)
draggableMouse: ƒ (c)
Symbol(Symbol.iterator): ƒ values()
__proto__: Object

[ThunderCat]

form.wpcf7-form
length: 1
значит выбирается только одна форма, так что и дизэйблиться должна только одна кнопка. Я так понимаю остальной код у вас остался... Это нужно вставить вместо вашего $('.wpcf7-submit').removeAttr("disabled","disabled"); а не вместе.

[Альберт Ушаков]

ThunderCat, Все так как вы сказали. Но на странице есть несколько форм, в этом и проблема form.wpcf7-form, при вводе добавляется disabled ко всем кнопкам в формах на странице, по классу form.wpcf7-form .wpcf7-submit

[ThunderCat]

Альберт Ушаков, $('.wpcf7-submit').removeAttr("disabled","disabled"); НУЖНО УБРАТЬ
$('.wpcf7-submit').attr("disabled","disabled"); соответственно тоже, селектор заменить на тот что я дал, только действие сменить естественно.

[Альберт Ушаков]

ThunderCat, Я его и поставил вместо, повторюсь. $(this).parents('form').find('.wpcf7-submit').attr("disabled","disabled");

[ThunderCat]

Альберт Ушаков, так, давай весь код, а то что-то ты не догоняешь явно...

[Альберт Ушаков]

ThunderCat,

$('input[name="phone"]').on('keyup focus blur', function() {
    if($(this).val().length < 16){
		$(this).addClass("border-danger");
		$(this).removeClass("border-success");
		$('.wpcf7-submit').attr("disabled","disabled");
		$(this).parents('form').find('.wpcf7-submit').attr("disabled","disabled");
	}else if($(this).val().length >= 16){
		$(this).removeClass("border-danger");
		$(this).addClass("border-success");
		$(this).parents('form').find('.wpcf7-submit').removeAttr("disabled","disabled");
	}
});

[Альберт Ушаков]

ThunderCat, html в шапке вопроса есть.

[ThunderCat]

Альберт Ушаков, ну чувак, ты вообще не читаешь что пишут?
$('.wpcf7-submit').attr("disabled","disabled");убери, и будет тебе щасте

[Альберт Ушаков]

ThunderCat, Вот блин, смотрю и в упор не вижу!)) Спасибо за помощь)