сообщение появляется в том же div после нажатия на кнопку

Question

это моя форма:

<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>

когда я нажимаю кнопку NOTIFY ME, я хочу, чтобы моя форма исчезла, и я хочу поместить сообщение в этот раздел уведомлений, например: сообщение после нажатия каков наилучший способ сделать это?

Answer 1

Вы должны понимать, что при нажатии кнопки браузер обновит страницу, поэтому вам нужно добавить прослушивание и запретить настройку по умолчанию. Оттуда я просто получил элемент div по Id и изменил атрибут innnerHTML.

<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

Использование jquery для изменения содержимого div имеет класс «messages».

		 $(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>