表格只能通过提交按钮提交

Question

我有一张表格。我想要提交表单的唯一方法是使用提交按钮。我想确保ios上的enter按钮或go按钮不用于提交表单。

Answer 1

使用按钮类型作为按钮并将其指定为单击功能

    <script type="text/javascript">
        function submitform(){
            $('#myform').submit();
        }
    </script>
    <form id="myform" name="myform" action="somepage" method="POST">
        <button type="button" onclick="submitform();"></button>
    </form>

Answer 2

HTML

<input type="button">不会使用回车键或“快速”触发自动提交。移动设备上的按钮。

<form action="my-handler.php" method="POST" id="my_form">

    <label for="some_input">Input 1
    <input name="some_input" id="some_input" type="text">
    </label>

    <label for="another_input">Input 2
    <input name="another_input" id="another_input" type="text">
    </label>

    <input type="button" value="Submit Form" id="submit_button">

</form>

JavaScript

<script type="text/javascript">

    // Stop the form from submitting if enter is pressed
    // or the 'go' button is pressed on mobile
    $( '#my_form' ).submit(function(e) {

        e.preventDefault();

    });

    // Submit the form when button is clicked
    $( document ).on( 'click', '#submit_button', function() {

        $( '#my_form' ).submit();

    });

</script>

结论

您可能不应过多关注阻止使用输入提交表单提交，或者＆＃39; go＆＃39;在移动设备上，因为这会降低用户体验。我想你是这样做的，因为在表格填写完成之前，有些东西很容易触发提交。也许，在这种情况下，表格验证对你来说是一个更好的朋友，有这样的事情：

<script type="text/javascript">

    $( '#my_form' ).submit( function(e) {

        e.preventDefault(); // Don't let the form submit yet

        if( true == validateForm() ) {
            $( '#my_form' ).submit(); // Submit the form
        } else { 
            // Show error output
        }

    });

    // Validation function - returns true or false
    function validateForm() {
        // Do all your field validation and return
        return true;
    }

</script>