Я должен упустить что-то простое. Этот сценарий работал, как и ожидалось, пока я не добавил новый элемент для переключения поля ввода с помощью кнопки на панели навигации. Теперь форма будет перенаправлена при отправке.

Ожидаемое поведение заключается в том, что при отправке ввода он отображается как комментарий под полем комментария.

В настоящее время мой .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
archaicGhost 17 Сен 2018 в 02:17

2 ответа

Лучший ответ

У вашей формы id = "Form", но вы выбираете класс с помощью jQuery.

Т.е. вам нужно:

//compose input to comment
$('#Form').on('submit', function(event) {
  event.preventDefault();
}

Будьте осторожны, логика сериализации также использует класс, обновите свои ссылки.

0
idmitrov 16 Сен 2018 в 23:27
//Toggle compose input box
$( ".compose" ).click(function() {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
 textarea.focus()
})

Вы не передаете параметр «событие» в этой привязке, как показано ниже, чтобы заставить preventDefault функционировать должным образом.

//Toggle compose input box
$( ".compose" ).click(function(event) {
event.preventDefault();
$( ".new" ).slideToggle( "slow" );
 textarea.focus()
})
0
Tommy 16 Сен 2018 в 23:35