We Keep Coding

Bootstrap modal won't focus no matter what I try

I have a button which pops up a modal, it does pop up & is functional. The form is in there how it should be, etc. Just one thing doesn't work which is that the modal just isn't focusing. I also tried doing it with JS which I found on another stackoverflow post but that didn't help me either.
The code
<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>
Shows up an unfocussed modal when it's called.
The button that triggers the modal
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```

I guess you are looking for the shown.bs.modal event. More about this in the documentation.
So when that event fires for your modal, just target the first input and focus it.
There is no use in focussing a div. A focussed input generally is what a user wants.
$("#joinModal").on("shown.bs.modal", function(){
$(this).find("input").first().focus()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>
<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="../action/handler.php" method="post">
<div class="form-group">
<label for="fullName">Je volledige naam</label>
<input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
autofocus>
</div>
<div class="form-group">
<label for="email">Je email adres</label>
<input type="email" class="form-control" id="email" name="email" placeholder="naam#email.com">
</div>
<div class="form-group">
<label for="age">Wat is je leeftijd?</label>
<input type="number" class="form-control" id="age" name="age" placeholder="0"
</div>
<div class="form-group">
<label for="degree">Van welk niveau kom je?</label>
<select class="form-control" id="degree" name="degree">
<option>Mavo</option>
<option>Havo</option>
<option>VWO</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-primary">Inschrijven</button>
</div>
</form>
</div>
</div>
</div>

How can I get my update modal to store the updated values in the database?

I got this modal where I create events, currently, it works perfectly fine and it saves the data on the database.
<div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true"> <!-- el ID -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title " id="createModalLabel">Add Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{action('CalendarController#store')}}" method="POST">
{{csrf_field()}}
<div class="modal-body">
<div class="form-group">
<div class="text-center">
<img src='http://ssl.gstatic.com/accounts/ui/avatar_2x.png' width="150px" height="150px" class="avatar img-circle img-thumbnail" alt="avatar" name="image" >
</div><hr>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="image">
<label class="custom-file-label">Upload picture</label>
</div>
</div>
<label>Event Title:</label>
<input type="text" class="form-control" name="title">
<label>Start Date:</label>
<input type="datetime-local" class="form-control" name="start" id="start2">
<label>End Date:</label>
<input type="datetime-local" class="form-control" name="end" id="end2">
<br>
<div class="form-group text-center">
<div class="w3-row">
<label for="event_category">Event Clasification:</label>
<input class="w3-radio" type="radio" name="event_category" value="C">
<label>Competition</label>    
<input class="w3-radio" type="radio" name="event_category" value="F">
<label>Fundraiser</label>    
<br>
<input class="w3-radio" type="radio" name="event_category" value="P">
<label>Practice</label>
<input class="w3-radio" type="radio" name="event_category" value="O">
<label>Other</label>
</div>
</div>
<label>Description:</label>
<input type="text" class="form-control" name="description">
<label>Place:</label>
<input type="text" class="form-control" name="address">
<label>Organizer Email:</label>
<input type="text" class="form-control" name="email">
<label>Phone:</label>
<input type="text" class="form-control" name="phone">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn btn-primary" type="submit" > Create</button>
</div>
</form>
</div>
</div>
</div>
I call this modal with the modal show and enter the values, that are sent to the controller and then saved.
$('#createModal').modal('show')
My problem starts with the edit modal,
I can load the values on this modal, but when I try to save them to the DataBase it just doesn't do anything. The page refreshes but the values don't change.
This is my edit modal:
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"> <!-- el ID -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title " >Edit Event</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="{{action('CalendarController#update')}}" method="POST" id="editForm">
{{ method_field('PUT') }}
{{ csrf_field() }}
<div class="modal-body" id="modalBody">
<div class="form-group">
<div class="text-center">
<img width="150px" height="150px" class="avatar img-circle img-thumbnail" alt="avatar" name="image" id="image">
</div><hr>
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="image">
<label class="custom-file-label">Upload picture</label>
</div>
</div>
<label>Event Title:</label>
<input type="text" class="form-control" name="title1" id="title" >
<label>Start Date:</label>
<input type="datetime-local" class="form-control" name="start1" id="start" >
<label>End Date:</label>
<input type="datetime-local" class="form-control" name="end1" id="end" >
<br>
<div class="text-center">
<div class="w3-row">
<label for="event_category">Event Category:</label>
<input class="w3-radio" type="radio" name="event_category" id="event-category-C" value="C">
<label>Competition</label>    
<input class="w3-radio" type="radio" name="event_category" id="event-category-F" value="F">
<label>Fundraiser</label>    
<br>
<input class="w3-radio" type="radio" name="event_category" id="event-category-P" value="P">
<label>Practice</label>
<input class="w3-radio" type="radio" name="event_category" id="event-category-O" value="O">
<label>Other</label>
</div>
</div>
<label>Description:</label>
<input type="text" class="form-control" name="description1" id="description">
<label>Place:</label>
<input type="text" class="form-control" name="address1" id="address">
<label>Organizer Email:</label>
<input type="text" class="form-control" name="email1" id="email">
<label>Phone:</label>
<input type="text" class="form-control" name="phone1" id="phone">
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-danger pull-left" style="">Delete</button>
<button type="button" class="btn btn-secondary pull-right" data-dismiss="modal">Close</button>
<input type="hidden" id="id" name="id" >
<button class="btn btn btn-primary pull-right" type="submit" > Update Data</button>
</div>
</form>
</div>
</div>
</div>
This is what I used to load the values to the Modal, When I click on the event, the modal pops up with that event information.
eventClick: function (event) {
#if(Auth::check() && Auth::user()->role_id != 5)
if (event) {
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
type: "PUT",
datatype: 'JSON',
url: SITEURL + '/fullcalendar/edit',
data: "&id=" + event.id,
success: function (response) {
event = JSON.parse(response)
if (event.image == null || event.image == '') {
$('#image').attr("src", 'http://ssl.gstatic.com/accounts/ui/avatar_2x.png')
} else {
$('#image').attr("src", 'uploads/event/' + event.image)
}
console.log(event)
$('#title').val(event.title)
$('#start').val(formatEventDate(event.start))
$('#end').val(formatEventDate(event.end))
$('#description').val(event.description)
$('#address').val(event.address)
$('#email').val(event.email)
$('#phone').val(event.phone)
let event_category = event.event_category;
$("#event-category-" + event_category).prop("checked", true);
$('#updateModal').modal('show');
}
});
}
#endif
}
Is supposed to go to this function where it saves to the database
public function update(Request $request)
{
$user = Auth::user();
$id = $request->input('id');
$this->validate($request,[
'id'=>'required',
'title' => 'required',
'start' => 'required',
'end' =>'required',
]);
$event = Event::find($id);
if($request->hasFile('image')){
$file = $request->file('image');
$extension = $file->getClientOriginalExtension();
$filename = time() .'.'.$extension;
$file->move('uploads/event/',$filename);
$event->image = $filename;
}
$event->title = $request->input('title1');
$event->start = $request->input('start1');
$event->end = $request->input('end1');
$event->description = $request->input('description1');
$event->address=$request->input('address1');
$event->email=$request->input('email1');
$event->phone=$request->input('phone1');
$event->event_category=$request->input('event_category1');
$event->user_id = $user->id;
$event->save();
return redirect('/fullcalendar')->with('success','Data Saved');
}
I have the 2 modal on the same view, each one is called differently and the one that works correctly is the create modal, the update one only shows the data.
What am I missing?

It was missing the $('#id').val(event.id)
console.log(event)
$('#id').val(event.id)
$('#title').val(event.title)
$('#start').val(formatEventDate(event.start))
$('#end').val(formatEventDate(event.end))
$('#description').val(event.description)
$('#address').val(event.address)
$('#email').val(event.email)
$('#phone').val(event.phone)
$('#user_id').val(event.user_id)
let event_category = event.event_category;
$("#event-category-" + event_category).prop("checked", true);
$('#updateModal').modal('show');

ejs dynamic form have all the same data

I'm learning ejs and I have some trouble to get some thinge working properly. I'm trying to fill out a form when user click modify, depending on which line it is, but the form is showing all the same data and I don't know why.
For exemple, if i click "Modify on the second line of the table, it's supposed to take what's on second row and fill the form with dats. But it's always filling it using the first row data, regardless of where I click. Here's the code :
<% if(data.length){
for(var i = 0;i < data.length;i++) { %>
<tr>
<td><%=data[i].ID%></td>
<td><%=data[i].NOM%></td>
<td><%=data[i].EMPLACEMENT%></td>
<td><%=data[i].UTILITE%></td>
<td><%=data[i].MARQUE%></td>
<td><%=data[i].MODELE%></td>
<td><%=data[i].NUMEROSERIE%></td>
<td><%=data[i].PROCESSEUR%></td>
<td><%=data[i].MEMOIRE%></td>
<td><%=data[i].OS%></td>
<td><%=data[i].CATEGORIE%></td>
<td><%=data[i].VALEUR%></td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5" placeholder="ID" name="<%=data[i].ID%>" value="<%=data[i].ID%>" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm" placeholder="Nom" name="<%=data[i].NOM%>" value="<%=data[i].NOM%>">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m" placeholder="Emplacement" name="EMPLACEMENT" value="<%=data[i].EMPLACEMENT%>">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m" placeholder="Utilité" name="UTILITE" value="<%=data[i].UTILITE%>">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m" placeholder="Marque" name="MARQUE" value="<%=data[i].MARQUE%>">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m" placeholder="Modèle" name="MODELE" value="<%=data[i].MODELE%>">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m" placeholder="Numéro de série" name="NUMEROSERIE" value="<%=data[i].NUMEROSERIE%>">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m" placeholder="Processeur" name="PROCESSEUR" value="<%=data[i].PROCESSEUR%>">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m" placeholder="Mémoire" name="MEMOIRE" value="<%=data[i].MEMOIRE%>">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m" placeholder="OS" name="OS" value="<%=data[i].OS%>">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m" placeholder="Catégorie" name="CATEGORIE" value="<%=data[i].CATEGORIE%>">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m" placeholder="Valeur" name="VALEUR" value="<%=data[i].VALEUR%>">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Here's how data looks like:
Data are different, but when I click edit, it shows data only from the first row.
Heres the rendered HTML (for the two rows in my last screenshot) :
<tr>
<td>20</td>
<td>test</td>
<td>1</td>
<td>S</td>
<td>HP</td>
<td>EWE</td>
<td>DFERu</td>
<td>weWE</td>
<td>wesdf</td>
<td>ESFDdddddddddddddddddddddddddddd</td>
<td>Cdeqawed</td>
<td>989</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-7" placeholder="ID" name="ID" value="20" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-7" placeholder="Nom" name="NOM" value="test">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-7" placeholder="Emplacement" name="EMPLACEMENT" value="1">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-7" placeholder="Utilité" name="UTILITE" value="S">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-7" placeholder="Marque" name="MARQUE" value="HP">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-7" placeholder="Modèle" name="MODELE" value="EWE">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-7" placeholder="Numéro de série" name="NUMEROSERIE" value="DFERu">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-7" placeholder="Processeur" name="PROCESSEUR" value="weWE">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-7" placeholder="Mémoire" name="MEMOIRE" value="wesdf">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-7" placeholder="OS" name="OS" value="ESFDdddddddddddddddddddddddddddd">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-7" placeholder="Catégorie" name="CATEGORIE" value="Cdeqawed">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-7" placeholder="Valeur" name="VALEUR" value="989">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
<form name = form2 action="/delete" method="post">
<input type="submit" name="20" value="Delete" class="btn btn-outline-danger" />
</form>
<!--20-->
<!--<form action="/update" method="put">
<input type="submit" name="20" value="Update" class="btn btn-outline-primary" />
</form>
<form action="" method="post">
<input type="submit" name="Delete" value="Delete" class="btn btn-outline-danger" />
</form>-->
</td>
<!--20-->
</tr>
<tr>
<td>21</td>
<td>r5y</td>
<td>5ry</td>
<td>r5y</td>
<td>y5r</td>
<td>w3</td>
<td>ww3</td>
<td>w3</td>
<td>55</td>
<td>6</td>
<td>7</td>
<td>677</td>
<td>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#myModal1">Modifier</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modifier serveur</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form name="form1m" action="/update" method="post">
<div class="form-group">
<label for="Inputm">ID</label>
<input type="text" class="form-control" id="Inputm5-8" placeholder="ID" name="ID" value="21" readonly>
</div>
<div class="form-group">
<label for="Inputm">Nom</label>
<input type="text" class="form-control" id="Inputm-8" placeholder="Nom" name="NOM" value="r5y">
</div>
<div class="form-group">
<label for="Input2m">Emplacement</label>
<input type="text" class="form-control" id="Input2m-8" placeholder="Emplacement" name="EMPLACEMENT" value="5ry">
</div>
<div class="form-group">
<label for="Input3m">Utilité</label>
<input type="text" class="form-control" id="Input3m-8" placeholder="Utilité" name="UTILITE" value="r5y">
</div>
<div class="form-group">
<label for="Input4m">Marque</label>
<input type="text" class="form-control" id="Input4m-8" placeholder="Marque" name="MARQUE" value="y5r">
</div>
<div class="form-group">
<label for="Input5m">Modèle</label>
<input type="text" class="form-control" id="Input5m-8" placeholder="Modèle" name="MODELE" value="w3">
</div>
<div class="form-group">
<label for="Input6m">Numéro de série</label>
<input type="text" class="form-control" id="Input6m-8" placeholder="Numéro de série" name="NUMEROSERIE" value="ww3">
</div>
<div class="form-group">
<label for="Input7m">Processeur</label>
<input type="text" class="form-control" id="Input7m-8" placeholder="Processeur" name="PROCESSEUR" value="w3">
</div>
<div class="form-group">
<label for="Input8m">Mémoire</label>
<input type="text" class="form-control" id="Input8m-8" placeholder="Mémoire" name="MEMOIRE" value="55">
</div>
<div class="form-group">
<label for="Input9m">OS</label>
<input type="text" class="form-control" id="Input9m-8" placeholder="OS" name="OS" value="6">
</div>
<div class="form-group">
<label for="Input10m">Catégorie</label>
<input type="text" class="form-control" id="Input10m-8" placeholder="Catégorie" name="CATEGORIE" value="7">
</div>
<div class="form-group">
<label for="Input11m">Valeur</label>
<input type="text" class="form-control" id="Input11m-8" placeholder="Valeur" name="VALEUR" value="677">
</div>
<input type="submit" name="Soumettre" value="Soumettre" class="btn btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
</div>
Can you help me?
Thanks

hm, my first bet would be, that the ids must be unique.
Have you tried to replace id="Input2m" with id="Input2m-<%=i%>"? (That is, adding the loop index to it).

I solved my problem, i modified these :
id="myModal1"
data-target="#myModal1"
to this :
data-target="#myModal1-<%=i%>"
id="myModal1-<%=i%>"

logForm.$invalid.$setValidity what's this mean?

https://github.com/PatrickO10/meetUp/blob/master/index.html#L73
I am new in this field and reading one code.
I can't understand logForm.$invalid.$setValidity here. I can't find anything about it from internet. The setvalidity in the internet has two perimeters but here has not.
And the invalid here https://docs.angularjs.org/api/ng/type/form.FormController has been a boolean why setvalidity? Why don't you use ng-disabled="logForm.$invalid"
Could you tell me? Thanks.
<div class="modal fade login" tabindex="-1" role="dialog" aria-labelledby="loginModelLabel" ng-controller="LoginCtrl as logCtrl">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header primary-color-dark-bg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="loginModelLabel">Login</h4>
</div>
<div class="modal-body primary-bg">
<form class="row form-horizontal" id="loginForm" ng-submit="logCtrl.login(user)" name="logForm">
<label for="logEmail" class="col-xs-12 col-md-6 margin-top">
<span class="pad-right">Enter your email</span>
<input type="email" id="logEmail" ng-model="user.email" class="form-control" placeholder="example#krustykrab.com" required autocomplete="email" autofocus>
</label>
<label for="logPass" class="col-xs-12 col-md-6 margin-top">
<span>Enter your password</span>
<input type="password" id="logPass" ng-model="user.password" class="form-control" placeholder="Enter your password" required>
</label>
<div class="col-xs-12 margin-top" ng-show="loginError">
<p class="invalidPass">Login Fail! {{loginErrMsg}}</p>
</div>
<label class="col-xs-12 margin-top">
<input id="submitLogin" type="submit" value="Login" ng-disabled="logForm.$invalid.$setValidity">
</label>
</form>
</div>
<div class="modal-footer primary-color-dark-bg">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

<input id="submitLogin" type="submit" value="Login"
ng-disabled="logForm.$invalid.$setValidity">
You are basically saying the input to be ng-disabled when the form is $invalid. i.e, here you are setting the input to $invalid, which makes the input to be disabled.

Bootstrap modal, not working in some places

I am trying to auto focus on bootstrap modal with php it is it do working fine with the code,
<div class="modal inmodal fade" id="upload_file" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content animated rotateIn">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add File</h4>
</div>
<form id="my-awesome-dropzone" class="dropzone" action="" enctype="multipart/form-data" method="post">
<div class="modal-body">
<input type="text" id="file_name" class="form-control" placeholder="Enter File Name" style="width:100%;" name="file_name" required="">
<br/>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio1" value="1" name="can_down" checked="">
<label for="inlineRadio1"> Open Access </label>
</div>
<div class="radio radio-success radio-inline">
<input type="radio" id="inlineRadio2" value="2" name="can_down">
<label for="inlineRadio2"> Restricted</label>
</div>
<br/>
<br/>
<input type="file" class="form-control" placeholder="Enter File Name" style="width:100%;" id="f_n" name="f_n" required="" onchange="checkFile();">
<p style="font-size:11px; padding-top:10px; color:red; margin-bottom:-25px; text-align:justified;">
* Please note that if you restrict access you can able to upload only <strong>pdf, ods, odt</strong> documents and user's can't download the file.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="add_man" name="add_file">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#upload_file').on('shown.bs.modal', function() {
$(this).find('#file_name').focus();
});
});
</script>
in first part of the image it was working properly but not with the second one i don't where i have made the mistake, both works on the same page with dynamic URL what would be the possible reason for this problem guys