CODEWITHSUNDEEP
javascriptjqueryhtml
cachemoi
cachemoi

Reputation: 373

Jquery does not select the form element given an ID

I'm trying to submit a form with jquery, but it does not acknowledge that I submitted it when I click the "submit" button.

My html is as follows:

<form id="singleParam" role="form">

    <div class="form-group">
        <label for="sample_size">Number of samples needed</label>
        <input name="choices[sample_size]" type="number" class="form-control" id="sample_size" placeholder="Enter desired number of samples">
    </div>
    <div class="form-group">
        <label for="mode">Mode of the distribution (value most likely to be sampled)</label>
        <input name="choices[mode]" type="number" class="form-control" id="mode" placeholder="Enter the likeliest value for your parameter">
    </div>
    <div class="form-group">
        <label for="confidence">Confidence interval factor</label>
        <input name="choices[confidence]" type="number" class="form-control" id="confidence" placeholder="Enter desired confidence interval factor">
    </div>
    <div class="form-group">
        <input type="button" class="btn btn-primary btn-lg" id="submit" name="submit">
    </div>

</form>

and JS is:

$('#singleParam').on('submit', function () {
    alert('Form submitted!');
    console.log('Form submitted!');
    return false;
});

The alert() or console.log() in the loop do not work, meaning that jquery did not run the code on submit. What am I doing wrong? It might be worth mentioning that I am using bootstrap.

Upvotes: 0

Views: 42

Answers (1)

palaѕн
palaѕн

Reputation: 73906

Change the button type from type="button" to type="submit"

EDIT:-

Make sure you are calling all your event handlers once the DOM is fully loaded by adding all the code inside dom ready event like:-

$(document).ready(function() {
    // code here
});

Upvotes: 2

Related Questions