CODEWITHSUNDEEP
javascriptjqueryforms
Sebastian
Sebastian

Reputation: 3628

Why is my form submitting when I don't want it to?

I want my form to submit only if the fields are filled out. At the moment it is submitting regardless of the outcome of the submit function below.

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
    }
});

What else is triggering it?

Here's the form:

<form class="form-horizontal" role="form" id="findmusicians">
        <div class="form-group">
            <label for="inputName" class="col-sm-3 control-label">* Name</label>
        <div class="col-md-7">
            <input type="text" name="inputName" class="form-control required" minlength="1" id="inputName">
            <div id="hidden"></div>
        </div>
        </div>
        <div class="form-group">
            <label for="inputEmail" class="col-sm-3 control-label">* Email</label>
        <div class="col-md-7">
            <input type="email" name="inputEmail" class="form-control" id="inputEmail">
        </div>
        </div>
    <div class="form-group">
        <label for="inputPhone" class="col-sm-3 control-label">Telephone</label>
        <div class="col-md-7">
            <input type="text" name="inputTelephone" class="form-control" id="inputTelephone">
        </div>
    </div>
    <div class="form-group">
        <label for="inputInstrument" class="col-sm-3 control-label">* Instrument(s)</label>
        <div class="col-md-7">
            <input type="text" name="inputInstrument" class="form-control" id="inputInstrument">
        </div>
    </div>
    <div class="form-group">
            <label for="inputFee" class="col-sm-3 control-label">* Fee</label>
            <div class="col-md-7">
                <input type="text" name="inputFee" class="form-control" id="inputFee">
            </div>
        </div>
    <div class="form-group">
        <label for="message" class="col-sm-3 control-label">* Message</label>
        <div class="col-md-9">
            <textarea name="message" id="message" class="form-control" rows="3" style="height: 200px"></textarea>
            <span class="help-block" style="text-align: left;">Please include as much information as possible including repertoire, rehearsal/performance times and venues.</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-3 col-md-offset-3">
            <button id="findmusicians-submit" type="submit" class="btn btn-success">Submit request</button>
        </div>
    </div>
    <div class="col-md-9 col-md-offset-3" style="text-align: left; padding-left: 5px">
        <span id="result" class="text-success"></span>
    </div>
</form>

Upvotes: 2

Views: 50

Answers (4)

M.Jaafar
M.Jaafar

Reputation: 19

Why you don't use required if you want to check the empty fields

<form class="form-horizontal" role="form" id="findmusicians">
    <div class="form-group">
       <label for="inputName" class="col-sm-3 control-label">* Name</label>
       <div class="col-md-7">
          <input type="text" name="inputName" required>
       </div>  
    </div>
    <button type="submit">Submit</button>
</form>

Upvotes: 0

Jordan Denison
Jordan Denison

Reputation: 2727

Try adding e.preventDefault() to prevent the form from submitting.

Upvotes: 1

Filip Ros&#233;en
Filip Ros&#233;en

Reputation: 63797

EXPLANATION

Currently the event bubbles up from within your .submit callback, what basically happens is that the default submit routine is still being fired.

You can prevent this by calling e.preventDefault () from within your callback, to make sure that your event handler is the last to receive the event.

MODIFIED SNIPPET

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
        e.preventDefault () // stop the event
    }
});

Upvotes: 5

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

After alert('fill in all fields'); you have to call preventDafault() to stop the form submit event or just put return false; after alert('fill in all fields'); to stop form submit:

$("#findmusicians").submit(function(e)
{
    if ($('#inputName').val() && $('#inputEmail').val() && $('#inputInstrument').val() && $('#inputFee').val() && $('#message').val() != '')
    {
        alert('success');
    }
    else
    {
        alert('fill in all fields');
        e.preventDefault();
    }
});

Upvotes: 2

Related Questions