Trying to create a modal with a try-catch block that closes the modal if the form is valid and correctly filled out.
The function 'login' includes a line $('#dialog').modal('hide'); that doesn't seem to work properly.
<script>
function login() {
var contact = new Contact();
contact.name = document.getElementById('name').value;
contact.email = document.getElementById('email').value;
contact.zipCode = document.getElementById('plz').value;
contact.city = document.getElementById('ort').value;
contact.street = document.getElementById('strasse').value;
try {
contact.validate();
}
catch(err) {
return window.alert(err.message);
}
contactStorage.newContact(contact);}
$('#dialog').modal('hide');
</script>
</head>
This is the modal
<div class="container">
<h2></h2>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dialog">
Open Login Dialog
</button>
<!-- The Modal -->
<div class="modal" id="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login (in header)</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="container">
<p>In the body:</p>
<form>
<div class="form-group row">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Name" id="name">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="E-Mail" id="email">
</div>
</div>
<div class="form-group row">
<label for="plz" class="col-sm-2 col-form-label">Zip Code</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Zip Code" id="plz">
</div>
</div>
<div class="form-group row">
<label for="city" class="col-sm-2 col-form-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="ort" placeholder="City">
</div>
</div>
<div class="form-group row">
<label for="street" class="col-sm-2 col-form-label">Street Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="strasse" placeholder="Street Address">
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-block" onclick="login()">Save</button>
</div>
</div>
</div>
</div>
</div>