Форум

dpts · #1 (**permalink**) 01.12.2015, 07:19

Есть форма:

<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.

Как сделать так, чтобы он показывался только когда все остальные поля формы не пустые

Decode · #2 (**permalink**) 01.12.2015, 17:51

<!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>

dpts · #3 (**permalink**) 04.12.2015, 07:13

благодарю.

Форум

Справочник

Discord чат

Курсы javascript