CODEWITHSUNDEEP
javascripthtml
Sackling
Sackling

Reputation: 1820

form behaving differently when pressing enter instead of button

I have a form that I have made that uses jquery to detect when the button is pressed, as well as used to show the data without a page reload.

It is working perfect when the button is pressed, however when pressing enter the page refreshes and nothing happens. I have the button bound to the jquery, but I am not sure what to do to handle pressing 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);
            }
        );

    });
});

Upvotes: 0

Views: 100

Answers (3)

MMM
MMM

Reputation: 7310

That's because you need to find what happens on submit – this is the event that is called when you press enter, it doesn't trigger the click of the button.

I don't know what the ID of your form is, but you can do something like the following:

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

Use this instead of the button click event.

Upvotes: 3

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

You can add this jQuery to bind to the same event:

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

Though it would be better to separate the function that gets executed into a separate function, and call that, this will still work just fine.

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

Instead of running your code when the button is clicked, run it when the form is submitted. 

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

This will catch any means of submitting the form.

Upvotes: 3

Related Questions