форма ведет себя по-разному при нажатии Enter вместо кнопки

Question

форма ведет себя по-разному при нажатии Enter вместо кнопки

0

У меня есть форма, которую я создал, которая использует jquery для обнаружения нажатия кнопки, а также для отображения данных без перезагрузки страницы.

Он работает идеально, когда нажата кнопка, однако при нажатии на кнопку обновление страницы и ничего не происходит. У меня есть кнопка, привязанная к jquery, но я не уверен, что делать, чтобы обрабатывать нажатие enter.

Html:

<table border="0" width="100%" cellspacing="1" cellpadding="2" style="margin-bottom:20px;">
    <tbody>
        <tr class="infoBoxContents">
            <td style="padding:20px;">
                <table border="0" width="100%" cellspacing="0" cellpadding="2">
                    <tbody>
                        <tr>
                            <td width="50%">
                                <table width="100%">
                                    <tbody>
                                        <tr>
                                            <td class="main">
                                                <b>Calculate shipping</b>
                                                <div class="smallText">Shipping Weight: 6lbs</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="main" style="padding:10px;">Country:
                                                <select name="ship_country_id" id="ship_country_id">
                                                    <option value="1">Afghanistan</option>
                                                    <option value="2">Albania</option>
                                                    <option value="3">Algeria</option>
                                                    <br>Post code/ Zip code:
                                                    <input type="text" name="postcode" id="postcode_entry">
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>

                            <td class="main" width="50%" align="right">
                                <div class="contentText" id="shipping_method"></div>
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <button type="button" id="estimate" style="cursor:pointer; width:110px; margin-left:10px; padding:5px;">
                                    <span class="ui-button-text" style="float:left;">Calculate</span>
                                    <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e" style="float:right;"></span>

                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

$(function () {

    $('#estimate').click(function () {    
        var postcode_entry = $('#postcode_entry').val();
        var country_entry = $('#ship_country_id').val();

        $("#shipping_method").html("<div style=\'margin:20px auto;width:100px;text-align:center;\'><img src=\'ext/jquery/bxGallery/spinner.gif\' /></div>").show();

        $.get("checkout_shipping.php", {
                country: country_entry,
                refresh_quotes: "1",
                postcode: postcode_entry,
                zone_name: "canada"
            },
            function (data) {
                $("#shipping_method").html(data);
            }
        );

    });
});

Sackling 17 дек. 2013, в 19:11

Источник

1

используйте .submit () вместо .click() . .submit() учитывает все возможные способы отправки.
Justin Wood 17 дек. 2013, в 17:48
0

Если я изменю форму отправки, форма будет отправлена, и страница должна будет обновиться.
Sackling 17 дек. 2013, в 21:52
0

используйте e.preventDefault();
Justin Wood 17 дек. 2013, в 22:00

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

Теги:

javascript

html

3 ответа

3

Вместо запуска кода при нажатии кнопки запустите его, когда форма будет отправлена.

$('YOUR_FORM_HERE').submit(function() {

Это поймает любые способы отправки формы.

James Montagne 17 дек. 2013, в 15:21

0

Вы можете добавить этот jQuery для привязки к тому же событию:

$(document).on('keypress', function(e){
  if(e.which === 13){
    $('#estimate').click();
  }
});

Хотя было бы лучше разделить функцию, которая запускается в отдельную функцию, и называть ее, это все равно будет работать нормально.

Tom Pietrosanti 17 дек. 2013, в 16:05

Ещё вопросы

используйте .submit () вместо .click() . .submit() учитывает все возможные способы отправки.
Если я изменю форму отправки, форма будет отправлена, и страница должна будет обновиться.

MMM · Accepted Answer · 2013-12-17T15-39-00.000Z

Это потому, что вам нужно найти, что происходит при submit - это событие, которое вызывается при нажатии кнопки ввода, оно не вызывает щелчок кнопки.

Я не знаю, что такое идентификатор вашей form, но вы можете сделать что-то вроде следующего:

$("#myform").submit(function(e) {
    e.preventDefault();
    //do something
    ...

Используйте это вместо события нажатия кнопки.

Спасибо, это сработало. Сначала я был смущен, потому что моя кнопка больше не работала, но ввод был, когда я изменил, чтобы представить. Мне нужно было также изменить тип кнопки, чтобы отправить. Почему функция должна принимать параметр "e" или какой-либо другой параметр вообще? почему бы просто не предотвратитьDefault (); работай?
Потому что e - это событие, и вы хотите предотвратить поведение по умолчанию, связанное с этим событием. Если бы существовала только preventDefault() , это означало бы, что в глобальной области видимости есть такая функция. Как он узнает, о каком событии вы говорите? Это не так, поэтому он является частью объекта события. Надеюсь, это поможет!