Как сделать кнопку кликабельной только при заполнении полей?

12
NAZO
На сайте с 03.03.2016
Offline
46
799

Вроде просто, но не могу найти нужный код:idea:.

Как сделать так чтобы, человек не мог нажать кнопку до того момента, пока не заполнит все поля в форме сверху? И еще нужно сделать эту же кнопку кликабельной по нужно ссылке. Сейчас получается так что человек может нажать кнопку и перейти по нужной ссылке (без заполнения полей) и если заполняет все поля и нажимает на кнопку, то страница просто обновляется (не переодит по нужной ссылке) . Помогите разобраться вот сам код который сейчас есть:

<input type="hidden" name="csrfmiddlewaretoken" value="ErUvsvzWFJKw25y0VUesq4yCJ0eoMi3omJapAFRJrDXoa6NEXVl4eADFXvkvVtuA">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-sm-6">
<label for="surnameCustomer">Фамилия *</label>
<input type="text" class="form-control history" name="last_name" id="surnameCustomer" data-id="1" required="" placeholder="Иванов" value="">

</div>
<div class="col-md-6 col-sm-6">
<label for="forenameCustomer">Имя *</label>
<input type="text" class="form-control history" name="first_name" id="forenameCustomer" required="" placeholder="Иван" value="" data-id="2">

</div>
</div>
</div>
<div class="form-group">
<div class="row">

<div class="col-md-6 col-sm-6">
<label for="patronymicCustomer">Отчество </label>
<input type="text" class="form-control history" name="middle_name" id="patronymicCustomer" placeholder="Иванович" value="" data-id="3">

</div>
<div class="col-md-6 col-sm-6">
<label for="birthdayCustomer">Дата рождения *</label>
<input type="tel" class="form-control indent history" name="birthday" data-id="5" id="birthdayCustomer" required="" placeholder="01.01.1985" data-mask="00.00.0000" value="" autocomplete="off" maxlength="10" start="1581262599357">

</div>
</div>
</div>
<div class="form-group">
<div class="row">


</div>
</div>

<div class="form-group margin-top-25">
<label>
<input type="checkbox" id="checkbox" class="checkbox" name="agreement" value="yes" required="" checked="">
<span class="checkbox-custom"></span>
<span class="label">Я согласен с <a target="blank" href="..\..\docs\">публичной офертой</a> и на <a target="blank" href="..\..\docs\pd_agree.pdf">обработку персональных данных</a></span></label>
</div>
<input type="hidden" name="history_pasted_1" class="history-pasted-1" value="0">
<input type="hidden" name="history_pasted_2" class="history-pasted-2" value="0">
<input type="hidden" name="history_pasted_3" class="history-pasted-3" value="0">
<input type="hidden" name="history_pasted_5" class="history-pasted-5" value="0">
<input type="hidden" name="history_pasted_7" class="history-pasted-7" value="0">
<input type="hidden" name="history_pasted_8" class="history-pasted-8" value="0">

<input type="hidden" name="history_spend_1" class="history-spend-1" value="0">
<input type="hidden" name="history_spend_2" class="history-spend-2" value="0">
<input type="hidden" name="history_spend_3" class="history-spend-3" value="0">
<input type="hidden" name="history_spend_5" class="history-spend-5" value="0">
<input type="hidden" name="history_spend_7" class="history-spend-7" value="0">
<input type="hidden" name="history_spend_8" class="history-spend-8" value="0">

<input type="hidden" name="private_mode" id="pm" value="2">

<div class="col-md-12 col-sm-12 center-block margin-top-15">
<button class="btn link" type="submit" onclick="location.href='/forms/registration/oplata.html'">
Проверить
</button>
Лучший хостинг для сайта! От 10р в месяЦ (https://bill.cishost.ru/mancgi/partnerprogram?partner=8738&project=1") >>>ЭТО Лучшая партнерка ДЛЯ КиНоСаЙтОв!<<< (http://dreamcash.tl/?p=15075)
NAZO
На сайте с 03.03.2016
Offline
46
#1

Никто не сможет помочь с кнопкой?)

ArbNet
На сайте с 27.10.2019
Offline
124
#2

в inputы required поставь

Обсуждение разработки на моём фреймворке https://discord.gg/23N4s9x2kp
NAZO
На сайте с 03.03.2016
Offline
46
#3
ArbNet:
в inputы required поставь

Можно поподробнее куда именно их поставить? Надо что бы кнопка переводила на нужную ссылку при нажатии и только при заполнении всех полей формы сверху

infant
На сайте с 15.03.2008
Offline
170
#4
ArbNet:
в inputы required поставь

ему это не поможет, там код ...onclick="location.href ...

у ТС нет формы как таковой, набор импутов и кнопка редиректа на страницу, которая ничего не передаст никуда.

---------- Добавлено 11.02.2020 в 12:54 ----------

NAZO:
Никто не сможет помочь с кнопкой?)

Могу вам помочь, но не даром. 10$ будет стоить. Прием и обработка отправленных данных в стоимость не входят.

IL
На сайте с 20.04.2007
Offline
435
#5
NAZO:
Никто не сможет помочь с кнопкой?)

Тут с формулировкой неточность.. "сделайте за меня"

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
ArbNet
На сайте с 27.10.2019
Offline
124
#6


<form method=post action="/forms/registration/oplata.html">
<input type="hidden" name="csrfmiddlewaretoken" value="ErUvsvzWFJKw25y0VUesq4yCJ0eoMi3omJapAFRJrDXoa6NEXVl4eADFXvkvVtuA">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-sm-6">
<label for="surnameCustomer">Фамилия *</label>
<input type="text" class="form-control history" name="last_name" id="surnameCustomer" data-id="1" required placeholder="Иванов" value="">

</div>
<div class="col-md-6 col-sm-6">
<label for="forenameCustomer">Имя *</label>
<input type="text" class="form-control history" name="first_name" id="forenameCustomer" required placeholder="Иван" value="" data-id="2">

</div>
</div>
</div>
<div class="form-group">
<div class="row">

<div class="col-md-6 col-sm-6">
<label for="patronymicCustomer">Отчество </label>
<input type="text" class="form-control history" name="middle_name" id="patronymicCustomer" placeholder="Иванович" value="" data-id="3">

</div>
<div class="col-md-6 col-sm-6">
<label for="birthdayCustomer">Дата рождения *</label>
<input type="tel" class="form-control indent history" name="birthday" data-id="5" id="birthdayCustomer" required placeholder="01.01.1985" data-mask="00.00.0000" value="" autocomplete="off" maxlength="10" start="1581262599357">

</div>
</div>
</div>
<div class="form-group">
<div class="row">


</div>
</div>

<div class="form-group margin-top-25">
<label>
<input type="checkbox" id="checkbox" class="checkbox" name="agreement" value="yes" required>
<span class="checkbox-custom"></span>
<span class="label">Я согласен с <a target="blank" href="..\..\docs\">публичной офертой</a> и на <a target="blank" href="..\..\docs\pd_agree.pdf">обработку персональных данных</a></span></label>
</div>
<input type="hidden" name="history_pasted_1" class="history-pasted-1" value="0">
<input type="hidden" name="history_pasted_2" class="history-pasted-2" value="0">
<input type="hidden" name="history_pasted_3" class="history-pasted-3" value="0">
<input type="hidden" name="history_pasted_5" class="history-pasted-5" value="0">
<input type="hidden" name="history_pasted_7" class="history-pasted-7" value="0">
<input type="hidden" name="history_pasted_8" class="history-pasted-8" value="0">

<input type="hidden" name="history_spend_1" class="history-spend-1" value="0">
<input type="hidden" name="history_spend_2" class="history-spend-2" value="0">
<input type="hidden" name="history_spend_3" class="history-spend-3" value="0">
<input type="hidden" name="history_spend_5" class="history-spend-5" value="0">
<input type="hidden" name="history_spend_7" class="history-spend-7" value="0">
<input type="hidden" name="history_spend_8" class="history-spend-8" value="0">

<input type="hidden" name="private_mode" id="pm" value="2">

<div class="col-md-12 col-sm-12 center-block margin-top-15">
<button class="btn link" type="submit">
Проверить
</button>
</form>
S
На сайте с 13.10.2014
Offline
171
#7

Задача простая, но геморная. вернее как, если мы делаем универсальный обработчик, независящий от типа и кол-ва полей, то это придется подумать, а если мы привязываемся к конкретным полям, то всё гораздо проще.

по онсабмит

устанавливаем флаг "сабмит разрешен" в true

смотрим заполнено/не заполнено поле, если заполнено, ничего не делаем, если не заполнено, выставляем флаг в false

[...] повторяем n раз (по кол-ву полей)

возвращаем состояние флага "сабмит разрешен" (true|false)

вот и вся логика

IL
На сайте с 20.04.2007
Offline
435
#8
silicoid:
если мы делаем универсальный обработчик, независящий от типа и кол-ва полей

Можно свести к количеству разных типов как-то так:

$('form#sendsend').find('input[type=text]').each(...)
S
На сайте с 13.10.2014
Offline
171
#9

ivan-lev, Textarea, select, input.сheckbox input.radio. input.file и т.д. забыли

Если бы всё было так просто, мы бы давно их уже всех переловили (с) Жеглов...

На самом деле проще к тем полям, которые требуют валидации добавить дата-аттрибут data-validation-rules="required|matches[field_to_compare_name]"

а дальше пробежаться по всем полям с этим аттрибутом.

но это вот уже не тривиальная задачка. так как методика проверки на заполненность для select и textarea, разные. (это как пример)

S
На сайте с 30.09.2016
Offline
469
#10

Большинство задач на сайтах "без наворотов" выполняются прописыванием required и pattern.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий