I have a form and I would like to add a button inside said form, but with the function of adding a input
. I made this function with JavaScript and it works fine. The problem is that being inside a form
, the page is restarted and the input that I added is deleted.
I have tried removing the label form
and it works fine. But I need it to be inside a form
since it's a record. Could you help me unlink that button from the form.
Here is the code that I have advanced:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register Subjects</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- font awesome -->
<script src="https://kit.fontawesome.com/e70d054944.js"></script>
<!-- style -->
<style>
body {
font-family: 'Ubuntu', sans-serif;
background: #f5f5f5;
}
.abs-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
</style>
</head>
<body>
<main>
<div class="container p-5">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Register Subject</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Register students of the course
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Register deliverables</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active text-center shadow-lg p-3 mb-5 bg-white rounded" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="container p-5">
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-book"></i></span>
</div>
<input type="text" class="form-control" placeholder="Subject's name" aria-label="Subject's name" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Description</span>
</div>
<textarea class="form-control" aria-label="Description" placeholder="add a description of the course"></textarea>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="teacher1">
<option selected>Choose a teacher</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02"><i class="fas fa-chalkboard-teacher"></i></label>
</div>
</div>
<div id="extra-teacher">
</div>
<div>
</div>
<button class="btn btn-success mb-3" onclick="add_teacher()">Add another teacher</button>
<button class="btn btn-primary btn-block mb-3">
Register Subject
</button>
</form>
</div>
</div>
<div class="tab-pane fade text-center shadow-lg p-3 mb-5 bg-white rounded" id="profile" role="tabpanel" aria-labelledby="profile-tab">b</div>
<div class="tab-pane fade text-center shadow-lg p-3 mb-5 bg-white rounded" id="contact" role="tabpanel" aria-labelledby="contact-tab">c</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<script>
function add_teacher() {
function input_teacher() {
var text = '<div class="input-group mb-3"><select class="custom-select" id="teacher"><option selected>Choose a teacher</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select><div class="input-group-append"><label class="input-group-text" for="inputGroupSelect02"><i class="fas fa-chalkboard-teacher"></i></label></div></div>'
return text
}
document.querySelector('#extra-teacher').innerHTML = input_teacher()
}
</script>
</html>
If they notice, when they are inside form
and click on the button, they are redirected. How do I prevent that from happening?
Elements
button
have atype
default (type). The default type issubmit
, this means that the form data is sent to the server.If you specify the type a
button
, the problem is solved since with this you are saying that the button does not have a defined behavior except for all the events that you indicate to it (in this case the execution of the functionadd_teacher
):All I've done is update this part of your code to add the
type="button"
:In the following link you can see the attributes of the element
button
:The problem is that every button inside a form is going to act as a submit button. To avoid this, you can choose one of these options:
type="button"
to the button that you don't want the form to submit. That way you are telling the browser that this button is in fact a button and not a submit button.event.preventDefault()
to the function that the button calls. In this way you will be indicating that you do not want the default function of that button to be carried out (which would be to submit the form).Here you can see your code with the first option: