Блог

Главная - Вопросы по программированию - Интерактивная форма с использованием HTML и JQUERY

Интерактивная форма с использованием HTML и JQUERY

#html #jquery

#HTML #jquery

Вопрос:

Я пытаюсь создать интерактивную форму с использованием HTML и jQuery. Идея заключается в том, чтобы пользователь вводил свое имя, адрес электронной почты и комментарий. Затем ввод от пользователя будет добавлен к абзацу HTML и отображен в форме. Я смог создать форму, но у меня возникли проблемы с отображением ввода пользователя. Любая помощь приветствуется!

Вот код, который у меня есть:

 $("form").submit(function(event) {
  var user_name = $('#form').find('input[name="name"]').val();
  var user_email = $('#email').val();
  var user_comment = $('#comment').val();
  $("p.feedback").append("user_name");

}); 
 h1 {
  text-align: center;
}

.aligncenter {
  text-align: center;
} 
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<h1 style="border: 2px solid black;
        background-color: white;" " > </h1>
        <div  style = "border: 2px solid black; background-color: white; padding: 25px 50px; "">
  <h2>Biography</h2>
  <p> </p>
  <h2>Education</h2>
  <p> </p>
  <h2>Research Interests</h2>
  <p> </p>
  <h2>Contact Information</h2>
  <p> </p>
  </div>
  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="comment">Comment:</label><br>
    <input type="text" id="comment" name="comment"><br>
    <input type="submit" value="Submit">
  </form>
  <p class="feedback"></p>

Комментарии:

1. Вы никогда не препятствуете отправке, поэтому страница выгружается. Кроме того, я настоятельно не рекомендую изучать jQuery, если вы еще не полностью освоились с собственным DOM API.

2. Как вы хотите это сделать? Если вы просто хотите добавить на страницу в <p class=»feedback»></p>, и вам не нужно сохранять его на сервере БД, то вы можете просто использовать JS или jQuery для этого. В противном случае вам нужно будет отправить форму через AJAX для сохранения на сервере и проверки данных, а после успешного ответа добавить данные на страницу. В любом случае, вы все равно собираетесь использовать JS / Jquery для редактирования DOM, например $(«.feedback»).html(‘Some Content Here») , добавьте его к этому элементу, если хотите добавить несколько комментариев.

3. Вы не хотите, чтобы страница обновлялась. Вот простой jsfiddle, с которым вы можете поиграть, скопировать и вставить свой код. Используйте консоль. регистрируйтесь, чтобы обнаружить любые ошибки в вашем коде jQuery или Javascript. jsfiddle.net/AvCCb Вот немного более сложный пример. jsfiddle.net/darshanags/6vxMs/6

Ответ №1:

Попробуйте это:

 $('#form').on('submit', function(e){
  e.preventDefault(); // Prevent the form to send
  $('#feedback')
    .append('<div>' $('#name').val() '</div>')
    .append('<div>' $('#email').val() '</div>')
    .append('<div>' $('#comment').val() '</div>');
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 style="border: 2px solid black; background-color: white;"></h1>

<div style="border: 2px solid black; background-color: white; padding: 25px 50px;">
  <h2>Biography</h2>
  <p></p>
  <h2>Education</h2>
  <p></p>
  <h2>Research Interests</h2>
  <p></p>
  <h2>Contact Information</h2>
  <p></p>
</div>

<form id="form">
  <label for="name">Name:</label><br>
  <input type="text" id="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email"><br>
  <label for="comment">Comment:</label><br>
  <input type="text" id="comment"><br>
  <input type="submit" value="Submit">
</form>

<div id="feedback"></div>

Ответ №2:

Вы используете тип ввода как Submit . Которая используется вместе с действием формы. Которая будет перенаправлена или направлена на. Итак, ваш код должен быть таким, чтобы при загрузке страницы код должен выполняться или использовать ввод в качестве кнопки.

Вот скрипка, которая записывает жестко закодированное имя пользователя. Обновите код, чтобы получить значение. Пройдите через API jQuery.

Ответ №3:

И это решение от меня. Оберните свой код в готовое событие:

 $(document).ready(function () {
   ...
});

Я также использовал <br> тег для переноса значения в новую строку.

 $(document).ready(function () {
  $("form").submit(function(event) {
    event.preventDefault();
    var user_name = $('#name').val();
    var user_email = $('#email').val();
    var user_comment = $('#comment').val();
    $("p.feedback").append("user_name: "   user_name   "<br>email: "   user_email   "<br>comment: "   user_comment);

  });
}); 
 h1 {
  text-align: center;
}

.aligncenter {
  text-align: center;
} 
 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<h1 style="border: 2px solid black;
        background-color: white;" " > </h1>
        <div  style = "border: 2px solid black; background-color: white; padding: 25px 50px; "">
  <h2>Biography</h2>
  <p> </p>
  <h2>Education</h2>
  <p> </p>
  <h2>Research Interests</h2>
  <p> </p>
  <h2>Contact Information</h2>
  <p> </p>

  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">Email:</label><br>
    <input type="text" id="email" name="email"><br>
    <label for="comment">Comment:</label><br>
    <input type="text" id="comment" name="comment"><br>
    <input type="submit" value="Submit">
  </form>
  <p class="feedback"></p>
Метки: