How to prevent prompt dialog from submitting the form upon enter

Question

I have a button which opens up a prompt:

$('#enter-manual-date').click(function(){
        var date = prompt("Enter the date", "");
        if(date != null && moment(date, 'DD-MM-YYYY', true).isValid()){
            $('#exp').val(date);
        }else{
            $('#exp').val('');
            alert("Invalid Date! Format should be: DD-MM-YYYY");
        }
    });

But the problem is that when I press enter even if the dialog still doesn't have any input, it automatically submits the form.

I'm already preventing form submission upon enter:

$(function(){
        $("form").bind("keypress", function (e) {

            if (e.keyCode == 13) {
                return false;
            }
        });
    });

I also tried to prevent default:

e.preventDefault();

Here's the HTML. It submits the form when you click on the "Add Document" button:

<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-default">
            <div class="panel-heading">Add Car Document</div>
            <div class="panel-body">
                @include('partials.alert')
                <form id="add-cardoc-form" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">

                    <input type="hidden" id="car_id" name="car_id" value="{{ $car_id }}">

                    <div class="form-group{{ $errors->has('car_num') ? ' has-error' : '' }}">
                        <label for="car_num" class="col-md-4 control-label">Reg No.</label>

                        <div class="col-md-6">
                            <div class="input-group">
                                <input id="car_num" type="text" class="form-control" name="car_num" value="{{ old('car_num', $car_num) }}" required>
                                <span class="input-group-btn">
                                    <button type="button" class="btn" id="search-car">Search</button>
                                </span>
                            </div>

                            @if($errors->has('car_num'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('car_num') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="driver" class="col-md-4 control-label">Search Results</label>
                        <div class="col-md-6"> 
                            <ul id="cars-results"></ul>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('doc') ? ' has-error' : '' }}">
                        <label class="col-md-4 control-label">Document Type</label>
                        <div class="col-md-6">
                            @foreach($doc_types as $dt)
                            <div class="radio">
                              <label>
                                <input type="radio" name="doc_type" class="doc-type" value="{{ $dt }}" {{ isChecked($dt, $default_doc_type) }}>
                                {{ friendlyText($dt) }}
                              </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('plate_number') ? ' has-error' : '' }} hidden" id="plate-container">
                        <label for="plate_number" class="col-md-4 control-label">Plate No.</label>

                        <div class="col-md-6">
                            <input id="plate_number" type="text" class="form-control" name="plate_number" value="{{ old('plate_number') }}">

                            @if($errors->has('plate_number'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('plate_number') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="insurance-container form-group{{ $errors->has('insurance_company') ? ' has-error' : '' }} hidden" id="badge-container">
                        <label for="insurance_company" class="col-md-4 control-label">Insurance Company</label>

                        <div class="col-md-6">
                            <input id="insurance_company" type="text" class="form-control" name="insurance_company" value="{{ old('insurance_company') }}">

                            @if($errors->has('insurance_company'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('insurance_company') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>


                    <div class="insurance-container form-group{{ $errors->has('date_insurance_issued') ? ' has-error' : '' }} hidden">
                        <label for="date_insurance_issued" class="col-md-4 control-label">Date Insurance Issued</label>

                        <div class="col-md-4">
                            <input id="date_insurance_issued" type="text" class="form-control" name="date_insurance_issued" value="{{ old('date_insurance_issued') }}">

                            @if($errors->has('date_insurance_issued'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('date_insurance_issued') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY HH:mm" data-type="datetime" data-id="date_insurance_issued">enter manually</button>
                        </div>
                    </div>


                    <div class="form-group{{ $errors->has('doc') ? ' has-error' : '' }}">
                        <label for="doc" class="col-md-4 control-label">Document</label>

                        <div class="col-md-6">
                            <input id="doc" type="file" class="form-control" name="doc" required>

                            @if($errors->has('doc'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('doc') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('exp_datetime') ? ' has-error' : '' }} hidden" id="exp-datetime">
                        <label for="exp_datetime" class="col-md-4 control-label">Expiration</label>

                        <div class="col-md-4">
                            <input id="exp_datetime" type="text" class="form-control" name="exp_datetime" value="{{ old('exp_datetime') }}" required>

                            @if($errors->has('exp_datetime'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('exp_datetime') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY HH:mm" data-type="datetime" data-id="exp_datetime">enter manually</button>
                        </div>
                    </div>

                    <div class="form-group{{ $errors->has('exp') ? ' has-error' : '' }}" id="exp-container">
                        <label for="exp" class="col-md-4 control-label">Expiration</label>

                        <div class="col-md-4">
                            <input id="exp" type="text" class="form-control" name="exp" value="{{ old('exp') }}" required>

                            @if($errors->has('exp'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('exp') }}</strong>
                                </span>
                            @endif
                        </div>

                        <div class="col-md-2">
                            <button class="enter-manual-date btn" data-format="DD-MM-YYYY" data-type="date" data-id="exp">enter manually</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="submit" id="add-cardoc-submit" class="btn btn-primary">
                                Add Document
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <a href="/index.php/add-driverdoc" class="pull-right">Add Driver Doc</a>
    </div>
</div>

But it doesn't work either. Any ideas?

Show the HTML please because there is nothing in the code you've provided that has any relationship to a form being submitted. You are simply showing code that opens a prompt upon the click of something and a function that runs as soon as the page is ready that sets up a `keypress` event handler. — Scott Marcus, Jul 26 '17 at 00:30
Please try adding an event.preventDefault() on the button keydown event on the Add Document button. — Yatin, Jul 26 '17 at 03:07
thanks @ScottMarcus . there's a lot of HTML that's why I didn't initially included it. I've updated the question. — Wern Ancheta, Jul 26 '17 at 03:08
@Yatin same result. It still submits it upon pressing enter on the prompt box even if the prompt box is empty or has contents. It's as if the prompt box acts some sort of a backdoor that bypasses any method of preventing the form to be submitted. — Wern Ancheta, Jul 26 '17 at 03:15
Sorry, I just realized that the Prompt box is a separate control - you can't stop submission on the prompt box by using a `keypress` or `click` event. Try to `return false` at the end of your click event handler inside `else{}` if you dont' want to submit only in `else` scenario or after `else` so that it doesn't submit in either `if` or `else` scenario. — Yatin, Jul 26 '17 at 03:23

score 1 · Answer 1 · answered Jul 26 '17 at 03:15

1

Let's try the following:

$('myform').submit(function(e) {
    e.preventDefault();
});

Instead of

$(function(){
    $("form").bind("keypress", function (e) {
        if (e.keyCode == 13) {
            return false;
        }
    });
});

Let me know how that works on your case ! Here there are more information about your question.

answered Jul 26 '17 at 03:15

Luillyfe

6,183
8
36
46

that works! but now it's not submitting even if I press the submit button. I'll try the accepted answer from the link you pointed out. – Wern Ancheta Jul 26 '17 at 03:20
the accepted answer doesn't work either. I'm losing my mind here. Maybe I should just use a prompt library. – Wern Ancheta Jul 26 '17 at 03:32
You can make it work again with $('form').unbind('submit'); – Luillyfe Jul 26 '17 at 03:41

score 1 · Accepted Answer · answered Jul 26 '17 at 03:38

1

Ok. So the problem all along was that the "Enter Manually" button was actually triggering the submit. So when you the button is clicked it immediately triggers the submit. But since I'm showing a prompt, the submit gets interrupted until the prompt is closed. That or pressing enter on the prompt triggers the form to be submitted.

answered Jul 26 '17 at 03:38

Wern Ancheta

22,397
38
100
139

Glad you fix it ! – Luillyfe Jul 26 '17 at 03:41

How to prevent prompt dialog from submitting the form upon enter

2 Answers2