Javascript how to submit a form?

Question

I have an issue where I wanted to submit by form with javascript but obviously I have hit an issue when trying to do this and wondered if anyone could help me with the issue, more information can be found below on the issue and the code samples.

Hello. My form .submit function isn't calling when I submit my form that's added, can anyone help?

So first, the form is inside the modal:

<div class="modal fade" id="editPositionModal" role="dialog">
    <div class="modal-dialog" style="width:460px;">
        <!-- Modal content-->
        <div class="modal-content" id="edit-position-content">

        </div>
    </div>
</div>

As you can see, the form has yet to be added, so I add it using a function:

function modifyPosition(businessId, positionId) {
    $.ajax({
        url: ajaxCallUrl + 'api/ajax/positions/' + positionId + '/get-edit-content',
        type: "GET",
        error: function(req, message) {
            showErrorNotification('It seems something went wrong, sorry...');
        },
        statusCode: {
            400: function (response) {
                showErrorNotification(response.responseText);
            },
            500: function (response) {
                showErrorNotification(response.responseText);
            }
        },
        success: function(data) {
            lastModifiedPositionId = positionId;

            $('#edit-position-content').html(data);
            $('#editPositionModal').modal('show');
        },
    });
}

I call the above function on the button I click to open the modal with the form on.

Heres the modal content gotten by the ajax request:

<div class="modal-header">
    <button class="close" data-dismiss="modal" type="button">&times;</button>
    <h4 class="modal-title">Creating a new position</h4>
</div>
<div class="modal-body">
    <form id="save_edit_position" method="POST">
    <label>Position Title</label>
    <input type="text" class="form-control" style="margin-bottom:20px;" value="{{ $position->position_title }}">
    <label>Position Pay</label>
    <input type="text" class="form-control" style="margin-bottom:20px;" value="{{ $position->position_shift_wage }}">
    <label>Position Type</label>
    <select class="form-control" name="business_position_type" id="position_type_modify">
        <option value="employee">Employee</option>
        <option value="supervisor">Supervisor</option>
        <option value="manager">Manager</option>
        <option value="ownership">Ownership</option>
    </select>
</div>
<div class="modal-footer">
    <button class="btn btn-success" type="submit"><i class="fa fa-sign-in"></i> &nbsp;Save</button>
    </form>
</div>
<script>
var element = document.getElementById('position_type_modify');
element.value = '{{ $position->position_type }}';
</script>

And here is the javascript handler for the form submit, on the end of the page where the modal content is included on:

$("#save_edit_position").submit(function(e) {
    alert('Submit Called...');
    e.preventDefault(); 

    $.ajax({
        type: "POST",
        url: ajaxCallUrl + 'api/ajax/positions/' + lastModifiedPositionId + '/save-position',
        data: $("#save_edit_position").serialize(),
        error: function(req, message) {
            showErrorNotification('It seems something went wrong, sorry...' + message);
        },
        statusCode: {
            400: function (response) {
                showErrorNotification(response.responseText);
            },
            500: function (response) {
                showErrorNotification(response.responseText);
            }
        },
        success: function(data)
        {
            var mymodal = $('#editPositionModal');
            mymodal.modal('hide');
            showNotification(data, updatePositionsTable(pageBusinessId)); // show response from the php script.
        }
    });
});

Possible duplicate of http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — Vinod Louis, May 02 '17 at 06:03
Possible duplicate of [Submit a form using jQuery](http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery) — Ndroid21, May 02 '17 at 06:13
Do `ajaxCallUrl ` & `lastModifiedPositionId` have right values? — brk, May 02 '17 at 06:17
If I understood your question, here is the answer: document.getElementById("myForm").submit(); — Jose Marques, May 02 '17 at 06:25

madalinivascu · Answer 1 · 2017-05-02T06:23:45.637

3

Delegate you submit event, your form is dynamically added to the page so you need event delegation to bind your event

$('body').on('submit',"#save_edit_position",function(e) {
....

or use a delegated click event

$('body').on('click',"#save_edit_position input[type='submit']",function(e) {
    ....

Note if you have multiple forms on the page with the same id then only the first form with the id will work ids must be unique

edited May 02 '17 at 06:23

answered May 02 '17 at 06:05

madalinivascu

32,064
4
39
55

This doesn't work, I still get nothing from my submit button. – Josh Hallow May 02 '17 at 06:10
@JoshHallow This is not about copy and pasting the code, This is about debugging and retrying. No one is going to work for you. – Vishal Kumar Sahu May 02 '17 at 06:12
is your page refreshing, if its not can you post a picture of your xhr request? – madalinivascu May 02 '17 at 06:12
It's not refreshing, nor do i have any xhr requests relating to this. – Josh Hallow May 02 '17 at 06:14
@JoshHallow then your submit event isn't triggering, try to use a click event on the submit button – madalinivascu May 02 '17 at 06:20

score 1 · Accepted Answer · answered May 02 '17 at 06:24

1

You should use a onSubmit="" function handler onsubmit="functionhere();"

answered May 02 '17 at 06:24

Ash Smith

172
1
2
8

score 0 · Answer 3 · answered May 02 '17 at 06:09

0

Your form is incorrectly structured

<div class="modal-footer">
    <button class="btn btn-success" type="submit"><i class="fa fa-sign-in"></i> &nbsp;Save</button>
    </form>

You cannot, legitimately, straddle the form tag like this and from previous experience this will likely cause problems.

answered May 02 '17 at 06:09

Professor Abronsius

33,063
5
32
46

I've already tried it inside the same `div` tag, I have also had other forms work perfectly fine in different
– Josh Hallow May 02 '17 at 06:11

score 0 · Answer 4 · answered May 02 '17 at 06:13

You can also change your submit type to button like that and add an onclick event to a javascript function. If though your form generate dynamically, but I think this should work.

<div class="modal-footer">
    <input class="btn btn-success" type="button" value="Save" onclick="_submitForm();"/>
</div>

And your js should be

function _submitForm(){
    alert('Submit Called...');

    $.ajax({
        type: "POST",
        url: ajaxCallUrl + 'api/ajax/positions/' + lastModifiedPositionId + '/save-position',
        data: $("#save_edit_position").serialize(),
        error: function(req, message) {
            showErrorNotification('It seems something went wrong, sorry...' + message);
        },
        statusCode: {
            400: function (response) {
                showErrorNotification(response.responseText);
            },
            500: function (response) {
                showErrorNotification(response.responseText);
            }
        },
        success: function(data)
        {
            var mymodal = $('#editPositionModal');
            mymodal.modal('hide');
            showNotification(data, updatePositionsTable(pageBusinessId)); // show response from the php script.
        }
    });
}

score 0 · Answer 5 · answered May 02 '17 at 06:46

0

Try

$("form.save_edit_position").submit(function(e) {...}

I have one more doubt, Can you please share exact location of javascript handler for the form submit in code!!

answered May 02 '17 at 06:46

Vivek Nerle

304
2
14

Javascript how to submit a form?

5 Answers5