Показать/Скрыть DIV на форме
Есть форма:
<form id="reg_form" style="text/css" method="post" enctype="multipart/form-data"> <fieldset class="joomly ui-sortable"> <input type="hidden" name="option" value="com_joomlyform" class="ui-sortable-handle"> <input type="hidden" name="page" value="<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>" class="ui-sortable-handle"> <input type="hidden" name="ip" value="<?php echo $_SERVER["REMOTE_ADDR"];?>" class="ui-sortable-handle"> <input type="hidden" name="form_id" value="form" class="ui-sortable-handle"> <input type="hidden" name="task" value="add.save" class="ui-sortable-handle"> <div class="h" data-element="h" data-id="h1"><h3 id="h1" class="header">Запрос предлежения</h3></div> <div class="input" data-element="input" data-id="input1"><label for="input1" style="width: 0px;"></label><input type="text" name="input1" id="input1" class="ff_elem" placeholder="ФИО*" required="" style="width: 100%;"></div> <div class="input" data-element="input" data-id="input2"><label for="input2" style="width: 0px;"></label><input type="text" name="input2" id="input2" class="ff_elem" placeholder="Предприятие*" required="" style="width: 100%;"></div> <div class="input" data-element="input" data-id="input3"><label for="input3" style="width: 0px;"></label><input type="email" id="input3" name="input3" placeholder="e-mail*" class="ff_elem" required="" style="width: 100%;"></div> <div class="input" data-element="input" data-id="input4"><label for="input4" style="width: 0px;"></label><input type="tel" id="input4" name="input4" placeholder="Телефон*" class="ff_elem" style="width: 100%;"></div> <div class="textarea" data-element="textarea" data-id="textarea3"><label for="textarea3" style="width: 0px;"></label><textarea name="textarea3" id="textarea3" class="ff_elem" placeholder="Содержание запроса*" rows="5" cols="30" required=""></textarea></div> <center><div class="g-recaptcha" data-sitekey="6LfErxETAAAAAEzkuFEAQplPIdCAgljazjVizsqu"></div></center> <div class="active" data-element="button" data-id="button1"><button type="submit" class="bfSubmitButton" id="button1" style="border-radius: 0px; width: 100%; margin-left: auto; margin-right: auto; background-color: rgb(87, 87, 86);">Запросить</button></div></fieldset> </form> На ней есть див с классом g-recaptcha. Как сделать так, чтобы он показывался только когда все остальные поля формы не пустые |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.g-recaptcha {
display: none;
}
</style>
</head>
<body>
<form id="reg_form" style="text/css" method="post" enctype="multipart/form-data">
<fieldset class="joomly ui-sortable">
<!--<input type="hidden" name="option" value="com_joomlyform" class="ui-sortable-handle">
<input type="hidden" name="page" value="<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>" class="ui-sortable-handle">
<input type="hidden" name="ip" value="<?php echo $_SERVER["REMOTE_ADDR"];?>" class="ui-sortable-handle">
<input type="hidden" name="form_id" value="form" class="ui-sortable-handle">
<input type="hidden" name="task" value="add.save" class="ui-sortable-handle">-->
<div class="h" data-element="h" data-id="h1">
<h3 id="h1" class="header">Запрос предлежения</h3>
</div>
<div class="input" data-element="input" data-id="input1">
<label for="input1"></label>
<input type="text" name="input1" id="input1" class="ff_elem" placeholder="ФИО*" required="" style="width: 100%;" data-filled="false" />
</div>
<div class="input" data-element="input" data-id="input2">
<label for="input2"></label>
<input type="text" name="input2" id="input2" class="ff_elem" placeholder="Предприятие" required="" style="width: 100%;" data-filled="false" />
</div>
<div class="input" data-element="input" data-id="input3">
<label for="input3"></label>
<input type="email" id="input3" name="input3" placeholder="e-mail" class="ff_elem" required="" style="width: 100%;" data-filled="false" />
</div>
<div class="input" data-element="input" data-id="input4">
<label for="input4"></label>
<input type="tel" id="input4" name="input4" placeholder="Телефон*" class="ff_elem" style="width: 100%;" data-filled="false" />
</div>
<div class="textarea" data-element="textarea" data-id="textarea3">
<label for="textarea3"></label>
<textarea name="textarea3" id="textarea3" class="ff_elem" placeholder="Содержание запроса*" rows="5" cols="30" required="" data-filled="false"></textarea>
</div>
<center><div class="g-recaptcha" data-sitekey="6LfErxETAAAAAEzkuFEAQplPIdCAgljazjVizsqu">Capcha</div></center>
<div class="active" data-element="button" data-id="button1">
<button type="submit" class="bfSubmitButton" id="button1" style="border-radius: 0px; width: 100%; margin-left: auto; margin-right: auto; background-color: rgb(87, 87, 86);">Запросить</button>
</div>
</fieldset>
</form>
<script>
var form = document.getElementById('reg_form'),
inpElems = document.querySelectorAll('.ff_elem'),
capcha = document.querySelector('.g-recaptcha');
form.oninput = function(e) { // или onchange
var target = e.target;
if ( !target.dataset.filled ) return;
target.dataset.filled = target.value.match(/^\S+/) ? true : false;
capcha.style.display = checkInpElems() ? 'block' : '';
};
function checkInpElems() {
for (var i = 0; i < inpElems.length; i++) {
if (inpElems[i].dataset.filled == 'false') {
return false;
}
}
return true;
}
</script>
</body>
</html>
|
благодарю.
|
| Часовой пояс GMT +3, время: 12:04. |