Display Bootstrap modal window on submit

Question

Sorry for noob question. I've read Show Twitter Bootstrap modal on form submit and copy-pasted some code from there, but it didn't help.

I'm trying to implement the following behavior on my page:

if 'id_field1' and 'id_field2' fields were populated, then, when user presses 'submit' button, the form must be submitted and following modal window should be displayed:

"[add another] or [redirect to other page]?".

else simple alert must be displayed ("id_field1" and "id_field2" fields must be filled)

But my code currently renders modal window if the fields were not populated, and doesn't submit anything.

html

<form method="POST">

    <input class="form-control" id="id_field1" name="field1" type="text" required="">
    <input class="form-control" id="id_field2" name="field2" type="text" required="">         

    <button type="button" class="btn btn-xl btn-success" data-toggle="modal" data-target="#myModal" id="formsubmit">Add item</button>
</form>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Item was successfully added</h4>
            </div>
            <div class="modal-body">
                <p>Add another?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
                <a href="some_url" class="btn btn-primary">No</a>
            </div>
        </div>
    </div>
</div>

jQuery

$(function(){
    $( "#formsubmit" ).click(function() {
        $( "form" ).submit(function(evt){

        field1 = $( '#id_field1' ).val();
        fiedl2 = $( '#id_field2' ).val();

        if((field1 === '') && (field2 === '')){
            alert("You must enter tenant's name and phone at least");
            evt.preventDefault();
        } else {
            $( '#myModal' ).modal('show');
        }
        });
    });
});

Thank you so much.

fmc · Answer 1 · 2016-12-10T14:11:34.530

1

You have to first set your field values to variables.

$(function(){
$( '#formsubmit' ).click(function() {
    var1 = $( '#id_field1' ).val();
    var2 = $( '#id_field2' ).val();
    if((var1 === "") && (var2 === "")) {
        alert("field1 and field2 must be populated");
        return false;
    } else {
        $( '#myModal' ).modal('show');
    }
  });
});

Updated.

edited Dec 10 '16 at 14:11

answered Dec 10 '16 at 13:26

fmc

490
7
24

Done. Now the code looks better. Do you have additional ideas? – mr_bulrathi Dec 10 '16 at 13:36
Empty fields should now bring up the alert. And completed fields should cause the modal to display. Do either of these happen for you? – fmc Dec 10 '16 at 13:37
Try this: after your set the field values to variables, put in an alert to display the two variables. `alert(var1 + ' ' + var2);` Do this before the `if` statement begins. – fmc Dec 10 '16 at 13:41
i've removed if/else completely, leaving only alert(var1 + ' ' + var2), but nothing changed, absolutely same behavior... – mr_bulrathi Dec 10 '16 at 13:47

Display Bootstrap modal window on submit

1 Answers1