message appear in the same div after clicking on button

Question

this is my form:

<div class="notification">
            <p style="font-family: 'Roboto', sans-serif;">Enter your email to notify you when the app you selected become available.</p>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputemail"></label>
                        <input type="email" class="form-control" id="inputemail" placeholder="Email Address" size="25">
                    <button type="submit" class="btn btn-primary" onclick="displayMessage()">NOTIFY ME</button>
                    <small id="emailHelp" class="form-text text-muted">*we will never sell<br>your email</small>
                </div>
            </form>
        </div>

when i click on NOTIFY ME button, i want my my form to disappear and i want to put a message inside that notification div, like this: message after click what is the best way to do this?

Answer 1

You need to understand that when you click the button the browser will refresh the page so you need to add a listening and prevent the default. From there I simple got the div element by Id and change the innnerHTML attribute.

<script>

let string = 'We will email you when your app becomes available'

function handleClick(event){
  event.preventDefault();
  let notifDiv = document.getElementById("notifications");
  notifDiv.innerHTML = string
}

document.getElementById("notifications").addEventListener("click", handleClick)

</script>

Answer 2

Use jquery to change the content of the div has class "notification".

 $(document).ready(function(){ $("button").click(function(){ $(".notification").html('<p><center><b>We will email you when your app becomes available.</b></center></p>'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="notification"> <p style="font-family: 'Roboto', sans-serif;">Enter your email to notify you when the app you selected become available.</p> <form class="form-inline"> <div class="form-group"> <label for="inputemail"></label> <input type="email" class="form-control" id="inputemail" placeholder="Email Address" size="25"> <button type="submit" class="btn btn-primary">NOTIFY ME</button> <small id="emailHelp" class="form-text text-muted">*we will never sell<br>your email</small> </div> </form> </div>