CODEWITHSUNDEEP
jqueryajaxipad
Andy Holmes
Andy Holmes

Reputation: 8087

Disable enter/return and go on ipads/iphones from submitting ajax forms

I have searched here and found 3 or 4 articles asking the same question and have tried all their answers, however either i'm doing something very wrong or its the fact im using ajax in my jquery to submit the forms. But basically i would like to disable Enter/Return keys on keyboard and the Go button on ipads on my forms. below is an example of a form im using

<form class="widget-header rooms">
    <input type="text" placeholder="Type Room name" name="roomName[]" class="form-input add-room-input input-width-xxlarge">
    <input type="hidden" class="roomId" name="roomId[]">
    <input type="hidden" class="inventoryId" name="inventoryId[]" value="<?=$_GET['inventory_id']?>">
    <div class="toolbar no-padding">
        <div class="btn-group">
            <span class="btn saveRoom"><i class="icon-ok"></i> Save Room</span>
        </div>
    </div>
</form>

and the javascript functions etc

$('body').on('click', '.saveRoom', function(e) {
    postFormRooms($(this).closest('form.rooms').get(0));
});

// This script saves the room name
    function postFormRooms(form) {
        var $this = $(form);
        var string = $this.serialize();
        $.ajax({
            type: "POST",
            url: "includes/add_room.php",
            data: string,
            cache: false,
            success: function(data){
                var saveIcon = $this.find('.add-room-input');
                $this.find('.roomId').val(data);
                $this.siblings('.toolbar-small').children().children('.addItem').fadeIn();
                $this.siblings('.toolbar-small').children().children('.dropdown-toggle').fadeIn();
                $this.parent().attr('data-parent-room', data);
                saveIcon.addClass('savedField').delay(1000).queue(function() {
                    $(this).removeClass('savedField');
                    $(this).dequeue();
                });
            }
        });
    }

Everything works perfectly, i just need to disable those buttons and i can't get it to work. You can see that im not using submit buttons or anything as i am using icons to trigger the functions. Is this causing my issue?

Upvotes: 0

Views: 660

Answers (1)

jCaMaX
jCaMaX

Reputation: 189

Try adding this to your code.

<script>
    $(".widget-header").submit(function(e){
        e.preventDefault();
    });
</script>

Cheers.

Upvotes: 2

Related Questions