Javascript Submit does not include Submit Button Value

Question

Ok, this is less of a question than it is just for my information (because I can think of about 4 different work arounds that will make it work. But I have a form (nothing

Answer 1

Yes, that is the correct behavior of HTMLFormElement.submit()

The reason your submit button value isn't sent is because HTML forms are designed so that they send the value of the submit button that was clicked (or otherwise activated). This allows for multiple submit buttons per form, such as a scenario where you'd want both "Preview" and a "Save" action.

Since you are programmatically submitting the form, there is no explicit user action on an individual submit button so nothing is sent.

Answer 2

Although the acepted answer is technicaly right. There is a way to carry the value you'd like to assign. In fact when the from is submited to the server the value of the submit button is associated to the name you gave the submit button. That's how Marcin trick is working and there is multiple way you can achive that depending what you use. Ex. in jQuery you could pass

data: { 
    submitDocUpdate = "MyValue" 
}

in MVC I would use:

@using (Html.BeginForm("ExternalLogin", "Account", new { submitDocUpdate = "MyValue" }))

This is actually how I complied with steam requirement of using thier own image as login link using oAuth:

@using (Html.BeginForm("ExternalLogin", "Account", new { provider = "Steam" }, FormMethod.Post, new { id = "steamLogin" }))
{
     <a id="loginLink" class="steam-login-button" href="javascript:document.getElementById('steamLogin').submit()"><img alt="Sign in through Steam" src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png"/></a>
}

Answer 3

Understanding the behavior is good, but here's an answer with some code that solved my problem in jquery and php, that others could adapt. In reality this is stripped out of a more complex system that shows a bootstrap modal confirm when clicking the delete button.

TL;DR Have an input dressed up like a button. Upon click change it to a hidden input.

html

<input
    id="delete" 
    name="delete" 
    type="button" 
    class="btn btn-danger"
    data-confirm="Are you sure you want to delete?"
    value="Delete"></input>

jquery

$('#delete').click(function(ev) {
        button.attr('type', 'hidden');
        $('#form1').submit();
    return false;
});

php

if(isset($_POST["delete"])){
    $result = $foo->Delete();    
}

Answer 4

The submit button value is submitted when the user clicks the button. Calling form.submit() is not clicking the button. You may have multiple submit buttons, and the form.submit() function has no way of knowing which one you want to send to the server.

Answer 5

Here is an idea that works fine in all browsers without any external library.

HTML Code

<form id="form1" method="post" >
    ...........Form elements...............
    <input type='button' value='Save' onclick="manualSubmission('form1', 'name_of_button', 'value_of_button')" />
</form>

Java Script

Put this code just before closing of body tag

<script type="text/javascript">
    function manualSubmission(f1, n1, v1){
    var form_f = document.getElementById(f1);
    var fld_n = document.createElement("input");
    fld_n.setAttribute("type", "hidden");
    fld_n.setAttribute("name", n1);
    fld_n.setAttribute("value", v1);
    form_f.appendChild(fld_n);
    form_f.submit();
}
</script>

PHP Code

<?php if(isset($_POST['name_of_button'])){

       // Do what you want to do.
}
?>

Note: Please do not name the button "submit" as it may cause browser incompatibility.

Answer 6

Using a version of jQuery 1.0 or greater:

$('input[type="submit"]').click();

I actually was working through the same problem when I stumbled upon this post. click() without any arguments fires a click event on whatever elements you select: http://api.jquery.com/click/