我必须缺少一些简单的东西。在我添加了一个新元素以在导航栏中使用按钮切换输入框之前,该脚本一直按预期运行。现在,表单将在提交时重定向。
预期的行为是,提交输入后,它会在注释框下方显示为注释。
当前是我的.preventDefault();重定向后,该点击不再起作用。我花了很多时间试图找出问题所在,并且需要对我错误地更改或实施的内容有一些了解。
$(function () {
//Toggle compose input box
$(".compose").click(function () {
event.preventDefault();
$(".new").slideToggle("slow");
textarea.focus()
})
//compose input to comment
$('.Form').on('submit', function (event) {
event.preventDefault();
// 1. Grab the content of the form
let formData = $('.Form').serialize();
let entry = $('.textarea input').val();
console.log(entry)
if (entry === null || entry === '') {
alert('text too short!')
} if (entry.length > 140) {
alert('text too long!')
} else {
// 2. Submit using ajax
$.ajax('/comments', {
method: 'POST',
data: formData,
}).then(function (success) {
console.log('succesful')
// 4. Make sure the new comments shows
return $.ajax('/comments');
}).then(renderComments());
}
});
});
HTML:
<main class="container">
<section class="new">
<form action='/comments' Method='POST' id="Form">
<h2>Compose Comment</h2>
<textarea id="textarea" name="text" onfocus='this.select()' placeholder="What are you humming about?"></textarea>
<input class="submit" type="submit" value="Submit">
<span class="counter">140</span>
</form>
</section>
答案 0 :(得分:0)
您的表单具有id =“ Form”,但是您正在使用jQuery选择类。
即您需要:
//compose input to comment
$('#Form').on('submit', function(event) {
event.preventDefault();
}
请注意,序列化逻辑也在使用类,请更新您的引用。
答案 1 :(得分:0)
//Toggle compose input box
$( ".compose" ).click(function() {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
textarea.focus()
})
您没有在此绑定中传递“ event”参数,如下所示,以使preventDefault
正常运行。
//Toggle compose input box
$( ".compose" ).click(function(event) {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
textarea.focus()
})