Обработчик форм не мешает по умолчанию

0

Я новичок в jQuery.

Я пытаюсь отправить форму, но обработчик формы не препятствует отправке формы.

Это моя форма:

<form action = "myForm.php" id="testForm">
        <ul data-role="listview" data-style="inset">
            <li>
                <label>Message: </label>
                <input type="text" name="message"/>
            </li>
            <li>
                <label>From: </label>
                <input type="text" name = "from" />
            </li>
            <li>
                <label>To: </label>
                <input type="text" name = "to" />
            </li>
        </ul>
        <center><input type="submit" /></center>
    </form>

и jQuery (который появляется после формы)

<script>
        $( "#testForm" ).submit(function( event ) {
            event.preventDefault();
            var $form = $(this), 
            messageValue = $form.find("input[name = "message"]").val(),
            messageFrom = $form.find("input[name = "from"]").val(),
            messageTo = $form.find("input[name = "to"]").val(),
            url = "myForm.php";
            var posting = $.post(url, {message: messageValue, from: messageFrom, to: messageTo})
            posting.done(function( data ) {
                var content = $( data ).find( "#content" );
                $( "#result" ).empty().append( content );
            });
        });
    </script>

Но обработчик формы не препятствует отправке по умолчанию. Любая помощь относительно того, что я делаю неправильно, очень ценится.

  • 1
    Вот небольшое легкое чтение, которое поможет вам понять, что происходит - stackoverflow.com/questions/1357118/… Ваш код сработал для меня, но вы можете пойти дальше и включить скрипт в обработчик готовых документов, а затем контрольная работа.
  • 2
    У вас должны быть ошибки в консоли, проверьте и исправьте. например, это неправильный синтаксис: .find("input[name = "message"]")
Показать ещё 1 комментарий
Теги:
forms

1 ответ

1
Лучший ответ

Вы также должны быть осторожны с одинарными кавычками и двойными кавычками в ваших селекторах

<script type="text/javascript">
$(document).ready(function(){
       $( "#testForm" ).submit(function( event ) {
            event.preventDefault();
            var $form = $(this), 
            messageValue = $form.find("input[name = 'message']").val(),
            messageFrom = $form.find("input[name = 'from']").val(),
            messageTo = $form.find("input[name = 'to']").val(),
            url = "myForm.php";
            var posting = $.post(url, {message: messageValue, from: messageFrom, to: messageTo})
            posting.done(function( data ) {
                var content = $( data ).find( "#content" );
                $( "#result" ).empty().append( content );
            });
        });

})
</script>

        messageValue = $form.find("input[name = 'message']").val(),//correct
        messageValue = $form.find('input[name = "message"]').val(),//correct
        messageValue = $form.find('input[name = 'message']').val()//no
        messageValue = $form.find("input[name = "message"]").val()//no

Ещё вопросы

Сообщество Overcoder
Наверх
Меню