Кнопка Submit .submit возвращается к поведению по умолчанию

Question

Кнопка Submit .submit возвращается к поведению по умолчанию

0

Я сделал простой тестовый пример, который предположил бы взять значение в текстовом поле и поместить его в div с id "submit-output" без обновления, но по какой-то причине он не работает.

нажатие кнопки "Отправить", похоже, не вызывает функцию postMessage() и даже перезагружает страницу, когда я возвращаю false в конце.

Может кто-нибудь скажет мне, почему кнопка отправки использует поведение по умолчанию?

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            function postMessage(){
                $('#post-form').submit(function(){
                    console.log("submit");
                    $('submit-output').html($('#post-form').children('.post').val());
                    console.log("submitted");
                    elem.children('.post').val("");
                    return false;
                });
            }
        });
    </script>
    </body>
</html>

CyanPrime 02 апр. 2014, в 22:29

Источник

Теги:

javascript

jquery

forms

3 ответа

3

Вам не нужно onclick = "postMessage()" во входном теге, удалить это и удалить функцию postMessage(). Также добавьте event.preventDefault(); как это:

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('#post-form').submit(function(event){
                event.preventDefault();
                console.log("submit");
                $('#submit-output').html($('#post-form').children('.post').val());
                console.log("submitted");
                return false;
            });
        });
    </script>
    </body>
</html>

Medhat Gayed 02 апр. 2014, в 17:23

0

Это предотвращает перезагрузку, но оно не получает сообщение для отправки-вывода. Я на FireFox 28.0.
CyanPrime 02 апр. 2014, в 20:19
0

вы пропустили "#" в $ ('# submit-output'). html (...), попробуйте добавить это, как в примере выше.
Medhat Gayed 02 апр. 2014, в 20:20
0

Это была отличная копия, поэтому у меня был знак #. Когда я дал текстовой области идентификатор и использовал его в html-функции submit-output вместо дочерних элементов формы «.post», она работала, как и ожидалось. это было из ответа ниже, который я принимаю. Хотя я дал тебе голос, и ты тоже получил мою благодарность. : D
CyanPrime 02 апр. 2014, в 20:24

Показать ещё 1 комментарий

-2

'

Прецедент

<div id="submit-output">[No output]</div>
<form id="post-form">
        <textarea name="post" rows="2" cols="50"></textarea>
    <input type=submit value="Submit" id="submitbutton" >
</form>

<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(document).ready(function() {
        function postMessage(){
           console.log("submit");
          $('#submit-output').html($('#post-form').children('.post').val());
          console.log("submitted");
          elem.children('.post').val("");
          return false;

        }
      $('#post-form').submit(postMessage);
    });
</script>
</body>

' Попробуй это

rohit anand 02 апр. 2014, в 18:02

Ещё вопросы

Это предотвращает перезагрузку, но оно не получает сообщение для отправки-вывода. Я на FireFox 28.0.
вы пропустили "#" в $ ('# submit-output'). html (...), попробуйте добавить это, как в примере выше.
Это была отличная копия, поэтому у меня был знак #. Когда я дал текстовой области идентификатор и использовал его в html-функции submit-output вместо дочерних элементов формы «.post», она работала, как и ожидалось. это было из ответа ниже, который я принимаю. Хотя я дал тебе голос, и ты тоже получил мою благодарность. : D

Buzinas · Accepted Answer · 2014-04-02T19-07-00.000Z

Вы не должны использовать событие "click" кнопки "Отправить", а только "отправить" событие формы.

Кроме того, команда $ ('submit-output') попытается найти TAG с этим именем, а не идентификатор, вместо этого вы должны использовать $ ("# submit-output").

Другая важная вещь: вам нужно использовать e.preventDefault(), чтобы предотвратить отправку события в форму.

Рабочий код:

<div id="submit-output">[No output]</div>
<form id="post-form">
    <textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
    <input type="submit" value="Submit" id="submitbutton" />
</form>

Javascript:

$(document).ready(function() {
    $("#post-form").submit(function(e) {
        e.preventDefault();
        $("#submit-output").html($("#txtInput").val());
        $("#txtInput").val("");
    });
});

DEMO FIDDLE