My form contains multiple fields. One of the fields is a selection. If in the select box yes is selected, two extra fields should appear. But for some reason, it isn't working. I am using jquery to let the fields appear. Bellow, you can find my code. Thanks for the help.
@extends('layout')
@section('content')
<div class="container col-sm-12">
<script type="text/javascript">
function displayFields() {
if (document.getElementById("isYes").selected) {
document.getElementById("ifyes").style.display = "block";
document.getElementById("ifno").style.display = "none";
} else {
document.getElementById("ifno").style.display = "none";
document.getElementById("ifyes").style.display = "none";
}
}
</script>
<style>
.hide{
display:none;
}
.show {
display: block;
}
</style>
After the jquery, I added directly the form where I am trying to hide or show the fields.
<form action="/events" method="POST">
@csrf
...
<div class="d-flex">
<div class="flex-fill p-2">
<select name="condition" class="form-control" onchange="displayFields()" required>
<option>{{old('condition')}}</option>
<option id="isYes">Yes</option>
<option id="isNo">No</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="type" id="ifyes" style="display: none;">Type</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input id="ifyes" style="display: none;"
type="text"
class="form-control input-text"
placeholder="Type"
name="type"
value="{{old('type')}}"
>
</div>
</div>
</div>
<div class="col-2">
<div class="d-flex">
<div class="p-1">
<label class="p-2" for="function" id="ifyes" style="display: none;">function</label>
</div>
</div>
</div>
<div class="col-4">
<div class="d-flex">
<div class="flex-fill p-2">
<input id="ifyes" style="display: none;"
type="text"
class="form-control input-text"
placeholder="function"
name="function"
value="{{old('function')}}"
>
</div>
</div>
<head>
<title>@yield('title',"Event Planner")</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="base-url" content="{{ url('/') }}">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>
This is where I ended up with thanks to the input of @ageans and @Mohamed.
function showType(i){
var x = document.getElementById("showType"+i);
var y = document.getElementById("showTypeLabel"+i);
var z = document.getElementById("selectType"+i);
if (z.options[z.selectedIndex].value == "Yes"){
x.style.display = "block";
y.style.display = "block";
}else{
x.style.display = "none";
y.style.display = "none";
}
}
<select name="condition" class="form-control" onchange="showType(0)" required>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input id="showTypeLabel0" style="display: none;" type="text" class="form-control input-text"
placeholder="Type" name="type" value="{{old('type')}}"
>
<input id="showType0" style="display: none;"
type="text"
class="form-control input-text"
placeholder="function"
name="function"
value="{{old('function')}}"
>