CODEWITHSUNDEEP
javascripthtmlforms
user1032531
user1032531

Reputation: 26301

Why isn't submit inputs and submit buttons submitted in form when using JavaScript to submit form?

myform1 sends button with value button-value to the server, but myform2 and myform3 does not. Why is this?

<?php
if(empty($_POST)){
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Testing</title>  
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
            <script type="text/javascript"> 
                $(function(){
                    $( "#myform2, #myform3" ).submit(function( event ) {
                        event.preventDefault();
                        console.log(this,$(this).find(":input,:button").serializeArray());
                        alert('submit')
                        this.submit();
                    });

                });
            </script>
        </head>
        <body>
            <form name="myform" id="myform1" method="post">
                <button value="button-value" name="button" type="submit">button</button>
                <input type="test" value="123" name="data">
            </form>
            <form name="myform" id="myform2" method="post">
                <button value="button-value" name="button" type="submit">button</button>
                <input type="test" value="123" name="data">
            </form>
            <form name="myform" id="myform3" method="post">
                <input value="button-value" name="button" type="submit">
                <input type="test" value="123" name="data">
            </form>
        </body> 
    </html> 
    <?php
}
else {echo('<pre>'.print_r($_POST,1).'</pre>');}  
?>

Upvotes: 1

Views: 627

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78550

Forms can have multiple submit buttons. If you call a form's submit method, it can't infer which submit was used. To get a submit input to register in a post, you have to actively use it to submit the form. I can think of two ways around this.

Default value placed in a hidden input

You could add a default value in a <input type="hidden"> field. If the form is submitted programmatically, the hidden field is used for the value. If the submit button is clicked manually, that will be used as it occurs later in the form.

        <form name="myform" id="myform2" method="post">
            <input type="hidden" value="button-value" name="button">
            <button value="button-value" name="button" type="submit">button</button>
            <input type="test" value="123" name="data">
        </form>

Trigger a click event instead of a submit event

You could also just trigger the click event of a form button, which will in turn trigger the submit of the form with the appropriate value in the POST. With your current code this is less practical to put in an example because nomal submit (which would be triggered after the click event is triggered) is interrupted and prevented.

Upvotes: 1

Related Questions