使用HTML和JQUERY的交互式表单

Question

我正在尝试使用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>

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

Answer 2

您使用的输入类型为Submit。它与表单动作一起使用。将被重定向到或定向到。因此，您的代码应该是这样的，当页面加载时，代码应该执行，或者将输入用作按钮。

这是正在编写硬编码user_name的fiddle。更新代码以获取值。通过jQuery API。

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