I use a script to toogle some div´s with javascript. I want to make some input fields "required" in the toogle div if the checkbox is checked to show the toogle div.
Can someone figure it out ? that is work?
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
var $myCheckbox = $('#neu_ma'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="berechtigungsantrag">
<fieldset>
<legend><input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> Neuer Mitarbeiter </legend>
<div style="display: none" id="neuer_mitarbeiter">
<label for="eintritt_datum">Eintrittsdatum:</label>
<div><input type="date" name="eintritt_datum" id="eintritt_datum" class="required" /></div>
<label for="befristung_datum">Befristungsdatum:</label>
<div><input type="date" name="befristung_datum" id="befristung_datum"/></div>
</div>
</fieldset><!-- End of fieldset -->
<input class="btn" type="submit" value="Speichern" name=save />
</form>
</div>
Answer:
You're trying to listen an element id that does not exist(neu_ma) - you haven't given your checkbox an id.
<input type="checkbox" name="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
So just give it an ID:
<input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
This is just an example how you could do it:
Add some specific class to inputs that need to be affected by the state of your checkbox.
I made an example HTML:
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
As you can see, some of the inputs have a class called "required".
Next I check checkbox status(checked or not). And depending on the result make elements with "required" class required(or not) using jQuery's prop() method.
Working example:
var $myCheckbox = $('#myCheckbox'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
</div>