Laravel - Compilar un archivo .js con un formulario .blade.php

 
Vista:
sin imagen de perfil

Compilar un archivo .js con un formulario .blade.php

Publicado por Manuel (1 intervención) el 11/05/2022 10:45:05
Holaa! Tengo una función en JavaScript que me calcula la edad a partir de una fecha insertada en un formulario y la fecha actual, pues bien, lo que debo de hacer es que si este usuario es menor de edad aparezcan varios campos del formulario. Para ello he encerrado estos campos en un div con el id=formulariomayores, adjunto formulario:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
@csrf
 
<div class="form-group">
	<br>
	<label for="dni">DNI<br></label>
		<input class="form-control bg-light shadow-sm" type="text" name="dni" value="{{ old('dni', $cliente->dni)}}">
 
</div>
 
<div class="form-group">
	<br>
	<label for="nombre"></label>
		<br>Nombre del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="nombre" value="{{ old('nombre', $cliente->nombre)}}">
 
</div>
 
<div class="form-group">
	<br>
	<label for="apellidos"></label>
		<br>Apellidos del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="apellidos" value="{{ old('apellidos', $cliente->apellidos) }}">
 
</div>
 
 
 
<div class="form-group">
	<br>
	<label></label>
		<br>Url para el cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="url" value="{{ old('url', $cliente->url) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Codigo Postal del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="codigopostal" value="{{ old('codigopostal', $cliente->codigopostal) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Dirreción del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="direccion" value="{{ old('direccion', $cliente->direccion) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Localidad del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="localidad" value="{{ old('localidad', $cliente->localidad) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Provincia del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="provincia" value="{{ old('provincia', $cliente->provincia) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Pais del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="pais" value="{{ old('pais', $cliente->pais) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Email<br>
		<input class="form-control bg-light shadow-sm" type="email" name="email" value="{{ old('email', $cliente->email) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Telefono del cliente<br>
		<input class="form-control bg-light shadow-sm" type="text" name="telefono" value="{{ old('telefono', $cliente->telefono) }}">
 
</div>
<div class="form-group">
	<br>
	<label for="fechana"></label>
		<br>Fecha de Nacimiento<br>
		<input class="form-control bg-light shadow-sm" type="date" id="fechana" name="fechana" value="{{ old('fechana', $cliente->fechana)}}">
 
</div>
 
<br>
<br>
 
<br>
<div id="formulariomayores" style="display: none;" class="form-group">
 
	<br>
	<br>
	<br>
	<br>
<div class="form-group">
 
	<br>
	<label></label>
		<br>Nombre completo del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="nombrecompletome" value="{{ old('nombrecompletome', $cliente->nombrecompletome) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Direccion del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="direccionme" value="{{ old('direccionme', $cliente->direccionme) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Localidad del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="localidadme" value="{{ old('localidadme', $cliente->localidadme) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Provincia del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="provinciame" value="{{ old('provinciame', $cliente->provinciame) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>País del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="paisme" value="{{ old('paisme', $cliente->paisme) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Email del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="emailme" value="{{ old('emailme', $cliente->emailme) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Telefono del tutol del menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="telefonome" value="{{ old('telefonome', $cliente->telefonome) }}">
 
</div>
 
<div class="form-group">
	<br>
	<label></label>
		<br>Vinculación del tutol con el menor<br>
		<input class="form-control bg-light shadow-sm" type="text" name="vinculacionconmenor" value="{{ old('vinculacionconmenor', $cliente->vinculacionconmenor) }}">
 
</div>
</div>
</div>
	<br>
	<br>
	<button class="btn btn-primary btn-lg btn-block">{{$btnText}}</button>
	<a class="btn btn-link btn-block btn-danger btn-lg" href="{{ route('cliente.index')}}">Cancelar</a>
Ahora adjunto la función .js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fecha = document.getElementById("fechana");
 
fecha.addEventListener("change", calculateAge);
 
function calculateAge(birthday) {
    var birthday_arr = birthday.split("/");
    var birthday_date = new Date(birthday_arr[2], birthday_arr[1] - 1, birthday_arr[0]);
    var ageDifMs = Date.now() - birthday_date.getTime();
    var ageDate = new Date(ageDifMs);
    return Math.abs(ageDate.getUTCFullYear() - 2022);
}
 
var age = calculateAge("$cliente->fechana");
alert( age );
let fechana= $("#fechana").val();
El formulario es una plantilla ya que debo utilizarlo en varias ocasiones, el resto quedaría en otro fichero .blade.php tal que así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@extends('plantilla')
@section('titulo', 'Creación de Clientes')
<script src="node_modules/jquery/dist/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>$(document).ready(function(){
   $("#mayoria_edad").click(function(){
      alert("Rellene los datos del tutor por favor");
   });
});</script>
<script>
  $(document).ready(function(){
   $("#mayoria_edad").click(function(evento){
      if ($("#mayoria_edad").attr("checked")){
         $("#formulariomayores").css("display", "block");
      }else{
         $("#formulariomayores").css("display", "none");
      }
   });
});
</script>
@section('contenedor')
 
<div class="container">
	<div class="row">
		<div class="col-12 col-sm-10 col-lg-6 mx-auto"></div>
 
		<br>
 
 
@include('partials/validation-errors')
 
<form class="bg-white shadow rounded py-3 px-4" method="POST" action="{{route('cliente.store')}}">
<h1 class="display-4">Creación de Clientes</h1>
<hr>
	@include('carclientes/_form', ['btnText'=>'Guardar'])
 
</form>
</div>
</div>
 
@endsection
Mi duda es la siguiente, como hago yo para compilar dichos archivos (archivo.js y el formulario.blade.php) para que funcione correctamente. Muchísimas gracias y perdonen las molestias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder