表单正在提交但未提交

Question

I have a form element with no input type='submit'. I use a button with an onclick to a function call like so:

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button onclick='submit_this_form()' >Submit</button>
</form>

The function is defined as:

function submit_this_form() {
    var my_teams = [];
    for ( var i = 0 ; i < window.my_meet.teams.length; i++ ) {
        my_teams.push( window.my_meet.teams[i].team_id );
    }
    var my_teams_str = my_teams.join('|');
    document.getElementById('team_ids_list').value = my_teams_str;
    alert ( my_teams_str );
    //document.getElementById('meet_builder_form').submit();
}

Do note that the line that actually submits the form is commented out. When i click the button, the alert is not generated and the form submits anyway.

Thoughts?

Answer 1

Prevent the default action of the form which is submit .

function submit_this_form(e) {
    e.preventDefault();
    var my_teams = [];
    for ( var i = 0 ; i < window.my_meet.teams.length; i++ ) {
        my_teams.push( window.my_meet.teams[i].team_id );
    }
    var my_teams_str = my_teams.join('|');
    document.getElementById('team_ids_list').value = my_teams_str;
    alert ( my_teams_str );
    //document.getElementById('meet_builder_form').submit();
}

HTML

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button onclick='submit_this_meet(event)' >Submit</button>
</form>

Answer 2

Try this,

<form method='post' action='build_meet.html' id='meet_builder_form'>
....
<button type="button" onclick='submit_this_form()' >Submit</button>
</form>

Answer 3

Kinjal is correct. The default type for button (when not declared) is "submit". You must declare type="button" to avoid button submitting the form.