Как получить фокус на Divicular Div или сообщение об успехе после того, как пользователь отправил форму

Question

Я хочу сфокусироваться на успешном сообщении после того, как пользователь отправит форму или нажмет на кнопку отправки.Я много пробовал, но это еще не сделано.Я уже создал форму и код php бэкэнда для загрузки в базу данных и отображения сообщения об успехе, но каждый раз, когда я отправляю форму.Он начинает перезагружать и обновлять страницу, поэтому я не могу сосредоточиться на сообщении об успехе.Чтобы увидеть сообщение об успехе, я должен прокрутить сам и посмотреть сообщение.

<form action="" role="form" id="myForm" enctype="multipart/form-data" method="post"  onsubmit="return validateContactForm()">
   <div class="form-group">
       <input type="text" class="form-control" name="text2" id="contact-name" placeholder="Your Name" required/>
   </div>
   <div class="form-group form-group2">
        <input type="text" class="form-control" maxlength="10" pattern="\d{10}" title="Please enter exactly 10 digits" name="number2" id="contact-number" placeholder="Your Phone" required/>
   </div>
   <div class="form-group form-group2">
        <input type="email" class="form-control" name="email2" id="contact-email" placeholder="Your Email" required/>
   </div>
   <div class="form-group">
        <textarea class="form-control" name="message2" id="message" cols="30" rows="10" placeholder="Your Message" required></textarea>
   </div>
   <button type="submit" id="submit"  name="submit2" onclick="$('#statusMessage')[0].focus()" class="btn south-btn">Send Message</button><br><br>
   <div id="statusMessage"> 
      <?php
            if (! empty($message2)) {
                       ?>
            <p id="success-message2" class='<?php echo $type; ?>Message2'><?php echo $message2; ?></p>
      <?php
              }
              ?>

Answer 1

Вы хотите получить фокус на сообщении об успехе после отправки формы:

<form action="" role="form" id="myForm" enctype="multipart/form-data" method="post"  onsubmit="return validateContactForm()">
<div class="form-group">
<input type="text" class="form-control" name="text2" id="contact-name" placeholder="Your Name" required/>
</div>
<div class="form-group form-group2">
    <input type="text" class="form-control" maxlength="10" pattern="\d{10}" title="Please enter exactly 10 digits" name="number2" id="contact-number" placeholder="Your Phone" required/>
</div>
<div class="form-group form-group2">
    <input type="email" class="form-control" name="email2" id="contact-email" placeholder="Your Email" required/>
</div>
<div class="form-group">
    <textarea class="form-control" name="message2" id="message" cols="30" rows="10" placeholder="Your Message" required></textarea>
</div>
<button type="submit" id="submit"  name="submit2" onclick="$('#statusMessage')[0].focus()" class="btn south-btn">Send Message</button><br><br>
<div id="statusMessage"> 
    <?php if (!empty($message2)) { ?>
        <p id="success-message2" class='<?php echo $type; ?>Message2'><?php echo $message2; ?></p>
        <script>
         window.location.hash = '#success-message2';
        </script>
    <?php } ?>
</div>